.tmg-vc{ --tmg-lightblue:#7DD3EF; --tmg-teal:#18A8D8; --tmg-gold:#F5BE18; --tmg-gold-dim:#D9A400; --tmg-anthracite:#2B2E33; --tmg-danger:#D64545; --tmg-danger-soft:#F6B8B3; --tmg-n50:#F7F9FA; --tmg-n200:#DDE3E7; --tmg-n400:#98A2AA; --tmg-n600:#4F565C; --tmg-text:var(--tmg-anthracite); --tmg-text-muted:var(--tmg-n600); --tmg-surface:#FFFFFF; --tmg-surface-muted:var(--tmg-n50); --tmg-border:var(--tmg-n200); --tmg-border-strong:var(--tmg-n400); --tmg-radius-md:10px; --tmg-radius-lg:16px; --tmg-radius-pill:999px; --tmg-shadow-sm:0 1px 2px rgba(19,21,23,.06), 0 1px 1px rgba(19,21,23,.04); --tmg-font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; max-width:1120px; margin-inline:auto; padding:clamp(20px,4vw,56px) clamp(16px,3vw,40px); background:var(--tmg-surface); font-family:var(--tmg-font); color:var(--tmg-text); line-height:1.5; } .tmg-vc *,.tmg-vc *::before,.tmg-vc *::after{box-sizing:border-box;} .tmg-vc h2,.tmg-vc h3,.tmg-vc h4,.tmg-vc p{margin:0;padding:0;} .tmg-vc table{border-collapse:collapse;width:auto;margin:0;background:none;border:0;} .tmg-vc th,.tmg-vc td{border:0;background:none;text-align:left;padding:3px 0;vertical-align:top;} .tmg-vc img{max-width:100%;height:auto;} .tmg-vc__kicker{display:flex;align-items:center;gap:14px;flex-wrap:wrap;} .tmg-vc__badge{ display:inline-flex;align-items:center;padding:8px 20px; border-radius:var(--tmg-radius-pill);background:var(--tmg-teal);color:#fff; font-weight:700;font-size:clamp(12px,1.4vw,15px);letter-spacing:.04em;text-transform:uppercase; } .tmg-vc__title{ margin-top:clamp(24px,4vw,48px)!important; font-weight:800;font-size:clamp(34px,6.5vw,72px);line-height:1.05; letter-spacing:-.01em;text-transform:uppercase;color:var(--tmg-text); } .tmg-vc__subtitle{ margin-top:16px!important;font-weight:600;color:var(--tmg-teal); font-size:clamp(17px,2.2vw,26px);line-height:1.3; } .tmg-vc__intro{ margin-top:24px!important;color:var(--tmg-text-muted); font-size:clamp(15px,1.7vw,21px);line-height:1.7;max-width:70ch; } .tmg-box{ margin-top:24px;padding:16px 20px;background:var(--tmg-surface-muted); border-radius:var(--tmg-radius-md);color:var(--tmg-text-muted);font-size:14px;line-height:1.4; overflow-x:auto; -webkit-overflow-scrolling:touch; } .tmg-box__title{ font-weight:700;color:var(--tmg-text);margin-bottom:10px!important; text-transform:uppercase;letter-spacing:.04em;font-size:13px; } .tmg-box table th{font-weight:700;color:var(--tmg-text);padding-right:32px;font-size:14px;} .tmg-box table td{padding-right:32px;font-size:14px;white-space:nowrap;} .tmg-box__source{margin-top:8px!important;font-size:12px;} .tmg-cards{margin-top:clamp(28px,4vw,48px);display:flex;flex-direction:column;gap:24px;} .tmg-card{ background:var(--tmg-surface);border:1px solid var(--tmg-border); border-radius:var(--tmg-radius-lg);box-shadow:var(--tmg-shadow-sm); padding:clamp(18px,2.5vw,28px) clamp(16px,2.5vw,32px); } .tmg-card__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;} .tmg-card__dot{width:10px;height:10px;border-radius:var(--tmg-radius-pill);display:inline-block;flex:none;} .tmg-card__name{ font-weight:700;font-size:clamp(20px,2.6vw,30px);text-transform:uppercase; letter-spacing:.04em;color:var(--tmg-text); } .tmg-card__unit{font-size:clamp(14px,1.5vw,17px);color:var(--tmg-text-muted);font-weight:400;} .tmg-bld{margin-top:22px;} .tmg-bld__name{ font-size:15px;font-weight:700;color:var(--tmg-text-muted); text-transform:uppercase;letter-spacing:.04em; } .tmg-scroll{margin-top:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;} .tmg-chart{display:flex;align-items:flex-end;gap:5px;min-width:560px;} .tmg-col{flex:1;display:flex;flex-direction:column;align-items:center;} .tmg-col__nums{font-size:10px;font-weight:700;margin-bottom:4px;white-space:nowrap;line-height:1.3;text-align:center;} .tmg-col__bars{display:flex;align-items:flex-end;gap:3px;width:100%;height:120px;justify-content:center;} .tmg-col__slot{flex:1;max-width:18px;height:100%;display:flex;align-items:flex-end;} .tmg-bar{ width:100%;min-height:2px;border-radius:3px 3px 1px 1px; transition:height .7s cubic-bezier(0,0,.2,1); } .tmg-bar--y25{border:1px solid var(--tmg-border-strong);} .tmg-col__month{margin-top:6px;font-size:12px;font-weight:600;color:var(--tmg-text-muted);} .tmg-col__change{margin-top:1px;font-size:11px;font-weight:700;white-space:nowrap;} .tmg-legend{ margin-top:10px;display:flex;align-items:center;gap:16px;flex-wrap:wrap; font-size:13px;font-weight:600;color:var(--tmg-text); } .tmg-legend__item{display:flex;align-items:center;gap:5px;} .tmg-legend__swatch{width:12px;height:12px;border-radius:3px;display:inline-block;flex:none;} .tmg-legend__note{margin-left:auto;color:var(--tmg-text-muted);font-weight:400;} .tmg-insight{ margin-top:12px;padding:12px 16px;background:var(--tmg-surface-muted); border-radius:var(--tmg-radius-md);font-size:14px;color:var(--tmg-text-muted);line-height:1.7; } .tmg-vc__closing{ margin-top:clamp(24px,3.5vw,36px)!important;font-weight:700; font-size:clamp(18px,2.3vw,26px);color:var(--tmg-gold-dim);line-height:1.3; } .tmg-vc__footer{margin-top:20px!important;font-size:13px;color:var(--tmg-text-muted);line-height:1.7;} .tmg-hint{display:none;margin-top:6px;font-size:12px;color:var(--tmg-text-muted);} @media (max-width:700px){ .tmg-hint{display:block;} .tmg-legend__note{margin-left:0;flex-basis:100%;} .tmg-box table td,.tmg-box table th{ padding-right:16px; font-size:13px; white-space:normal; word-break:break-word; } } @media (prefers-reduced-motion:reduce){ .tmg-bar{transition:none;} }

Zählerstand-
Check

Beide Gebäude im Vergleich — Monat für Monat, 2025 zu 2026.

Seit dem Einzug führen wir jeden Monat Buch — jetzt für die TMG Junior und das Hauptgebäude zusammen. Hier ist der Überblick über Gas, Wasser und Strom.

Kleiner Verbrauch, große Wirkung — danke, dass ihr mit uns bewusst durchs Schuljahr geht!

Dieser Text wurde mit Unterstützung von KI formuliert.

(function(){ var root=document.getElementById('tmg-verbrauchscheck'); if(!root||root.dataset.tmgInit)return; root.dataset.tmgInit='1'; var monthLabels=['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez']; var raw={ junior:{ gas:{y2025:[null,null,null,null,null,null,null,null,null,null,48612,106480],y2026:[82272,74212,58063,46090,24354,13316,null,null,null,null,null,null]}, wasser:{y2025:[null,null,null,null,null,null,null,null,null,null,30,36],y2026:[48,35,45,33,39,54,null,null,null,null,null,null]}, strom:{y2025:[null,null,null,null,null,null,null,null,null,null,620,253],y2026:[728,108,110,102,94,122,null,null,null,null,null,null]} }, haupt:{ gas:{y2025:[258331,209894,162762,93894,80169,48047,43355,46022,56837,110530,157292,205991],y2026:[238824,181393,128722,102012,63592,47755,null,null,null,null,null,null]}, wasser:{y2025:[362,320,270,261,260,205,154,147,212,258,303,288],y2026:[330,259,262,260,220,219,null,null,null,null,null,null]}, strom:{y2025:[329,156,133,85,194,178,52,37,102,79,105,82],y2026:[112,79,91,79,136,108,null,null,null,null,null,null]} } }; var temps2025=[2.5,3.0,7.0,11.0,13.6,18.3,18.5,18.3,15.0,10.8,6.8,4.8]; var temps2026=[1.4,4.9,7.5,9.9,14.1,19.5,null,null,null,null,null,null]; var utilities=[ {key:'gas',name:'Gas',unit:'kWh',accent:'var(--tmg-danger)',c25:'var(--tmg-danger-soft)',c26:'var(--tmg-danger)',showTemps:true}, {key:'wasser',name:'Wasser',unit:'m³',accent:'var(--tmg-teal)',c25:'var(--tmg-lightblue)',c26:'var(--tmg-teal)'}, {key:'strom',name:'Strom',unit:'kWh',accent:'var(--tmg-gold-dim)',c25:'var(--tmg-gold)',c26:'var(--tmg-gold-dim)'} ]; var buildings=[{key:'junior',name:'TMG Junior'},{key:'haupt',name:'Hauptgebäude'}]; var holidayMonths={Okt:'Herbstferien',Dez:'Weihnachtsferien',Jan:'Weihnachtsferien','Mär':'Osterferien',Apr:'Osterferien',Jul:'Sommerferien',Aug:'Sommerferien'}; function fmtFull(n){return Math.round(n).toLocaleString('de-DE');} function fmtCompact(n){ if(Math.abs(n)>=1000)return(n/1000).toLocaleString('de-DE',{minimumFractionDigits:1,maximumFractionDigits:1})+'k'; return Math.round(n).toLocaleString('de-DE'); } function buildInsight(bKey,uKey,unit){ var y25=raw[bKey][uKey].y2025,y26=raw[bKey][uKey].y2026; var overlap=monthLabels.map(function(l,i){return{label:l,v25:y25[i],v26:y26[i]};}).filter(function(m){return m.v25!=null&&m.v26!=null;}).map(function(m){m.pct=((m.v26-m.v25)/m.v25)*100;return m;}); if(!overlap.length){ var a=monthLabels.filter(function(l,i){return y25[i]!=null;}); var b=monthLabels.filter(function(l,i){return y26[i]!=null;}); return 'Noch kein Vergleich möglich: 2025 gibt es Zahlen für '+(a.join(', ')||'keinen Monat')+', 2026 für '+(b.join(', ')||'keinen Monat')+' – kein Monat kommt in beiden Jahren vor. Ein leerer Balken heißt: noch nicht abgelesen, nicht „kein Verbrauch“.'; } var best=overlap.reduce(function(x,y){return y.pct<x.pct?y:x;}); var text='Größter Unterschied: '+best.label+' – '+fmtFull(best.v25)+' '+unit+' (2025) zu '+fmtFull(best.v26)+' '+unit+' (2026), also '+Math.abs(Math.round(best.pct))+'% '+(best.pct=0?'+':'−')+Math.abs(Math.round(p))+'%'; changeColor=c26; } var l1='\u00A0',l1c='transparent',l2='\u00A0',l2c='transparent'; if(v25!=null&&v26!=null){l1=fmtCompact(v25);l1c=c25;l2=fmtCompact(v26);l2c=c26;} else if(v26!=null){l2=fmtCompact(v26);l2c=c26;} else if(v25!=null){l2=fmtCompact(v25);l2c=c25;} return{label:label,v25:v25,v26:v26,pct25:pct(v25),pct26:pct(v26),l1:l1,l1c:l1c,l2:l2,l2c:l2c,change:change,changeColor:changeColor}; }); } var tempRows=monthLabels.map(function(l,i){return{label:l,t25:temps2025[i],t26:temps2026[i]};}).filter(function(m){return m.t25!=null&&m.t26!=null;}).map(function(m){ var d=m.t26-m.t25; var f=d.toLocaleString('de-DE',{minimumFractionDigits:1,maximumFractionDigits:1,signDisplay:'always'}); return{label:m.label,diff:f+' °C '+(d>=0?'wärmer':'kälter')+' als 2025'}; }); function el(tag,cls,txt){var n=document.createElement(tag);if(cls)n.className=cls;if(txt!=null)n.textContent=txt;return n;} var cards=document.getElementById('tmg-cards'),bars=[]; utilities.forEach(function(u){ var card=el('div','tmg-card'),head=el('div','tmg-card__head'),dot=el('span','tmg-card__dot'); dot.style.background=u.accent; head.appendChild(dot); head.appendChild(el('h3','tmg-card__name',u.name)); head.appendChild(el('span','tmg-card__unit','— Verbrauch in '+u.unit)); card.appendChild(head); buildings.forEach(function(b){ var groups=buildGroups(b.key,u.key,u.c25,u.c26),wrap=el('div','tmg-bld'); wrap.appendChild(el('h4','tmg-bld__name',b.name)); var scroll=el('div','tmg-scroll'),chart=el('div','tmg-chart'); chart.setAttribute('role','img'); chart.setAttribute('aria-label',u.name+' '+b.name+': Monatsverbrauch 2025 gegenüber 2026 in '+u.unit+'.'); groups.forEach(function(g){ var col=el('div','tmg-col'),nums=el('div','tmg-col__nums'),n1=el('div',null,g.l1);n1.style.color=g.l1c; var n2=el('div',null,g.l2);n2.style.color=g.l2c; nums.appendChild(n1);nums.appendChild(n2); col.appendChild(nums); var barBox=el('div','tmg-col__bars'); [['y25',g.v25,g.pct25,u.c25,'2025'],['y26',g.v26,g.pct26,u.c26,'2026']].forEach(function(spec){ var slot=el('div','tmg-col__slot'),bar=el('div','tmg-bar tmg-bar--'+spec[0]); bar.style.background=spec[3];bar.style.height='0%';bar.dataset.h=spec[2]+'%'; bar.title=g.label+' '+spec[4]+': '+(spec[1]==null?'noch nicht abgelesen':fmtFull(spec[1])+' '+u.unit); slot.appendChild(bar);barBox.appendChild(slot);bars.push(bar); }); col.appendChild(barBox); col.appendChild(el('div','tmg-col__month',g.label)); var ch=el('div','tmg-col__change',g.change);ch.style.color=g.changeColor; col.appendChild(ch); chart.appendChild(col); }); scroll.appendChild(chart);wrap.appendChild(scroll); wrap.appendChild(el('p','tmg-hint','Diagramm seitlich scrollen →')); var legend=el('div','tmg-legend'); [['2025',u.c25,true],['2026',u.c26,false]].forEach(function(l){ var item=el('div','tmg-legend__item'),sw=el('span','tmg-legend__swatch'); sw.style.background=l[1];if(l[2])sw.style.border='1px solid var(--tmg-border-strong)'; item.appendChild(sw);item.appendChild(document.createTextNode(l[0]));legend.appendChild(item); }); legend.appendChild(el('span','tmg-legend__note','% = Unterschied zum gleichen Monat im Vorjahr')); wrap.appendChild(legend); wrap.appendChild(el('p','tmg-insight',buildInsight(b.key,u.key,u.unit))); card.appendChild(wrap); }); if(u.showTemps&&tempRows.length){ var box=el('div','tmg-box'); box.appendChild(el('h4','tmg-box__title','NRW-Durchschnittstemperatur 2026 ggü. 2025')); var tbl=el('table'),thead=el('thead'),trh=el('tr'); ['Monat','Unterschied'].forEach(function(h){var th=el('th',null,h);th.setAttribute('scope','col');trh.appendChild(th);}); thead.appendChild(trh);tbl.appendChild(thead); var tb=el('tbody'); tempRows.forEach(function(r){var tr=el('tr');tr.appendChild(el('td',null,r.label));tr.appendChild(el('td',null,r.diff));tb.appendChild(tr);}); tbl.appendChild(tb);box.appendChild(tbl); box.appendChild(el('p','tmg-box__source','Quelle: LANUK NRW / Deutscher Wetterdienst (Witterungsverlauf NRW)')); card.appendChild(box); } cards.appendChild(card); }); var reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches; if(reduce||!('IntersectionObserver' in window)){ bars.forEach(function(b){b.style.height=b.dataset.h;}); }else{ var io=new IntersectionObserver(function(entries){ entries.forEach(function(e){if(!e.isIntersecting)return;e.target.style.height=e.target.dataset.h;io.unobserve(e.target);}); },{threshold:0.1}); bars.forEach(function(b){io.observe(b);}); } })();