/* Weltwohnzimmer Ländervergleich (aus template.html, site_build.py) */
#wwv{font-size:16px;line-height:1.5}
#wwv p{padding-bottom:0}
#wwv table{border:0;margin:0;width:auto}
#wwv tr td,#wwv tr th,#wwv thead th{border-top:0;color:inherit}
#wwv h1,#wwv h2,#wwv h3,#wwv h4{padding-bottom:0;color:inherit}
#wwv button,#wwv select{font-family:inherit}
#wwv{--bg:#FBF6EC; --card:#FFFDF8; --ink:#2B1E1A; --ink2:#4A352E; --muted:#746358; --line:#E7DAC4; --line2:#F1E7D6;
  --accent:#FFAA46; --rust:#9C5516; --cream:#F3E6CF;
  --good:#2B7045; --good-bg:#E3F1E6; --bad:#B23A2A; --bad-bg:#F8E1DC;
  --chip:#F3E6CF; --chip-on:#2B1E1A; --chip-on-fg:#FFFDF8;
  --shadow:0 1px 0 rgba(43,30,26,.06),0 8px 24px -12px rgba(43,30,26,.18);
  --display:'Bebas Neue','Oswald',Impact,'Arial Narrow',sans-serif;
  --label:'Oswald','Arial Narrow',Arial,sans-serif;
  --body:'Source Sans 3','Segoe UI',system-ui,-apple-system,sans-serif;}
#wwv,#wwv *{box-sizing:border-box}
#wwv [hidden]{display:none!important}
#wwv{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;margin:0}
#wwv .wrap{max-width:1120px;margin:0 auto;padding-block:28px 64px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
#wwv .kicker{font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--rust);font-weight:500}
#wwv h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,7vw,68px);line-height:.95;margin:6px 0 10px;letter-spacing:.01em;text-wrap:balance}
#wwv h1 span{color:var(--rust)}
#wwv .lead{max-width:62ch;color:var(--ink2);margin:0 0 22px;font-size:17px}
#wwv .meta{font-size:13px;color:var(--muted)}
#wwv .panel{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
#wwv .controls{padding:16px 18px;display:grid;gap:14px;margin-bottom:18px}
#wwv .row{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
#wwv .lbl{font-family:var(--label);text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--muted);min-width:92px}
#wwv .chips{display:flex;flex-wrap:wrap;gap:8px}
#wwv .chip{appearance:none;border:1px solid var(--line);background:var(--chip);color:var(--ink);border-radius:999px;padding:7px 14px 7px 8px;font:600 15px var(--body);display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:transform .08s}
#wwv .chip:active{transform:scale(.97)}
#wwv .chip .iso{font:500 11px var(--label);letter-spacing:.06em;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:1px 5px;color:var(--ink2)}
#wwv .chip[aria-pressed="true"]{background:var(--chip-on);color:var(--chip-on-fg);border-color:var(--chip-on)}
#wwv .chip[aria-pressed="true"] .iso{background:transparent;color:inherit;border-color:currentColor}
#wwv .chip[disabled]{opacity:.45;cursor:not-allowed}
#wwv .chip .x{font-size:12px;opacity:.75;margin-left:2px}
#wwv .chip.add{background:transparent;border-style:dashed;border-color:var(--rust);color:var(--rust);padding:7px 14px}
#wwv .chip.add[aria-expanded="true"]{background:var(--cream)}
#wwv .picker{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}
#wwv .plist{border:1px solid var(--line);border-radius:12px;background:var(--bg);padding:12px;display:grid;gap:10px;min-width:0}
#wwv .plist .ptop{display:flex;gap:8px;align-items:center}
#wwv .plist input{flex:1;min-width:0;font:16px var(--body);padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
#wwv .plist input:focus{outline:2px solid var(--accent);outline-offset:1px}
#wwv .phint{font-size:13px;color:var(--muted);margin:0}
#wwv .pgroups{max-height:340px;overflow:auto;display:grid;gap:14px;padding-right:4px;overscroll-behavior:contain}
#wwv .pgroup h3{margin:0 0 6px;font-family:var(--label)!important;font-weight:500!important;font-size:12px!important;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
#wwv .vh{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
#wwv .pitems{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px}
#wwv .pitem{appearance:none;text-align:left;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:7px 10px;font:600 15px var(--body);display:flex;align-items:center;gap:8px;cursor:pointer;min-width:0}
#wwv .pitem .iso{font:500 11px var(--label);letter-spacing:.06em;border:1px solid var(--line);border-radius:6px;padding:1px 5px;color:var(--ink2);flex:none}
#wwv .pitem .cap{font-weight:400;font-size:12px;color:var(--muted);margin-left:auto;white-space:nowrap;padding-left:6px}
#wwv .pitem .kzdot{width:7px;height:7px;border-radius:50%;background:var(--good);flex:none}
#wwv .pitem[aria-pressed="true"]{background:var(--chip-on);color:var(--chip-on-fg);border-color:var(--chip-on)}
#wwv .pitem[aria-pressed="true"] .iso,#wwv .pitem[aria-pressed="true"] .cap{color:inherit;border-color:currentColor}
#wwv .pitem.soon{opacity:.6;cursor:default;font-weight:400;background:transparent;border-style:dashed}
#wwv .pitem[disabled]:not(.soon){opacity:.45;cursor:not-allowed}
#wwv .jump{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px}
#wwv .jump button{appearance:none;border:0;background:none;padding:0;color:var(--rust);font:600 14px var(--body);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
#wwv #exportbox,#wwv #kzbox,#wwv #teilen{scroll-margin-top:90px}
#wwv .seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--chip)}
#wwv .seg button{appearance:none;border:0;background:transparent;color:var(--ink);padding:7px 12px;font:600 14px var(--body);cursor:pointer}
#wwv .seg button[aria-pressed="true"]{background:var(--chip-on);color:var(--chip-on-fg)}
#wwv select{font:600 14px var(--body);padding:7px 10px;border-radius:10px;border:1px solid var(--line);background:var(--chip);color:var(--ink);max-width:100%}
#wwv .hint{font-size:13px;color:var(--muted)}
#wwv .summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:6px}
#wwv .sumnote{font-size:13px;color:var(--muted);margin:0 0 18px}
#wwv .card{padding:14px 16px;min-width:0}
#wwv .card h3{margin:0 0 2px;font:600 18px var(--body);display:flex;align-items:center;gap:8px}
#wwv .card .iso{font:500 11px var(--label);letter-spacing:.06em;border:1px solid var(--line);border-radius:6px;padding:1px 5px;color:var(--muted)}
#wwv .stat{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 8px;margin-top:8px;border-top:1px dashed var(--line);padding-top:8px}
#wwv .stat .k{font-size:13px;color:var(--muted)}
#wwv .stat .v{font-family:var(--display);font-size:30px;line-height:1;letter-spacing:.02em}
#wwv .stat .v small{font-family:var(--body);font-size:12px;color:var(--muted);margin-left:2px}
#wwv .badge{display:inline-block;font:500 11px var(--label);letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:999px}
#wwv .badge.good{background:var(--good-bg);color:var(--good)}
#wwv .badge.bad{background:var(--bad-bg);color:var(--bad)}
#wwv .verdict{padding:14px 18px;margin-bottom:18px;font-size:16px;color:var(--ink2);border-left:4px solid var(--accent)}
#wwv .verdict b{color:var(--ink)}
#wwv .tablecard{overflow:hidden}
#wwv .tablehead{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
#wwv .tablehead h2{margin:0;font-family:var(--display);font-weight:400;font-size:28px;letter-spacing:.02em}
#wwv .scroll{overflow:auto;max-height:min(80vh,880px);-webkit-overflow-scrolling:touch}
#wwv table{border-collapse:separate;border-spacing:0;width:100%;min-width:560px}
#wwv th,#wwv td{padding:10px 12px;text-align:right;border-bottom:1px solid var(--line2);vertical-align:middle}
#wwv thead th{font-family:var(--label);font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:13px;color:var(--ink2);background:var(--card);position:sticky;top:0;z-index:2;box-shadow:inset 0 -2px 0 var(--line)}
#wwv th.item,#wwv td.item{text-align:left;position:sticky;left:0;background:var(--card);z-index:1;min-width:170px;max-width:240px}
#wwv thead th.item{z-index:3}
#wwv .xbrand,#wwv .xsrc{display:none}
#wwv .exporting .xbrand{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;padding:16px 18px 4px}
#wwv .exporting .xsrc{display:block;padding:12px 18px 16px;font-size:13px;color:var(--ink2);border-top:2px solid var(--accent)}
#wwv .xbrand .xk{font:500 13px var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--rust)}
#wwv .xbrand .xs{font-family:var(--display);font-size:30px;line-height:1;letter-spacing:.02em}
#wwv .xsrc b{color:var(--ink)}
#wwv .sharetext{white-space:pre-line;font-size:14px;color:var(--ink2);background:var(--bg);border:1px dashed var(--line);border-radius:10px;padding:10px 12px;overflow-wrap:anywhere}
#wwv .scard{position:absolute;left:-10000px;top:0;width:540px;height:675px;background:#2B1E1A;color:#FBF6EC;padding:34px 34px 26px;display:flex;flex-direction:column;gap:12px;font-family:var(--body);box-sizing:border-box;overflow:hidden}
#wwv .scard .k{font:500 13px var(--label);letter-spacing:.16em;text-transform:uppercase;color:#FFAA46}
#wwv .scard .t{font-family:var(--display);font-size:66px;line-height:.9;letter-spacing:.01em;color:#FBF6EC}
#wwv .scard .t span{color:#FFAA46}
#wwv .scard .s{font-size:15px;line-height:1.4;color:#E2D3BD}
#wwv .scard table{min-width:0;width:100%}
#wwv .scard th{position:static;background:transparent;box-shadow:none;font:500 11px var(--label);letter-spacing:.1em;text-transform:uppercase;color:#B9A796;padding:6px 4px;border-bottom:1px solid #4A352E;text-align:right;line-height:1.25}
#wwv .scard th:first-child{text-align:left}
#wwv .scard td{padding:8px 4px;border-bottom:1px solid #3A2A24;text-align:right;font-family:var(--display);font-size:32px;line-height:1;color:#FBF6EC;position:static;background:transparent}
#wwv .scard td.n{text-align:left;font:600 18px var(--body);color:#FBF6EC}
#wwv .scard td.hi{color:#FFAA46}
#wwv .scard .v{font-size:14px;line-height:1.4;color:#E2D3BD;margin-top:2px}
#wwv .scard .v b{color:#FFAA46}
#wwv .scard .f{margin-top:auto;border-top:2px solid #FFAA46;padding-top:10px;display:grid;gap:3px}
#wwv .scard .f .u{font-family:var(--display);font-size:28px;line-height:1;color:#FFAA46;letter-spacing:.02em}
#wwv .scard .f .m{font-size:12px;color:#B9A796}
#wwv td.item .name{font-weight:600}
#wwv td.item .unit{display:block;font-size:12px;color:var(--muted);line-height:1.3}
#wwv td.item .warn{display:inline-block;margin-left:4px;color:var(--rust);cursor:help;font-size:13px}
#wwv tr.group td{background:var(--cream);font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--ink2);text-align:left;padding:7px 12px;position:static}
#wwv tr.group td.item{background:var(--cream)}
#wwv td.val{cursor:pointer;font-variant-numeric:tabular-nums;white-space:nowrap;transition:background .1s}
#wwv td.val:hover{background:var(--line2)}
#wwv td.val .n{font-weight:600}
#wwv td.val .d{display:block;font-size:12px;color:var(--muted);font-weight:400}
#wwv td.val.low .n{text-decoration:underline dotted var(--muted);text-underline-offset:3px}
#wwv td.val.best{background:var(--good-bg)}
#wwv td.val.best .n{color:var(--good)}
#wwv td.val.worst{background:var(--bad-bg)}
#wwv td.val.worst .n{color:var(--bad)}
#wwv td.val .arr{font-size:11px;margin-right:4px}
#wwv td.val.na{color:var(--muted);font-style:italic;cursor:default}
#wwv tr.ref td.item .name::after{content:" · Bezug";font-weight:400;color:var(--rust);font-size:12px}
#wwv .legend{display:flex;flex-wrap:wrap;gap:6px 16px;padding:12px 18px;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
#wwv .legend i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:5px}
#wwv .actions{display:flex;flex-wrap:wrap;gap:8px}
#wwv .btn{appearance:none;border:1px solid var(--line);background:var(--chip);color:var(--ink);border-radius:10px;padding:8px 12px;font:600 14px var(--body);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
#wwv .btn:hover{border-color:var(--rust)}
#wwv .btn.primary{background:var(--accent);border-color:var(--accent);color:#2B1E1A}
#wwv .share{padding:16px 18px;margin-top:18px;display:grid;gap:12px}
#wwv .saved{display:flex;flex-wrap:wrap;gap:8px}
#wwv .saved .btn{font-weight:500}
#wwv .toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:600;opacity:0;pointer-events:none;transition:.2s;z-index:50;max-width:calc(100% - 32px)}
#wwv .toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#wwv .pop{visibility:hidden;position:fixed;inset:auto 0 0 0;margin:0 auto;max-width:560px;background:var(--card);border:1px solid var(--line);border-radius:16px 16px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.25);padding:18px 20px calc(20px + env(safe-area-inset-bottom,0px));z-index:40;transform:translateY(105%);transition:transform .2s}
#wwv .pop.on{transform:translateY(0);visibility:visible}
#wwv .pop h4{margin:0 0 4px;font:600 18px var(--body)}
#wwv .pop .big{font-family:var(--display);font-size:40px;line-height:1;margin:6px 0}
#wwv .pop dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:10px 0 0;font-size:14px}
#wwv .pop dt{color:var(--muted)}
#wwv .pop dd{margin:0;min-width:0;overflow-wrap:anywhere}
#wwv .pop a{color:var(--rust)}
#wwv .pop .x{position:absolute;right:12px;top:10px}
#wwv .foot{margin-top:22px;font-size:13px;color:var(--muted);max-width:75ch}
#wwv .foot p{margin:6px 0}
#wwv .foot a{text-decoration:underline;text-underline-offset:2px}
#wwv .kzsec{margin-top:18px}
#wwv .kzsec .tablehead p{margin:0;font-size:13px;color:var(--muted);max-width:60ch}
#wwv #kztbl{min-width:0}
@media (max-width:560px){#wwv #kztbl th.item,#wwv #kztbl td.item{width:44%;min-width:0}}
#wwv .kzwait{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 18px;background:var(--cream);border-bottom:1px solid var(--line);font-size:14px;color:var(--ink2)}
#wwv td.val .ort{display:block;font-size:12px;color:var(--muted);font-weight:400;white-space:normal;max-width:16ch;margin-left:auto;line-height:1.3}
#wwv td.val .nl{font-weight:600;color:var(--good)}
#wwv .exporting .scroll{overflow:visible;max-height:none}
#wwv .exporting [data-dl]{display:none!important}
#wwv tr.group td span{position:sticky;left:12px}
#wwv .exporting th.item,#wwv .exporting td.item,#wwv .exporting thead th{position:static}
@media (max-width:560px){#wwv .pitems{grid-template-columns:1fr}
#wwv .pgroups{max-height:300px}
#wwv .lbl{min-width:0;width:100%}
#wwv .tablehead h2{font-size:24px}
#wwv th.item,#wwv td.item{min-width:124px;max-width:150px;font-size:14px}
#wwv th,#wwv td{padding:9px 8px}
#wwv .card{padding:12px}
#wwv .stat .v{font-size:26px}
#wwv .stat .k{font-size:12px}
#wwv .card h3{font-size:16px}}
#wwv .wrap{max-width:none;padding:0}
#wwv .tablehead h2{font-family:var(--display)!important;font-weight:400!important;line-height:1.1}
#wwv .card h3,#wwv .pop h4{font-family:var(--body)!important;font-weight:600!important;letter-spacing:0;line-height:1.3}
#wwv .pop{z-index:100000}
#wwv .toast{z-index:100001}
#wwv a.btn{text-decoration:none}
