#energie-monitor-koeln.em11{--bg:#fff;--ink:#14304b;--muted:#5c7181;--line:#d9e1e8;--panel:#ffffff;--soft:#f5f8fb;--blue:#1f64a8;--teal:#2aa598;--teal-dark:#1b8f83;--orange:#ef7b1a;--gas:#f25e13;--shadow:0 6px 18px rgba(22,48,75,.05);font-family:Arial,Helvetica,sans-serif;color:var(--ink);max-width:100%;margin:0 auto;padding:0 0 24px;box-sizing:border-box}
#energie-monitor-koeln.em11,#energie-monitor-koeln.em11 *{box-sizing:border-box}
#energie-monitor-koeln.em11 a{color:var(--blue);text-decoration:none}
#energie-monitor-koeln.em11 a:hover{text-decoration:underline}
#energie-monitor-koeln.em11 .em11-breadcrumb{font-size:12px;line-height:1.4;color:#6f8190;margin:2px 0 14px}
#energie-monitor-koeln.em11 .em11-breadcrumb span,#energie-monitor-koeln.em11 .em11-breadcrumb strong{margin-right:6px}
#energie-monitor-koeln.em11 .em11-kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#1b7d8f;margin:0 0 10px}
#energie-monitor-koeln.em11 .em11-main-title,#energie-monitor-koeln.em11 h2,#energie-monitor-koeln.em11 h3{font-family:Georgia,"Times New Roman",serif;color:#13324c}
#energie-monitor-koeln.em11 .em11-main-title{font-size:clamp(44px,5.2vw,64px);line-height:.95;margin:0 0 14px;letter-spacing:-.03em}
#energie-monitor-koeln.em11 h2{font-size:clamp(26px,3vw,34px);line-height:1.1;margin:0 0 10px}
#energie-monitor-koeln.em11 h3{font-size:18px;line-height:1.25;margin:0 0 8px}
#energie-monitor-koeln.em11 p{margin:0 0 12px;line-height:1.5}
#energie-monitor-koeln.em11 .em11-subline{font-size:clamp(18px,2.2vw,22px);line-height:1.25;color:#324b63;margin-bottom:16px}
#energie-monitor-koeln.em11 .em11-intro{font-size:16px;color:#31465a;max-width:35em}
#energie-monitor-koeln.em11 .em11-update{font-size:14px;color:#627585;margin-top:10px}
#energie-monitor-koeln.em11 .em11-status{display:inline-block;padding:10px 14px;border-radius:14px;background:#f3f7fa;border:1px solid #dde6ee;color:#476176;font-size:14px}
#energie-monitor-koeln.em11 .em11-status.ok{background:#eef8f4;border-color:#d2eadf;color:#2e6b4a}
#energie-monitor-koeln.em11 .em11-hero{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,.95fr);border:1px solid var(--line);background:#fff;overflow:hidden}
#energie-monitor-koeln.em11 .em11-hero-image{min-height:370px;background:#cfdce6}
#energie-monitor-koeln.em11 .em11-hero-image img{display:block;width:100%;height:100%;object-fit:cover;filter:contrast(1.03) saturate(1.05) brightness(1.02)}
#energie-monitor-koeln.em11 .em11-hero-copy{padding:26px 26px 22px;background:#fff}
#energie-monitor-koeln.em11 .em11-section{border:1px solid var(--line);border-top:none;background:#fff;padding:18px 18px 16px}
#energie-monitor-koeln.em11 .em11-headline-row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:16px}
#energie-monitor-koeln.em11 .em11-lead{font-size:16px;color:#496074;margin:0}
#energie-monitor-koeln.em11 .em11-stand{font-size:14px;color:#687989;white-space:nowrap;margin:6px 0 0}
#energie-monitor-koeln.em11 .em11-price-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#energie-monitor-koeln.em11 .em11-price-card{display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:flex-start;padding:16px 18px;border:1px solid #e1e8ee;background:#fff}
#energie-monitor-koeln.em11 .em11-price-power{box-shadow:inset 0 0 0 9999px rgba(37,163,150,.03)}
#energie-monitor-koeln.em11 .em11-price-gas{box-shadow:inset 0 0 0 9999px rgba(242,94,19,.035)}
#energie-monitor-koeln.em11 .em11-card-icon,#energie-monitor-koeln.em11 .em11-stat-icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;flex:0 0 auto}
#energie-monitor-koeln.em11 .em11-price-power .em11-card-icon{background:#f3ecd8;color:#d8990c}
#energie-monitor-koeln.em11 .em11-price-gas .em11-card-icon{background:#fbebde;color:#f25e13}
#energie-monitor-koeln.em11 .em11-card-label{font-size:15px;font-weight:700;color:#233f57;margin-bottom:4px}
#energie-monitor-koeln.em11 .em11-card-tariff{display:flex;flex-direction:column;gap:2px;font-size:14px;color:#4b6275;margin-bottom:8px}
#energie-monitor-koeln.em11 .em11-card-tariff strong{font-size:16px;color:#16344d}
#energie-monitor-koeln.em11 .em11-card-price{font-size:30px;line-height:1.05;font-weight:800;margin:0 0 6px}
#energie-monitor-koeln.em11 .em11-price-power .em11-card-price{color:var(--orange)}
#energie-monitor-koeln.em11 .em11-price-gas .em11-card-price{color:#ef4f0e}
#energie-monitor-koeln.em11 .em11-card-meta{font-size:14px;color:#556979;margin-bottom:10px}
#energie-monitor-koeln.em11 .em11-card-link{font-size:14px;font-weight:700;margin-bottom:0}
#energie-monitor-koeln.em11 .em11-calc{background:linear-gradient(180deg,#f5f9fc 0%,#f8fbfd 100%)}
#energie-monitor-koeln.em11 .em11-calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
#energie-monitor-koeln.em11 .em11-calc-card{background:#fff;border:1px solid var(--line);padding:16px}
#energie-monitor-koeln.em11 .em11-calc-card label{display:block;font-size:15px;font-weight:700;color:#244058;margin-bottom:10px}
#energie-monitor-koeln.em11 .em11-input-wrap{display:grid;grid-template-columns:1fr auto;align-items:center;border:1px solid #cfd9e2;background:#fff;height:44px}
#energie-monitor-koeln.em11 .em11-input-wrap input{border:0;padding:0 12px;font-size:16px;color:#18344c;outline:none;background:transparent;width:100%}
#energie-monitor-koeln.em11 .em11-input-wrap span{padding:0 12px;font-size:15px;color:#566a7b;background:#f7fafc;border-left:1px solid #d8e0e8;height:100%;display:flex;align-items:center}
#energie-monitor-koeln.em11 .em11-calc-result{padding-top:16px}
#energie-monitor-koeln.em11 .em11-calc-result strong{display:block;font-size:24px;line-height:1.1;color:#14304b;margin-bottom:3px}
#energie-monitor-koeln.em11 .em11-calc-result span{font-size:14px;color:#466074}
#energie-monitor-koeln.em11 .em11-note{font-size:13px;color:#697c89;margin-top:16px}
#energie-monitor-koeln.em11 .em11-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
#energie-monitor-koeln.em11 .em11-stat-card{border:1px solid var(--line);padding:14px 14px 12px;background:#fff}
#energie-monitor-koeln.em11 .em11-stat-card .em11-stat-icon{width:46px;height:46px;font-size:23px;background:#f2f7f8;color:#2a8a8a;margin-bottom:10px}
#energie-monitor-koeln.em11 .em11-stat-card strong{display:block;font-size:18px;line-height:1.1;color:#14304b;margin-bottom:5px}
#energie-monitor-koeln.em11 .em11-stat-card span{display:block;font-size:14px;line-height:1.35;color:#496074}
#energie-monitor-koeln.em11 .em11-smallline{font-size:13px;color:#6d7f8d}
#energie-monitor-koeln.em11 .em11-chart-box{border:1px solid var(--line);padding:16px;margin-top:16px;background:#fff}
#energie-monitor-koeln.em11 .em11-small{font-size:13px;color:#697b88}
#energie-monitor-koeln.em11 .em11-chart{padding-top:8px}
#energie-monitor-koeln.em11 .em11-bars{display:flex;align-items:flex-end;gap:14px;height:220px;border-bottom:1px solid #cad6df;padding:8px 0 0}
#energie-monitor-koeln.em11 .em11-barcol{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;flex:1;height:100%}
#energie-monitor-koeln.em11 .em11-bar{width:100%;max-width:56px;background:linear-gradient(180deg,#58c8bc,#33ab9e);border-radius:5px 5px 0 0}
#energie-monitor-koeln.em11 .em11-barcol .value{font-size:13px;font-weight:700;color:#2e6e71}
#energie-monitor-koeln.em11 .em11-barcol .year{font-size:12px;color:#6a7d8a}
#energie-monitor-koeln.em11 .em11-meaning{display:grid;grid-template-columns:minmax(0,1.5fr) 260px;gap:24px;align-items:center;background:linear-gradient(180deg,#f8fcfb 0%,#fcfefd 100%)}
#energie-monitor-koeln.em11 .em11-ring-box{display:flex;justify-content:center}
#energie-monitor-koeln.em11 .em11-ring{--angle:0deg;width:190px;height:190px;border-radius:50%;background:conic-gradient(var(--teal) 0 var(--angle), #dfeceb var(--angle) 360deg);display:flex;align-items:center;justify-content:center}
#energie-monitor-koeln.em11 .em11-ring-inner{width:138px;height:138px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:12px}
#energie-monitor-koeln.em11 .em11-ring-inner strong{font-size:28px;line-height:1.05;color:#15324b;margin-bottom:6px}
#energie-monitor-koeln.em11 .em11-ring-inner span{font-size:14px;line-height:1.3;color:#506678}
#energie-monitor-koeln.em11 .em11-footer-grid{display:grid;grid-template-columns:1.15fr 1fr .9fr;gap:18px}
#energie-monitor-koeln.em11 .em11-footer-grid > div{padding-right:8px}
@media (max-width:980px){#energie-monitor-koeln.em11 .em11-hero{grid-template-columns:1fr}#energie-monitor-koeln.em11 .em11-hero-image{min-height:280px}#energie-monitor-koeln.em11 .em11-headline-row{flex-direction:column;align-items:flex-start}#energie-monitor-koeln.em11 .em11-price-grid,#energie-monitor-koeln.em11 .em11-calc-grid,#energie-monitor-koeln.em11 .em11-stats-grid,#energie-monitor-koeln.em11 .em11-footer-grid,#energie-monitor-koeln.em11 .em11-meaning{grid-template-columns:1fr 1fr}#energie-monitor-koeln.em11 .em11-ring-box{grid-column:1/-1}}
@media (max-width:680px){#energie-monitor-koeln.em11 .em11-main-title{font-size:40px}#energie-monitor-koeln.em11 h2{font-size:28px}#energie-monitor-koeln.em11 .em11-price-grid,#energie-monitor-koeln.em11 .em11-calc-grid,#energie-monitor-koeln.em11 .em11-stats-grid,#energie-monitor-koeln.em11 .em11-footer-grid,#energie-monitor-koeln.em11 .em11-meaning{grid-template-columns:1fr}#energie-monitor-koeln.em11 .em11-section{padding:16px 14px}#energie-monitor-koeln.em11 .em11-price-card{grid-template-columns:56px 1fr;padding:14px}#energie-monitor-koeln.em11 .em11-card-price{font-size:28px}#energie-monitor-koeln.em11 .em11-bars{gap:8px;height:200px}#energie-monitor-koeln.em11 .em11-bar{max-width:40px}#energie-monitor-koeln.em11 .em11-ring{width:170px;height:170px}#energie-monitor-koeln.em11 .em11-ring-inner{width:122px;height:122px}}

/* V1.2: bildfreier Kopf und reaktionsfähige Layouts innerhalb der TYPO3-Hauptspalte */
#energie-monitor-koeln.em11 {width:100%;min-width:0;container-type:inline-size}
#energie-monitor-koeln.em11 .em11-hero {display:block;min-width:0;border:1px solid var(--line);background:#f6f9fb}
#energie-monitor-koeln.em11 .em11-hero-copy {padding:26px 24px 22px;max-width:100%}
#energie-monitor-koeln.em11 .em11-main-title {font-size:clamp(30px,5.4cqi,42px);line-height:1.1;letter-spacing:-.025em}
#energie-monitor-koeln.em11 h2 {font-size:clamp(22px,3.4cqi,29px);line-height:1.2}
#energie-monitor-koeln.em11 .em11-section {min-width:0}
#energie-monitor-koeln.em11 .em11-price-grid,#energie-monitor-koeln.em11 .em11-calc-grid,#energie-monitor-koeln.em11 .em11-stats-grid,#energie-monitor-koeln.em11 .em11-footer-grid {min-width:0}
#energie-monitor-koeln.em11 .em11-price-card,#energie-monitor-koeln.em11 .em11-calc-card,#energie-monitor-koeln.em11 .em11-stat-card {min-width:0}
#energie-monitor-koeln.em11 .em11-card-price {overflow-wrap:anywhere}
#energie-monitor-koeln.em11 .em11-chart-box {overflow:hidden;min-width:0}
#energie-monitor-koeln.em11 .em11-stand {white-space:normal}
@container (max-width: 720px){
  #energie-monitor-koeln.em11 .em11-price-grid{grid-template-columns:1fr}
  #energie-monitor-koeln.em11 .em11-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #energie-monitor-koeln.em11 .em11-footer-grid{grid-template-columns:1fr}
  #energie-monitor-koeln.em11 .em11-meaning{grid-template-columns:minmax(0,1fr)}
  #energie-monitor-koeln.em11 .em11-ring-box{grid-column:auto}
}
@container (max-width: 510px){
  #energie-monitor-koeln.em11 .em11-calc-grid{grid-template-columns:1fr}
  #energie-monitor-koeln.em11 .em11-headline-row{flex-direction:column;gap:8px}
  #energie-monitor-koeln.em11 .em11-hero-copy{padding:20px 17px}
  #energie-monitor-koeln.em11 .em11-bars{gap:5px}
  #energie-monitor-koeln.em11 .em11-barcol .value,#energie-monitor-koeln.em11 .em11-barcol .year{font-size:10px}
}
@container (max-width: 360px){
  #energie-monitor-koeln.em11 .em11-stats-grid{grid-template-columns:1fr}
  #energie-monitor-koeln.em11 .em11-price-card{grid-template-columns:48px minmax(0,1fr)}
}