/* PAGE INTRO */
.intro{padding:52px 0 28px; border-bottom:1px solid var(--paper-line);}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--red); display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.eyebrow::before{content:''; width:22px; height:1px; background:var(--red);}
.intro h1{font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(32px,5vw,52px); letter-spacing:-0.01em; margin-bottom:12px;}
.intro p{font-size:15px; line-height:1.6; color:var(--steel-light); max-width:680px;}

/* FILTER BAR */
.filter-bar{position:sticky; top:68px; z-index:40; background:var(--paper-2); border-bottom:1px solid var(--paper-line); padding:20px 0; overflow-anchor:none;}
.filter-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr auto; gap:24px; align-items:start;}
.filter-group h4{font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--steel-light); margin-bottom:10px;}

.chip-row{display:flex; flex-wrap:wrap; gap:8px;}
.chip{font-family:var(--mono); font-size:12px; letter-spacing:0.02em; padding:6px 12px; border:1px solid var(--paper-line); background:var(--paper-2); color:var(--ink); transition:all .15s ease;}
.chip:hover{border-color:var(--red);}
.chip.active{background:var(--ink); border-color:var(--ink); color:var(--paper);}

.type-row{display:flex; gap:16px;}
.type-row label{display:flex; align-items:center; gap:7px; font-size:13px; cursor:pointer;}
.type-row input{accent-color:var(--red); width:15px; height:15px;}

.range-row{display:flex; align-items:center; gap:8px;}
.range-row input{width:64px; padding:7px 8px; border:1px solid var(--paper-line); font-family:var(--mono); font-size:13px; background:var(--paper-2);}
.range-row span{font-family:var(--mono); font-size:12px; color:var(--steel);}

select#sortSelect{width:100%; padding:8px 10px; border:1px solid var(--paper-line); font-family:var(--mono); font-size:12.5px; background:var(--paper-2); color:var(--ink);}
select#blendeSelect{width:100%; padding:8px 10px; border:1px solid var(--paper-line); font-family:var(--mono); font-size:12.5px; background:var(--paper-2); color:var(--ink);}
.outdated-toggle{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--steel-light); cursor:pointer;}
.outdated-toggle input{accent-color:var(--red); width:14px; height:14px;}
.badge-outdated{
  display:inline-block; margin-left:8px; font-family:var(--mono); font-size:9.5px;
  text-transform:uppercase; letter-spacing:0.04em; color:var(--steel-light);
  background:rgba(140,143,149,0.15); padding:2px 7px; vertical-align:middle;
}

.filter-right{display:flex; flex-direction:column; gap:14px; align-items:flex-end;}
.view-toggle{display:flex; border:1px solid var(--ink); overflow:hidden;}
.view-toggle button{padding:9px 16px; font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em; background:var(--paper-2); color:var(--ink); border:none; display:flex; align-items:center; gap:7px;}
.view-toggle button.active{background:var(--ink); color:var(--paper);}
.view-toggle button svg{width:14px; height:14px;}
.reset-btn{font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--steel-light); background:none; border:none; text-decoration:underline; text-underline-offset:3px;}
.reset-btn:hover{color:var(--red);}

.result-count{font-family:var(--mono); font-size:12.5px; color:var(--steel-light); padding:16px 0 4px;}
.result-count strong{color:var(--ink);}

/* VERTICAL VIEW: eine Zeile pro Objektiv */
#lensList.vertical{display:flex; flex-direction:column; gap:1px; background:var(--paper-line); border:1px solid var(--paper-line); margin-bottom:80px;}
.lens-row{display:flex; flex-direction:column; gap:0; background:var(--paper-2); padding:16px 20px;}
.lens-row .row-top{display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px;}
.lens-row .thumb{width:76px; height:76px; flex-shrink:0; background:var(--paper); display:flex; align-items:center; justify-content:center; border:1px solid var(--paper-line);}
.lens-row .thumb img{max-width:82%; max-height:82%; object-fit:contain;}
.lens-row .meta{flex:1 1 280px; min-width:280px;}
.lens-row .brand{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--red); margin-bottom:3px;}
.lens-row .name{font-family:var(--display); font-weight:600; font-size:19px; text-transform:uppercase; line-height:1.1;}

.basic-specs{display:flex; gap:26px; flex-shrink:0; margin-left:auto;}
.basic-specs .bspec{text-align:right; min-width:58px;}
.basic-specs .bspec .val{font-family:var(--mono); font-size:14px; color:var(--ink);}
.basic-specs .bspec .lbl{font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--steel); margin-top:2px;}
#lensList.info-voll .basic-specs{display:none;}

.all-specs{display:none; flex-wrap:wrap; gap:16px 30px; padding-top:14px; margin-top:14px; border-top:1px solid var(--paper-line); width:100%;}
#lensList.info-voll .all-specs{display:flex;}
.spec{text-align:left; min-width:64px;}
.spec .val{font-family:var(--mono); font-size:14px; color:var(--ink);}
.spec .lbl{font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--steel); margin-top:2px;}

.extra-specs{display:flex; flex-wrap:wrap; gap:22px; width:100%; margin-top:12px; padding-top:12px; border-top:1px dashed var(--paper-line);}
#lensList.info-kurz .extra-specs{display:none;}
.extra-specs .spec{text-align:left; min-width:auto;}
.badge-yesno{font-family:var(--mono); font-size:11px; padding:2px 8px; border-radius:2px;}
.badge-yesno.yes{background:rgba(169,130,79,0.18); color:var(--brass);}
.badge-yesno.no{background:rgba(140,143,149,0.15); color:var(--steel-light);}



/* HORIZONTAL VIEW: scrollbare Karten-Reihe, wie das bisherige Layout */
#lensList.horizontal{display:flex; gap:14px; overflow-x:auto; padding-bottom:20px; margin-bottom:60px; scroll-snap-type:x proximity;}
#lensList.horizontal .lens-card{scroll-snap-align:start; flex:0 0 190px; background:var(--paper-2); border:1px solid var(--paper-line); padding:16px;}
.lens-card .thumb{width:100%; aspect-ratio:1; background:var(--paper); display:flex; align-items:center; justify-content:center; border:1px solid var(--paper-line); margin-bottom:12px;}
.lens-card .thumb img{max-width:78%; max-height:78%; object-fit:contain;}
.lens-card .brand{font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--red); margin-bottom:3px;}
.lens-card .name{font-family:var(--display); font-weight:600; font-size:15px; text-transform:uppercase; line-height:1.1; margin-bottom:12px; min-height:34px;}
.lens-card .specs-col{display:flex; flex-direction:column; gap:6px; border-top:1px solid var(--paper-line); padding-top:10px;}
.lens-card .specs-col .spec{display:flex; justify-content:space-between; text-align:left;}
.lens-card .specs-col .lbl{margin-top:0;}
.lens-card .extra-specs{flex-direction:column; border-top:1px dashed var(--paper-line); margin-top:10px; padding-top:10px; gap:6px;}
.lens-card .extra-specs .reviews-block{border-top:none; margin-top:4px; padding-top:0;}
.lens-card .extra-specs .spec{display:flex; justify-content:space-between; width:100%;}

.empty-state{padding:60px 20px; text-align:center; color:var(--steel-light); font-size:14px; background:var(--paper-2); border:1px solid var(--paper-line); margin-bottom:80px;}

/* REVIEWS (Text + YouTube), nur in der Vollständig-Ansicht, standardmäßig eingeklappt */
.reviews-block{width:100%; margin-top:12px; padding-top:12px; border-top:1px dashed var(--paper-line);}
#lensList.info-kurz .reviews-block{display:none;}
.reviews-toggle{
  display:flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer;
  font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--steel-light); padding:0;
}
.reviews-toggle:hover{color:var(--red);}
.reviews-toggle .arrow{display:inline-block; transition:transform .15s ease; font-size:10px;}
.reviews-block.open .reviews-toggle .arrow{transform:rotate(90deg);}
.reviews-panel{display:none; margin-top:12px; flex-wrap:wrap; gap:24px;}
.reviews-block.open .reviews-panel{display:flex;}
.reviews-group{flex:1 1 220px; min-width:200px;}
.reviews-group h5{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:0.05em; color:var(--steel); margin-bottom:8px;}
.reviews-group ul{list-style:none; display:flex; flex-direction:column; gap:6px;}
.reviews-group a{font-size:13px; color:var(--ink); text-decoration:none; display:flex; align-items:baseline; gap:6px;}
.reviews-group a:hover{color:var(--red); text-decoration:underline;}
.reviews-group a .src{color:var(--steel-light); font-size:11px; flex-shrink:0;}
.reviews-group.videos a::before{content:'▶'; font-size:9px; color:var(--red); flex-shrink:0;}
.reviews-group.text a::before{content:'✎'; font-size:11px; color:var(--steel-light); flex-shrink:0;}

/* Einklappbare Filterleiste: gesteuert per "compact"-Klasse auf .filter-bar
   (mobil per Default gesetzt, am Desktop/Tablet per Scroll-Richtung via JS) */
.filter-toggle-btn{display:none;}
.filter-bar.compact{padding:14px 0; transition:padding .15s ease;}
.filter-bar.compact .filter-toggle-btn{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  background:var(--paper-2); border:1px solid var(--paper-line); padding:12px 16px;
  font-family:var(--mono); font-size:12.5px; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--ink); cursor:pointer;
}
.filter-toggle-btn .chevron{transition:transform .2s ease; color:var(--steel-light);}
.filter-toggle-btn.open .chevron{transform:rotate(180deg);}
.filter-toggle-btn .count-badge{
  background:var(--red); color:#fff; font-family:var(--mono); font-size:10px;
  padding:1px 7px; margin-left:8px;
}
.filter-bar.compact .filter-panel{display:none; margin-top:14px;}
.filter-bar.compact .filter-panel.open{display:grid;}

@media (max-width:900px){
  .filter-grid{grid-template-columns:1fr 1fr; gap:20px;}
  .filter-right{grid-column:1/-1; align-items:flex-start; flex-direction:row; flex-wrap:wrap; gap:14px; justify-content:flex-start;}
}
@media (max-width:560px){
  .filter-grid{grid-template-columns:1fr;}
}