/* lumen-watt.de - Design Engineering
   DESIGN_VARIANCE: 6 | MOTION_INTENSITY: 4 | VISUAL_DENSITY: 5
   Akzent: #f59e0b (Amber) | Basis: #0f1117 (Off-Black) */

@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/source-sans-pro-400.woff2') format('woff2')}
@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/source-sans-pro-600.woff2') format('woff2')}
@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/source-sans-pro-700.woff2') format('woff2')}
@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/source-sans-pro-800.woff2') format('woff2')}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:18px;scroll-behavior:smooth}
body{font-family:'Source Sans Pro',system-ui,sans-serif;color:#e8e8e8;background:#0f1117;line-height:1.6;-webkit-font-smoothing:antialiased}

/* Skip-Link */
.skip-link{position:absolute;top:-100%;left:0;background:#f59e0b;color:#0f1117;padding:8px 20px;z-index:100;font-weight:700;text-decoration:none;border-radius:0 0 6px 0}
.skip-link:focus{top:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #f59e0b;outline-offset:2px;border-radius:2px}
a{color:#f59e0b;text-decoration:none}
a:hover{text-decoration:underline}

/* Header */
.header{border-bottom:1px solid rgba(245,158,11,.08);padding:0 24px;height:56px;display:flex;align-items:center}
.header-inner{max-width:860px;margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between}
.logo{font-size:1.15rem;font-weight:800;color:#f59e0b;text-decoration:none;letter-spacing:-.02em}
.logo:hover{text-decoration:none;opacity:.85}
.logo span{color:#6b7280;font-weight:400}
.lang{font-size:.78rem;color:#6b7280}
.lang a{color:#f59e0b;text-decoration:none;font-weight:600;transition:opacity .2s}
.lang a:hover{opacity:.7}
.lang .active{color:#fff;font-weight:600}

/* Hero - Split Layout (DESIGN_VARIANCE 6) */
.hero{padding:48px 24px 0;max-width:860px;margin:0 auto}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media(max-width:700px){.hero-grid{grid-template-columns:1fr;gap:20px}}
.hero-text h1{font-size:2.2rem;font-weight:800;line-height:1.1;letter-spacing:-.03em;color:#fff;margin-bottom:12px}
@media(max-width:700px){.hero-text h1{font-size:1.6rem}}
.hero-text p{color:#9ca3af;font-size:1rem;max-width:36ch;line-height:1.6}
.hero-badge{display:inline-block;background:rgba(245,158,11,.12);color:#f59e0b;font-size:.7rem;font-weight:700;padding:4px 10px;border-radius:4px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.hero-info{background:rgba(245,158,11,.04);border:1px solid rgba(245,158,11,.08);border-radius:14px;padding:28px;text-align:center}
.hero-info-icon{font-size:3.5rem;margin-bottom:8px;filter:drop-shadow(0 0 20px rgba(245,158,11,.3))}
.hero-info-val{font-size:2rem;font-weight:800;color:#f59e0b}
.hero-info-sub{font-size:.85rem;color:#6b7280;margin-top:4px}
.hero-info-formula{margin-top:14px;font-size:.72rem;color:#4b5563}

/* Content */
.content-wrap{max-width:860px;margin:0 auto;padding:0 24px 48px}

/* Slider Section */
.slider-section{padding:32px 0 10px}

/* Zimmer-Visualisierung */
.brightness-viz{position:relative;width:100%;height:0;padding-bottom:52.5%;border-radius:14px;overflow:hidden;background:#0a0c10}
.room-set{position:absolute;top:0;left:0;width:100%;height:100%}
.room-step{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:14px;transition:opacity .12s ease}
@media(min-width:600px){.brightness-viz{border-radius:14px}}

/* Raum-Umschalter */
.room-switch{display:flex;gap:6px;margin:12px 0 16px}
.room-btn{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);color:#9ca3af;padding:7px 16px;border-radius:8px;font-size:.78rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s}
.room-btn:hover{background:rgba(245,158,11,.06);color:#f59e0b;border-color:rgba(245,158,11,.15)}
.room-btn:active{transform:scale(0.97)}
.room-btn.active{background:rgba(245,158,11,.1);color:#f59e0b;border-color:rgba(245,158,11,.25)}

/* Slider Header */
.slider-label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.slider-label .name{font-size:.72rem;color:#6b7280;text-transform:uppercase;letter-spacing:.08em}
.slider-label .val{font-size:1.8rem;font-weight:800;color:#f59e0b;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* Range Slider */
input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:pointer}
input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#1e1f26 0%,#3b2a0a 20%,#7c4a0a 40%,#d97706 60%,#f59e0b 80%,#fde68a 100%)}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid #f59e0b;margin-top:-9px;box-shadow:0 2px 8px rgba(0,0,0,.4);transition:box-shadow .2s}
input[type="range"]::-webkit-slider-thumb:hover{box-shadow:0 2px 12px rgba(245,158,11,.4)}
input[type="range"]::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#1e1f26 0%,#3b2a0a 20%,#7c4a0a 40%,#d97706 60%,#f59e0b 80%,#fde68a 100%)}
input[type="range"]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid #f59e0b;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.slider-ticks{display:flex;justify-content:space-between;font-size:.68rem;color:#4b5563;margin-bottom:20px}

/* Ergebnis-Karten - asymmetrisch (Anti-3-Card-Rule) */
.results{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:10px;margin-bottom:20px}
@media(max-width:500px){.results{grid-template-columns:1fr}}
.result-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:14px 16px;text-align:center;transition:all .2s}
.result-card:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.result-card .type{font-size:.65rem;color:#6b7280;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.result-card .watt{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.result-card .watt.led{color:#22c55e}
.result-card .watt.halogen{color:#f59e0b}
.result-card .watt.glueh{color:#ef4444}
.result-card .save{font-size:.68rem;margin-top:2px;color:#6b7280}

/* Stromverbrauch-Balken */
.bar-section{margin:20px 0 24px}
.bar-section .title{font-size:.68rem;color:#6b7280;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.bar-row .label{width:65px;text-align:right;font-size:.8rem;color:#9ca3af}
.bar-track{flex:1;height:18px;background:rgba(255,255,255,.03);border-radius:4px;overflow:hidden}
.bar-fill{height:100%;border-radius:4px;transition:width .35s cubic-bezier(.16,1,.3,1);min-width:16px;position:relative}
.bar-fill.led{background:linear-gradient(90deg,#14532d,#22c55e)}
.bar-fill.halogen{background:linear-gradient(90deg,#713f12,#f59e0b)}
.bar-fill.glueh{background:linear-gradient(90deg,#7f1d1d,#ef4444)}
.bar-val{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:.68rem;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}

/* Raum-Empfehlung */
.room-tip{background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.1);border-radius:10px;padding:14px 16px;display:flex;align-items:center;gap:12px;margin-bottom:8px}
.room-tip .icon{font-size:1.5rem;flex-shrink:0}
.room-tip .text{font-size:.88rem;color:#d1d5db;line-height:1.5}
.room-tip .text strong{color:#f59e0b}

/* Section Titles */
.section-title{font-size:1.3rem;font-weight:700;color:#fff;margin:36px 0 14px;padding-bottom:8px;border-bottom:2px solid rgba(245,158,11,.2);letter-spacing:-.01em}

/* Tabelle */
.table-wrap{overflow-x:auto;margin:0 0 20px;border-radius:10px;border:1px solid rgba(255,255,255,.06)}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th{background:rgba(245,158,11,.08);color:#f59e0b;padding:10px 14px;text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
td{padding:10px 14px;border-top:1px solid rgba(255,255,255,.04);color:#d1d5db}
tr{transition:background .15s}
tr:hover{background:rgba(245,158,11,.04)}
td a{color:#fff;font-weight:700;text-decoration:none;border-bottom:2px solid rgba(245,158,11,.3);transition:border-color .2s}
td a:hover{border-color:#f59e0b}

/* Auch gesucht - 2-Spalten asymmetrisch */
.related-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:10px;margin:14px 0 24px}
@media(max-width:500px){.related-grid{grid-template-columns:1fr}}
.related-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:16px;text-decoration:none;color:inherit;transition:all .2s}
.related-card:hover{background:rgba(245,158,11,.05);border-color:rgba(245,158,11,.2);text-decoration:none;transform:translateY(-1px)}
.related-card:active{transform:translateY(0)}
.related-card h3{font-size:1rem;font-weight:700;color:#fff;margin-bottom:2px}
.related-card p{font-size:.78rem;color:#6b7280}

/* Artikel-Body */
.article-body{margin:20px 0;max-width:65ch}
.article-body p{margin-bottom:16px;color:#d1d5db}
.article-body strong{color:#fff}
.article-body h2{font-size:1.3rem;font-weight:700;color:#fff;margin:32px 0 12px;padding-bottom:8px;border-bottom:2px solid rgba(245,158,11,.2);letter-spacing:-.01em}
.article-body ul{margin:0 0 16px 20px;color:#d1d5db}
.article-body li{margin-bottom:6px}
.article-body a{color:#f59e0b}

/* Infobox */
.infobox{background:rgba(245,158,11,.06);border-left:3px solid #f59e0b;padding:16px 20px;border-radius:0 10px 10px 0;margin:24px 0}
.infobox strong{color:#f59e0b}

/* FAQ */
.faq-item{margin:14px 0;padding:16px 18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:10px;transition:border-color .2s}
.faq-item:hover{border-color:rgba(245,158,11,.15)}
.faq-item h3{font-size:1rem;color:#fff;margin:0 0 6px;font-weight:700}
.faq-item p{margin:0;color:#9ca3af;font-size:.92rem}

/* Quellen */
.sources{margin:28px 0;padding:14px 18px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:10px}
.sources-title{font-size:.65rem;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.sources ul{list-style:none;margin:0;padding:0}
.sources li{font-size:.78rem;margin-bottom:4px;padding-left:14px;position:relative;color:#9ca3af}
.sources li::before{content:'\2192';position:absolute;left:0;color:#f59e0b}
.sources a{color:#f59e0b;text-decoration:none}
.sources a:hover{opacity:.7}

/* Footer */
.footer{border-top:1px solid rgba(255,255,255,.04);padding:20px 24px;text-align:center}
.footer-inner{max-width:860px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.footer a{color:#6b7280;font-size:.78rem;text-decoration:none;margin:0 8px;transition:color .2s}
.footer a:hover{color:#f59e0b}
.footer-copy{font-size:.72rem;color:#374151}

/* Load-In Animation (MOTION_INTENSITY 4) */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.hero-text{animation:fadeUp .5s cubic-bezier(.16,1,.3,1) both}
.hero-info{animation:fadeUp .5s cubic-bezier(.16,1,.3,1) .1s both}
.brightness-viz{animation:fadeUp .5s cubic-bezier(.16,1,.3,1) .15s both}
.results{animation:fadeUp .4s cubic-bezier(.16,1,.3,1) .2s both}
.bar-section{animation:fadeUp .4s cubic-bezier(.16,1,.3,1) .25s both}