:root{
--ep11-accent:#2f6f57;
--ep11-accent-dark:#245743;
--ep11-soft:#f3f8f5;
--ep11-soft-2:#eef5f1;
--ep11-border:#dce6e0;
--ep11-text:#2e3833;
--ep11-muted:#68736d;
--ep11-warning:#fff7df;
--ep11-danger:#fff1ef;
--ep11-radius:10px;
}
.ep9-app,.ep9-app *{box-sizing:border-box}
.ep9-app{
width:100%;
color:inherit;
font:inherit;
line-height:1.65;
}
.ep9-shell{width:100%;max-width:none;margin:0;padding:0}
.ep11-lead{
margin:0 0 18px;
max-width:850px;
color:inherit;
font-size:1.08em;
}
.ep11-benefits{
display:flex;flex-wrap:wrap;gap:8px 18px;
margin:0 0 26px;
color:var(--ep11-muted);
font-size:.92em;
}
.ep11-benefits span::before{
content:"✓";
margin-right:6px;
color:var(--ep11-accent);
font-weight:800;
} .ep9-hero{
margin:0 0 28px;
padding:22px;
border:1px solid var(--ep11-border);
border-radius:var(--ep11-radius);
background:var(--ep11-soft);
box-shadow:none;
}
.ep11-tool-heading{
margin:0 0 4px!important;
color:inherit!important;
font:inherit;
font-size:1.45em!important;
font-weight:700!important;
}
.ep11-tool-copy{margin:0 0 16px;color:var(--ep11-muted)}
.ep9-kicker,.ep9-hero>h1{display:none} .ep9-mode-switch{
display:flex;
gap:0;
max-width:520px;
margin:0 0 18px;
padding:0;
border:1px solid var(--ep11-border);
border-radius:8px;
background:#fff;
overflow:hidden;
}
.ep9-mode-switch button{
flex:1;
border:0;
border-radius:0;
padding:10px 12px;
background:#fff;
color:var(--ep11-accent-dark);
font:inherit;
font-size:.92em;
font-weight:700;
cursor:pointer;
}
.ep9-mode-switch button+button{border-left:1px solid var(--ep11-border)}
.ep9-mode-switch button.is-active{
background:var(--ep11-accent);
color:#fff;
box-shadow:none;
}
.ep9-pane{margin-top:0}
.ep9-pane[hidden]{display:none!important} .ep9-search-wrap{position:relative;max-width:760px}
.ep9-search{
display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;
padding:6px 7px 6px 13px;
border:1px solid #cbd9d1;
border-radius:8px;
background:#fff;
box-shadow:none;
}
.ep9-search:focus-within{border-color:var(--ep11-accent)}
.ep9-search>span{font-size:1.2em;color:var(--ep11-accent)}
.ep9-search input{
min-width:0;width:100%;border:0;outline:0;padding:8px 0;background:transparent;
color:inherit;font:inherit;font-size:.96em
}
.ep9-search button{
border:0;border-radius:6px;padding:8px 10px;background:var(--ep11-soft-2);
color:var(--ep11-accent-dark);font:inherit;font-size:.85em;font-weight:700;cursor:pointer
}
.ep9-suggest{
position:absolute;z-index:40;display:none;top:calc(100% + 6px);left:0;right:0;
max-height:430px;overflow:auto;padding:5px;border:1px solid var(--ep11-border);
border-radius:8px;background:#fff;box-shadow:0 8px 24px rgba(25,45,35,.12)
}
.ep9-suggest.is-open{display:block}
.ep9-suggest button{
display:grid;grid-template-columns:58px 1fr auto;gap:9px;align-items:center;width:100%;
padding:7px;border:0;border-radius:6px;background:#fff;text-align:left;cursor:pointer;color:inherit
}
.ep9-suggest button:hover{background:var(--ep11-soft)}
.ep9-suggest img{display:block;width:58px;height:42px;border-radius:5px;object-fit:cover;background:var(--ep11-soft-2)}
.ep9-suggest strong,.ep9-suggest small{display:block}
.ep9-suggest strong{color:inherit}
.ep9-suggest small{color:var(--ep11-muted);font-size:.76em}
.ep9-popular{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ep9-popular button{
border:1px solid var(--ep11-border);border-radius:999px;padding:5px 9px;background:#fff;
color:var(--ep11-accent-dark);font:inherit;font-size:.8em;font-weight:650;cursor:pointer
} .ep9-guide{display:grid;gap:14px}
.ep9-guide-intro{display:flex;justify-content:space-between;gap:12px;align-items:center}
.ep9-guide-intro strong{color:inherit}
.ep9-link-button{
border:0;background:transparent;color:var(--ep11-accent);font:inherit;font-size:.82em;
font-weight:650;text-decoration:underline;cursor:pointer
}
.ep9-category-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.ep9-area{
overflow:hidden;padding:0;border:1px solid var(--ep11-border);border-radius:8px;background:#fff;
color:inherit;text-align:left;cursor:pointer;transition:border-color .15s ease,background .15s ease
}
.ep9-area:hover{border-color:#b9cec2;background:#fbfdfc;transform:none;box-shadow:none}
.ep9-area.is-active{outline:2px solid var(--ep11-accent);outline-offset:0;border-color:var(--ep11-accent)}
.ep9-area img{display:block;width:100%;height:68px;object-fit:cover;background:var(--ep11-soft-2)}
.ep9-area span{display:block;padding:8px 9px}
.ep9-area strong{display:block;color:inherit;font-size:.8em;line-height:1.25}
.ep9-area small{display:none}
.ep9-step-panel{
display:grid;gap:11px;padding:15px;border:1px solid var(--ep11-border);
border-radius:8px;background:#fff
}
.ep9-progress{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.ep9-progress span{
display:grid;place-items:center;width:24px;height:24px;border-radius:999px;background:#e8eeea;
color:#748078;font-size:.72em;font-weight:800
}
.ep9-progress span.is-done,.ep9-progress span.is-current{background:var(--ep11-accent);color:#fff}
.ep9-progress i{height:1px;flex:1;background:#dce5df}
.ep9-step{display:grid;gap:5px}
.ep9-step[hidden]{display:none!important}
.ep9-step label{color:inherit;font-size:.87em;font-weight:700}
.ep9-step select{
width:100%;padding:10px 11px;border:1px solid #cbd9d1;border-radius:7px;background:#fff;
color:inherit;font:inherit;font-size:.94em
}
.ep9-selection{display:flex;flex-wrap:wrap;gap:5px}
.ep9-selection span{
padding:4px 7px;border-radius:999px;background:var(--ep11-soft-2);color:var(--ep11-accent-dark);
font-size:.72em;font-weight:650
}
.ep9-show{
width:100%;border:0;border-radius:7px;padding:11px 14px;background:var(--ep11-accent);
color:#fff;font:inherit;font-weight:750;cursor:pointer;box-shadow:none
}
.ep9-show:hover:not(:disabled){background:var(--ep11-accent-dark)}
.ep9-show:disabled{background:#c8d3cd;cursor:not-allowed}
.ep9-match-note{margin:0;color:var(--ep11-muted);font-size:.82em} .ep9-results{display:none;margin:30px 0 0;scroll-margin-top:20px}
.ep9-results.is-open{display:block}
.ep9-result-head{display:flex;justify-content:space-between;gap:14px;align-items:end;margin-bottom:10px}
.ep9-result-head h2{margin:0!important;color:inherit!important;font-size:1.45em!important}
.ep9-result-head p{margin:3px 0 0;color:var(--ep11-muted);font-size:.9em}
.ep9-result-actions{display:flex;gap:6px;flex-wrap:wrap}
.ep9-secondary{
border:1px solid var(--ep11-border);border-radius:7px;padding:7px 9px;background:#fff;
color:var(--ep11-accent-dark);font:inherit;font-size:.8em;font-weight:650;cursor:pointer
}
.ep9-result-info{margin:9px 0;color:var(--ep11-muted);font-size:.82em}
.ep9-path{display:flex;flex-wrap:wrap;gap:5px}
.ep9-path span{padding:4px 7px;border-radius:999px;background:var(--ep11-soft);color:var(--ep11-accent-dark);font-weight:650}
.ep9-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ep9-card-wrap{position:relative}
.ep9-card{
display:grid;grid-template-columns:132px minmax(0,1fr);width:100%;height:100%;overflow:hidden;padding:0;
border:1px solid var(--ep11-border);border-radius:8px;background:#fff;color:inherit;text-align:left;
cursor:pointer;box-shadow:none;transition:border-color .15s ease,background .15s ease
}
.ep9-card:hover{border-color:#b6cbbf;background:#fcfdfc;transform:none;box-shadow:none}
.ep9-card-media{position:relative;overflow:hidden;height:100%;min-height:132px;background:var(--ep11-soft-2)}
.ep9-card-media img{display:block;width:100%;height:100%;object-fit:cover}
.ep9-card-media span{display:none}
.ep9-card-body{padding:11px 12px}
.ep9-badges{display:flex;flex-wrap:wrap;gap:4px}
.ep9-badge{padding:3px 6px;border-radius:999px;font-size:.62em;font-weight:750;background:#eef3f0;color:var(--ep11-accent-dark)}
.ep9-badge--sofort{background:#fff2cf;color:#725300}
.ep9-badge--hoch,.ep9-badge--stop{background:#fff0ee;color:#973a35}
.ep9-badge--caution{background:#fff5dd;color:#725800}
.ep9-card h3{margin:7px 0 5px!important;color:inherit!important;font-size:.98em!important;line-height:1.3}
.ep9-card p{
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
margin:0;color:var(--ep11-muted);font-size:.82em
}
.ep9-card-foot{display:flex;justify-content:space-between;gap:7px;margin-top:8px;color:var(--ep11-accent);font-size:.72em}
.ep9-fav{
position:absolute;z-index:2;right:7px;top:7px;width:32px;height:32px;border:1px solid var(--ep11-border);
border-radius:999px;background:rgba(255,255,255,.96);box-shadow:none;color:#6f7b75;font-size:1em;cursor:pointer
}
.ep9-fav.is-active{color:#b24842}
.ep9-empty,.ep9-loading{
grid-column:1/-1;padding:26px;text-align:center;border:1px dashed #cbd8d1;border-radius:8px;
background:var(--ep11-soft);color:var(--ep11-muted)
}
.ep9-load{
display:block;margin:18px auto 0;border:1px solid var(--ep11-accent);border-radius:7px;padding:8px 12px;
background:#fff;color:var(--ep11-accent);font:inherit;font-size:.86em;font-weight:700;cursor:pointer
} .ep9-overlay{
position:fixed;z-index:999999;display:none;inset:0;padding:18px;overflow:auto;
background:rgba(22,30,26,.64)
}
.ep9-overlay.is-open{display:flex;align-items:flex-start;justify-content:center}
.ep9-panel{
position:relative;width:min(820px,100%);margin:auto;overflow:hidden;border-radius:10px;background:#fff;
box-shadow:0 20px 55px rgba(0,0,0,.25)
}
.ep9-close{
position:sticky;z-index:5;top:8px;float:right;margin:8px;width:40px;height:40px;border:1px solid var(--ep11-border);
border-radius:999px;background:#fff;box-shadow:none;font-size:1.2em;cursor:pointer
}
.ep9-detail{padding:24px}
.ep9-detail-image{
display:block;width:100%;height:auto;max-height:340px;object-fit:cover;border-radius:8px;
background:var(--ep11-soft-2);margin-bottom:14px
}
.ep9-detail h2{margin:8px 0 6px!important;color:inherit!important;font-size:1.75em!important;line-height:1.2}
.ep9-detail .lead{color:var(--ep11-muted)}
.ep9-meta{display:flex;flex-wrap:wrap;gap:5px}
.ep9-meta span{padding:4px 7px;border-radius:999px;background:var(--ep11-soft);color:var(--ep11-accent-dark);font-size:.72em}
.ep9-detail section{margin-top:22px}
.ep9-detail h3{margin:0 0 7px!important;color:inherit!important;font-size:1.15em!important}
.ep9-detail li{margin:5px 0}
.ep9-box{margin-top:14px;padding:13px;border-radius:7px}
.ep9-box--safety{background:#f5f3ec;border-left:4px solid #796f55}
.ep9-box--quick{background:var(--ep11-warning);border-left:4px solid #d9ae3d}
.ep9-box--risk{background:var(--ep11-soft);border-left:4px solid var(--ep11-accent)}
.ep9-box--stop{background:var(--ep11-danger);border-left:4px solid #a9403b}
.ep9-box p{margin:4px 0 0}
.ep9-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ep9-product{padding:13px;border:1px solid var(--ep11-border);border-radius:8px}
.ep9-product>span{font-size:.65em;font-weight:750;color:var(--ep11-accent)}
.ep9-product strong{display:block;margin-top:3px;color:inherit}
.ep9-product p,.ep9-product small{color:var(--ep11-muted);font-size:.8em}
.ep9-product a,.ep9-detail-link{
display:inline-flex;margin-top:5px;padding:8px 10px;border-radius:6px;text-decoration:none;
background:var(--ep11-accent);color:#fff!important;font-weight:700
}
.ep9-product a:hover,.ep9-detail-link:hover{background:var(--ep11-accent-dark)}
.ep9-sources{padding:13px;border:1px solid var(--ep11-border);border-radius:8px;background:#fbfcfb}
.ep9-sources p{color:var(--ep11-muted);font-size:.82em}
.ep9-feedback{padding:13px;border-radius:8px;background:var(--ep11-soft)}
.ep9-feedback button{border:1px solid var(--ep11-border);border-radius:6px;background:#fff;padding:7px 10px;margin-right:5px;cursor:pointer}
.ep9-feedback button.is-active{background:var(--ep11-accent);color:#fff}
.ep9-similar{display:grid;gap:6px}
.ep9-similar button{border:1px solid var(--ep11-border);border-radius:6px;background:#fff;padding:8px;text-align:left;color:var(--ep11-accent);cursor:pointer}
.ep9-article-card{
padding:15px;border:1px solid #cbded3;border-radius:8px;background:var(--ep11-soft)
}
.ep9-article-card>span{
display:block;margin-bottom:4px;color:var(--ep11-accent);font-size:.7em;font-weight:750
}
.ep9-article-card h3{margin:2px 0 5px!important}
.ep9-article-card p{margin:0 0 8px;color:var(--ep11-muted);font-size:.86em}
.ep9-article-card .ep9-detail-link{margin-top:0} .ep11-seo-content{
margin-top:38px;
padding-top:6px;
}
.ep11-seo-content section{
margin:0 0 30px;
}
.ep11-seo-content h2{
margin:0 0 10px!important;
color:inherit!important;
font-size:1.55em!important;
}
.ep11-seo-content p{margin:0 0 12px}
.ep11-seo-content ul{margin-top:8px}
.ep11-topic-links{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px 22px;
padding:0;
margin:12px 0 0!important;
list-style:none;
}
.ep11-topic-links li{margin:0!important}
.ep11-topic-links a{
display:inline-block;
color:var(--ep11-accent)!important;
text-decoration:underline;
text-underline-offset:2px;
}
.ep11-note{
padding:13px 15px;
border-left:4px solid var(--ep11-accent);
background:var(--ep11-soft);
}
.ep11-noscript{
margin:15px 0;padding:12px;border:1px solid var(--ep11-border);background:#fff
}
@media(max-width:980px){
.ep9-category-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
.ep9-cards{grid-template-columns:1fr}
}
@media(max-width:680px){
.ep9-hero{padding:15px}
.ep11-benefits{display:grid;gap:5px}
.ep9-mode-switch{max-width:none;width:100%}
.ep9-category-strip{
display:flex;overflow:auto;gap:7px;padding:2px 2px 8px;scroll-snap-type:x proximity
}
.ep9-area{flex:0 0 132px;scroll-snap-align:start}
.ep9-area img{height:62px}
.ep9-result-head{align-items:flex-start;flex-direction:column}
.ep9-result-actions{width:100%}
.ep9-result-actions button{flex:1}
.ep9-card{grid-template-columns:100px minmax(0,1fr);min-height:106px}
.ep9-card-media{min-height:106px}
.ep9-card-body{padding:9px 10px}
.ep9-card h3{font-size:.92em!important}
.ep9-card p{font-size:.78em}
.ep9-overlay{padding:0}
.ep9-panel{min-height:100%;border-radius:0;margin:0}
.ep9-detail{padding:17px 12px 34px}
.ep9-products{grid-template-columns:1fr}
.ep11-topic-links{grid-template-columns:1fr}
}
@media(max-width:390px){
.ep9-mode-switch button{padding:9px 6px;font-size:.8em}
.ep9-search{grid-template-columns:auto 1fr}
.ep9-search button{grid-column:1/-1;width:100%}
}
@media(prefers-reduced-motion:reduce){
.ep9-area,.ep9-card{transition:none}
} .ep12-faq details{
margin:0 0 8px;
border:1px solid var(--ep11-border);
border-radius:8px;
background:#fff;
}
.ep12-faq summary{
padding:11px 13px;
color:inherit;
font-weight:700;
cursor:pointer;
}
.ep12-faq details[open] summary{
border-bottom:1px solid var(--ep11-border);
background:var(--ep11-soft);
}
.ep12-faq details p{
margin:0;
padding:12px 13px 14px;
color:var(--ep11-muted);
}
.ep12-commercial-label{
display:inline-flex;
margin-bottom:5px;
padding:3px 7px;
border-radius:999px;
background:#f3f0e8;
color:#6e6248;
font-size:.7em;
font-weight:750;
}
.ep12-haka-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin-top:15px;
}
.ep12-haka-card{
padding:14px;
border:1px solid var(--ep11-border);
border-radius:8px;
background:#fff;
}
.ep12-haka-card h3{
margin:0 0 5px!important;
color:inherit!important;
font-size:1.05em!important;
}
.ep12-haka-card p{
margin:0 0 7px;
color:inherit;
}
.ep12-haka-card small{
display:block;
min-height:2.8em;
color:var(--ep11-muted);
}
.ep12-haka-actions{
display:flex;
gap:7px;
flex-wrap:wrap;
margin-top:10px;
}
.ep12-haka-actions a{
color:var(--ep11-accent)!important;
font-size:.84em;
font-weight:700;
text-decoration:underline;
text-underline-offset:2px;
}
.ep12-partner-box{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin-top:13px;
padding:14px 15px;
border:1px solid #cbded3;
border-radius:8px;
background:var(--ep11-soft);
}
.ep12-partner-box strong{display:block}
.ep12-partner-box p{
margin:3px 0 0;
color:var(--ep11-muted);
font-size:.84em;
}
.ep12-partner-button{
display:inline-flex;
flex:0 0 auto;
padding:9px 11px;
border-radius:6px;
background:var(--ep11-accent);
color:#fff!important;
text-decoration:none!important;
font-weight:700;
white-space:nowrap;
}
.ep12-partner-button:hover{background:var(--ep11-accent-dark)}
@media(max-width:680px){
.ep12-haka-grid{grid-template-columns:1fr}
.ep12-haka-card small{min-height:0}
.ep12-partner-box{align-items:flex-start;flex-direction:column}
.ep12-partner-button{width:100%;justify-content:center}
} .ep9-product-intro{
margin:-2px 0 10px;
color:var(--ep11-muted);
font-size:.84em;
} .ep9-area img{
aspect-ratio:16/9;
object-position:center;
}