:root{
  --bg:#3B3E41; --bg-alt:#44474A; --ink:#EDECEA; --ink-soft:#ABADAE;
  --line:rgba(255,255,255,0.14); --gold:#C9A15A; --card:#45484B;
  /* Bildflaechen. Die dunklen Produktfotos sind auf genau diesen Ton
     gerendert (#404245), deshalb geht das Bild ohne Kante in die Flaeche
     ueber. Neue dunkle Fotos bitte auf denselben Grund stellen. */
  --imgbg:#404245;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:'Space Grotesk',sans-serif; font-weight:500;}
a{color:inherit; text-decoration:none;}
/* Keine Breitenbegrenzung: die Seite nutzt jeden Monitor komplett aus.
   Nur der Seitenrand wächst mit — von 32 px am Handy bis 96 px am 27-Zöller.
   Wieder begrenzen: max-width:1920px o. ä. hier ergänzen. */
.wrap{margin:0 auto; padding:0 clamp(32px, 5vw, 96px);}

header{position:-webkit-sticky; position:sticky; top:0; background:rgba(59,62,65,0.94); backdrop-filter:blur(6px); z-index:20; border-bottom:1px solid var(--gold);}
/* gap sorgt für Mindestabstand zwischen Logo und Navigation: nie weniger
   als 10 px, auf breiten Monitoren wächst er bis 72 px mit. */
header .wrap{display:flex; align-items:center; justify-content:space-between;
  gap:clamp(10px, 4vw, 72px); padding:20px clamp(32px, 5vw, 96px);}
.logo{display:flex; align-items:center; flex-shrink:0;}
/* Das Logo wird auf engen Leisten etwas kleiner, damit die Navigation
   in einer Zeile bleibt und nichts umbricht. */
.logo img{height:clamp(32px, 3.2vw, 44px); width:auto; display:block; filter:brightness(0) invert(1);}
nav{display:flex; gap:clamp(16px, 1.8vw, 30px); align-items:center; flex-wrap:nowrap;}
nav a{font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap;}
@media (hover:hover){nav a:hover, nav a.active{color:var(--gold);}}
.lang-toggle{display:flex; border:1px solid var(--line);}
.lang-select{appearance:none; -webkit-appearance:none; background:transparent url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2210%22 height=%227%22 viewBox=%220 0 10 7%22><path d=%22M1 1l4 4 4-4%22 fill=%22none%22 stroke=%22%23999%22 stroke-width=%221.4%22/></svg>') no-repeat right 10px center; border:1px solid var(--line); color:var(--ink); font-family:'Inter',sans-serif; font-size:11px; letter-spacing:0.1em; padding:7px 26px 7px 12px; cursor:pointer;}
.lang-select:focus{outline:none; border-color:var(--gold);}
.lang-select option{background:var(--card); color:var(--ink);}
.lang-toggle button{border:none; background:none; color:var(--ink-soft); font-family:'Inter',sans-serif; font-size:11px; letter-spacing:0.1em; padding:7px 12px; cursor:pointer;}
.lang-toggle button.active{background:var(--gold); color:#1A1300;}
.mobile-nav{display:none;}
/* Kontakt-Dropdown im Desktop-Header */
.contact-menu{position:relative;}
.contact-menu > a{font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); cursor:pointer;}
@media (hover:hover){.contact-menu > a:hover{color:var(--gold);}}
.contact-drop{position:absolute; top:calc(100% + 14px); right:0; min-width:250px; background:var(--card);
  border:1px solid var(--gold); display:none; flex-direction:column; z-index:30; box-shadow:0 12px 30px rgba(0,0,0,0.35);}
.contact-drop.open{display:flex;}
.contact-drop a{display:block; padding:13px 18px; font-size:13px; letter-spacing:0.02em; text-transform:none;
  color:var(--ink); border-bottom:1px solid var(--line); white-space:nowrap;}
.contact-drop a:last-child{border-bottom:none;}
@media (hover:hover){.contact-drop a:hover{background:var(--bg-alt); color:var(--gold);}}
/* Telefonzeile: Nummer zum Kopieren, kleiner Anruf-Link daneben */
.drop-phone{display:flex; align-items:center; gap:12px; padding:13px 18px; font-size:13px;
  color:var(--ink); border-bottom:1px solid var(--line); white-space:nowrap; cursor:copy;}
@media (hover:hover){.drop-phone:hover{background:var(--bg-alt);}}
.drop-phone .ph-num{flex:1;}
.drop-phone .ph-copy{font-size:14px; color:var(--ink-soft); opacity:0.5;}
@media (hover:hover){.drop-phone:hover .ph-copy{opacity:1; color:var(--gold);}}
.icon-btn{width:36px; height:36px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-soft); background:none; font-size:15px;}
@media (hover:hover){.icon-btn:hover{border-color:var(--gold); color:var(--gold);}}
/* Beide Symbole (Sonne/Mond und Lupe) gleich gross */
.icon-btn svg{width:19px; height:19px; display:block;}

.search-panel{margin:0 auto; padding:0 clamp(32px, 5vw, 96px); overflow:hidden; max-height:0; transition:max-height .35s ease;}
.search-panel.open{max-height:420px;}
.search-inner{padding:26px 0 34px; border-bottom:1px solid var(--line);}
.toggle{display:inline-flex; border:1px solid var(--line); padding:3px; margin-bottom:16px;}
.toggle button{border:none; background:none; font-family:'Inter',sans-serif; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; padding:9px 20px; cursor:pointer; color:var(--ink-soft);}
.toggle button.active{background:var(--gold); color:#1A1300;}
.search-row{display:flex; border-bottom:1px solid var(--gold);}
.search-row input{flex:1; padding:14px 0; border:none; background:transparent; font-family:'Space Grotesk',sans-serif; font-size:20px; color:var(--ink);}
.search-row input:focus{outline:none;}
.search-results{padding-top:14px; display:flex; flex-direction:column; gap:2px; max-height:230px; overflow-y:auto;}
.search-results a{padding:10px 12px; font-size:13.5px; color:var(--ink-soft); background:var(--card); display:flex; justify-content:space-between; gap:14px;}
@media (hover:hover){.search-results a:hover{color:var(--gold);}}
.search-results a span{font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); flex-shrink:0;}

/* Brotkrume bewusst etwas heller und eine Spur groesser als die uebrige
   Nebenschrift — sie war vorher kaum zu lesen. */
.breadcrumb{padding:14px 0; font-size:12.5px; color:var(--ink); border-bottom:1px solid var(--line);}
.breadcrumb a{color:var(--ink);}
/* Brotkrume: links die beiden Verlaufspfeile, dann der Pfad */
.breadcrumb .wrap{display:flex; align-items:center; gap:14px;}
.breadcrumb #bc{min-width:0; display:flex; align-items:baseline; white-space:nowrap;}
/* Jede Stufe ist ein eigenes Element, der Schraegstrich kommt aus CSS */
.bc-i{flex-shrink:0;}
.bc-i + .bc-i::before{content:'/'; margin:0 9px; opacity:0.4; color:var(--ink-soft);}
.bc-i.bc-cur{color:var(--gold); flex-shrink:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* Reicht der Platz nicht, verschwinden die vorderen Stufen und werden
   durch "…" ersetzt — die aktuelle Seite bleibt immer lesbar. */
@media(max-width:760px){
  .bc-i{display:none;}
  .bc-i:nth-last-child(-n+2){display:block;}
  .bc-i:nth-last-child(2)::before{content:'…'; margin:0 9px 0 0; opacity:0.55;}
  .bc-i + .bc-i::before{margin:0 7px;}
}
@media(max-width:420px){
  .bc-i:nth-last-child(-n+2){display:none;}
  .bc-i:last-child{display:block;}
  .bc-i:last-child::before{content:'…'; margin:0 8px 0 0; opacity:0.55;}
}
/* ---------------------------------------------------------------
   Vor/Zurueck-Pfeile. Sie sitzen in der klebenden Kopfzeile und sind
   damit beim Scrollen immer erreichbar:
     - am Desktop links vor PRODUTOS, zusammen mit der Lupe
     - am Handy als erste Felder der unteren Leiste, vor PRODUTOS
   --------------------------------------------------------------- */
.hist-nav{display:flex; align-items:center; gap:5px; flex-shrink:0;}
.hist-nav .hb{width:32px; height:32px; border:1px solid var(--line); background:none;
  color:var(--ink-soft); cursor:pointer; display:flex; align-items:center; justify-content:center;
  padding:0; transition:border-color .15s, color .15s;}
.hist-nav .hb svg{width:16px; height:16px; display:block;}
@media (hover:hover){.hist-nav .hb:hover{border-color:var(--gold); color:var(--gold);}}
.hist-nav .hb.off{opacity:0.32; pointer-events:none;}
@media(max-width:1024px){ .hist-desk{display:none;} }

/* Ab Tablet-Breite klebt die Brotkrume direkt unter der Kopfzeile —
   Pfad und Pfeile bleiben dadurch beim Scrollen immer erreichbar.
   --hh ist die gemessene Hoehe der Kopfzeile (siehe syncHeaderHeight
   in app.js); der Wert dahinter dient nur als Rueckfallebene. */
@media(min-width:1025px){
  .breadcrumb{position:-webkit-sticky; position:sticky; top:var(--hh, 84px); z-index:19;
    background:var(--bg);}
}

/* In der Handy-Leiste ohne eigenen Rahmen — die Trennstriche der
   Leiste uebernehmen das. */
.mobile-nav .hist-mob{gap:0; flex:0 0 auto;}
.mobile-nav .hist-mob .hb{border:none; border-right:1px solid var(--line);
  width:48px; height:auto; align-self:stretch; color:var(--gold);}
.mobile-nav .hist-mob .hb svg{width:19px; height:19px;}
.mobile-nav .hist-mob .hb:active{background:var(--card);}
@media (hover:hover){.breadcrumb a:hover{color:var(--gold);}}
.breadcrumb span{margin:0 8px; opacity:0.5;}

/* Der Hero ist so hoch, dass vom 16:9-Video moeglichst wenig abgeschnitten
   wird: 56,25 % der Fensterbreite waere das ganze Bild. Gedeckelt auf 72 %
   der Fensterhoehe, damit unter dem Hero noch etwas zu sehen ist, und mit
   420 px Mindesthoehe fuers Handy, wo ein Beschnitt unvermeidbar ist.
   Hoeher/niedriger: die 72vh anpassen. */
.hero{padding:clamp(56px, 5vw, 96px) 0; border-bottom:1px solid var(--line); position:relative;
  display:flex; align-items:center;
  min-height:max(420px, min(72vh, 56.25vw));
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:60px 60px;}
.hero > .wrap{width:100%;}
.hero .eyebrow{color:var(--gold); font-size:12px; letter-spacing:0.2em; text-transform:uppercase; margin-bottom:24px; display:block;}
.hero h1{font-size:52px; line-height:1.08; margin-bottom:24px; letter-spacing:-0.01em;}
.hero h1 em{font-style:normal; color:var(--gold);}
.hero p{color:var(--ink-soft); font-size:16px; line-height:1.7; max-width:520px; margin-bottom:36px;}

/* Schleier über dem Hero-Video, damit der Text lesbar bleibt */
.hero-veil{position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(59,62,65,0.82) 0%, rgba(59,62,65,0.45) 55%, rgba(59,62,65,0.12) 100%);}

/* Hero-Text über Video: heller und mit Schatten für gute Lesbarkeit */
.hero-content h1{color:#FFFFFF; text-shadow:0 2px 18px rgba(0,0,0,0.55);}
.hero-content h1 em{color:#E3B96B; text-shadow:0 2px 18px rgba(0,0,0,0.55);}
.hero-content p{color:#D2D3D2; font-weight:400; text-shadow:0 1px 12px rgba(0,0,0,0.75);}
.hero-content .eyebrow{color:#E3B96B; text-shadow:0 1px 10px rgba(0,0,0,0.6);}
.hero-content .btn-secondary{border-color:#FFFFFF; color:#FFFFFF; background:rgba(0,0,0,0.22);}
@media (hover:hover){.hero-content .btn-secondary:hover{background:rgba(0,0,0,0.4); border-color:var(--gold); color:var(--gold);}}
.cta-row{display:flex; gap:16px; flex-wrap:wrap;}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
.btn-primary{background:var(--gold); color:#1A1300; padding:15px 30px; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; font-weight:500; border:none; cursor:pointer; font-family:'Inter',sans-serif;}
.btn-primary svg{width:22px; height:22px; vertical-align:middle; margin-right:12px;}
.btn-primary svg + span{vertical-align:middle;}
.btn-secondary{border:1px solid var(--ink-soft); color:var(--ink); padding:15px 30px; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; align-items:center;}
@media (hover:hover){.btn-secondary:hover{border-color:var(--gold); color:var(--gold);}}
.btn-secondary svg{width:22px; height:22px; vertical-align:middle; margin-right:12px;}
.btn-secondary svg + span{vertical-align:middle;}

section{padding:76px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:42px;}
.section-head .tag{color:var(--gold); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; display:block; margin-bottom:10px;}
.section-head h2{font-size:28px;}
.section-head a{font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); border-bottom:1px solid var(--ink-soft);}
@media (hover:hover){.section-head a:hover{color:var(--gold); border-color:var(--gold);}}

.cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);}
.cat-card{background:var(--bg); padding:30px 26px; min-height:150px; display:flex; flex-direction:column; justify-content:space-between;}
@media (hover:hover){.cat-card:hover{background:var(--card);}}
@media (hover:hover){.cat-card:hover h3{color:var(--gold);}}
.cat-num{font-family:'Space Grotesk',sans-serif; font-size:13px; color:var(--gold);}
.cat-card h3{font-size:17px; margin-top:22px; line-height:1.35;}
.cat-card .count{font-size:11px; color:var(--ink-soft); margin-top:8px;}

.brand-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:18px;}
.brand-tile{display:flex; flex-direction:column; gap:10px;}
.brand-logo-box{aspect-ratio:1; background:#FFF; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; padding:10%; transition:border-color .15s; position:relative; overflow:hidden;}
.brand-logo-box img{width:100%; height:100%; object-fit:contain;}
.brand-logo-img{transition:opacity .3s ease;}
.brand-hover{position:absolute; inset:0; opacity:0; transition:opacity .3s ease; background:#FFF; display:flex; align-items:center; justify-content:center;}
.brand-hover img{width:100%; height:100%; object-fit:cover;}
.brand-hover .ph{position:absolute; inset:0; background:repeating-linear-gradient(135deg,#E7EAE8 0 2px, transparent 2px 16px), #F3F4F4;}
.brand-hover .ph span{display:none;}
@media (hover:hover){.brand-tile:hover .brand-hover{opacity:1;}}
@media (hover:hover){.brand-tile:hover .brand-logo-img{opacity:0;}}
.brand-logo-empty{font-family:'Space Grotesk',sans-serif; font-size:34px; color:#3B3E41; font-weight:600;}
@media (hover:hover){.brand-tile:hover .brand-logo-box{border-color:var(--gold);}}
.brand-tile-name{font-family:'Space Grotesk',sans-serif; font-size:13px; color:#FFFFFF; font-weight:500; text-align:center; letter-spacing:0.04em;}
@media (hover:hover){.brand-tile:hover .brand-tile-name{color:var(--gold);}}

.product-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.p-card{background:var(--card); border:1px solid var(--line); display:flex; flex-direction:column;}
@media (hover:hover){.p-card:hover{border-color:var(--gold);}}
/* Alle Bildflaechen sind quadratisch — genau wie die Bilddateien.
   Ein abweichendes Seitenverhaeltnis laesst bei 'contain' Streifen
   stehen; bei den Freistellern faellt das nicht auf (gleicher Grund),
   bei einem Milieufoto dagegen sofort. */
.p-img{aspect-ratio:1; background:var(--imgbg); overflow:hidden; position:relative;}
.p-img img{width:100%; height:100%; object-fit:contain; padding:12px;}
.p-img .ph{position:absolute; inset:0; background:repeating-linear-gradient(135deg,#4C4F52 0 2px, transparent 2px 22px), #424548; display:flex; align-items:flex-end; padding:12px;}
.p-img .ph span{font-size:9px; letter-spacing:0.05em; color:var(--ink-soft); word-break:break-all;}
.p-body{padding:18px 18px 22px; flex:1;}
.desc a, .pf-desc a{color:var(--gold); border-bottom:1px solid rgba(201,161,90,0.45);}
@media (hover:hover){.desc a:hover, .pf-desc a:hover{border-bottom-color:var(--gold);}}
.p-verweis{margin-top:18px; font-size:13.5px;}
.p-verweis a{color:var(--gold); border-bottom:1px solid transparent;}
@media (hover:hover){.p-verweis a:hover{border-bottom-color:var(--gold);}}
.p-brand{font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; display:block;}
.p-body h3{font-size:16px; line-height:1.35;}
.p-body .group{font-size:11.5px; color:var(--ink-soft); margin-top:6px;}

.group-title{font-size:13.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); margin:0 0 14px; padding:0;}
.grp-anchor{margin-top:52px;}
.grp-anchor:first-child{margin-top:0;}
.v3-group .group-title{margin-top:44px;}
.v3-group:first-child .group-title{margin-top:0;}
/* Auf der Markenseite stehen die Kategorietitel ohne Gruppenrahmen
   direkt im Inhalt — auch dort braucht der naechste Block Luft zur
   Zeile darueber. */
#content > .group-title{margin-top:52px;}
#content > .group-title:first-child{margin-top:0;}
/* Bauarten-Zeilen: zwischen einer Produktzeile und dem naechsten
   goldenen Titel derselbe Abstand wie zwischen Gruppen. */
.p-row + .group-title{margin-top:44px;}
/* Titel der Bauarten (Veda-portas, Portas deslizantes …): mehr Luft zur Zeile darunter. */
.group-title.var-title{margin-bottom:26px;}
.p-row + .group-title.var-title{margin-top:56px;}

.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.g-item{aspect-ratio:1; background:var(--imgbg); overflow:hidden; cursor:zoom-in; position:relative;}
.g-item img{width:100%; height:100%; object-fit:cover;}
@media (hover:hover){.g-item:hover{border-color:var(--gold);}}

.product-main{padding-top:54px; padding-bottom:20px; display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px;}
/* Ohne Rahmenlinie: das Bild traegt seinen eigenen Grund, eine Kante
   drumherum wuerde ihn nur einrahmen. Die Zeilenlinien in der Liste
   bleiben, die trennen die Produkte voneinander. */
.gallery-main{aspect-ratio:1; background:var(--imgbg); cursor:zoom-in; position:relative; margin-bottom:12px; overflow:hidden;}
/* Zwischen Rahmen und Bild liegt ein DIV (#main-img), das beim Wechseln
   der Ausfuehrung ausgetauscht wird. Ohne eigene Groesse richtet es sich
   nach dem Bild statt nach dem Rahmen — dann ragt das Bild oben und
   unten heraus. Deshalb bekommt es hier die volle Rahmengroesse. */
.gallery-main #main-img{width:100%; height:100%; min-width:0; min-height:0;
  display:flex; align-items:center; justify-content:center;}
.gallery-main img{width:100%; height:100%; object-fit:contain;}
.gallery-main img.cover{object-fit:cover;}
.gallery-main .ph{position:absolute; inset:0; background:repeating-linear-gradient(135deg,#4C4F52 0 2px, transparent 2px 22px), #424548; display:flex; align-items:flex-end; padding:18px;}
.gallery-main .ph span{font-size:11px; letter-spacing:0.05em; color:var(--ink-soft);}
.zoom-hint{position:absolute; top:14px; right:14px; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; background:rgba(26,19,0,0.75); color:var(--gold); padding:6px 12px; z-index:2;}
.thumb-row{display:grid; grid-template-columns:repeat(5,1fr); gap:10px;}
.thumb{aspect-ratio:1; background:var(--imgbg); border:1px solid transparent; cursor:pointer; overflow:hidden; transition:border-color .15s; position:relative;}
.thumb img{width:100%; height:100%; object-fit:cover;}
.thumb .ph{position:absolute; inset:0; background:repeating-linear-gradient(135deg,#4C4F52 0 2px, transparent 2px 14px), #424548; display:flex; align-items:flex-end; padding:5px;}
.thumb .ph span{font-size:7.5px; color:var(--ink-soft); word-break:break-all; line-height:1.3;}
@media (hover:hover){.thumb:hover, .thumb.active{border-color:var(--gold);}}

/* Katalog: Baum-Navigation + Kompaktliste */
/* Der Index links wächst mit: nie schmaler als 210, nie breiter als 320 px.
   Dadurch springt die Produktspalte beim Wiedererscheinen des Baums (ab 1025 px)
   nur wenig, statt schlagartig 300 px zu verlieren. */
.cat-layout{display:grid; grid-template-columns:clamp(210px, 20%, 320px) 1fr;
  gap:clamp(26px, 3vw, 56px); align-items:start;}
#marcas .cat-layout{grid-template-columns:clamp(200px, 17%, 260px) 1fr;}
.tree{position:-webkit-sticky; position:sticky; top:calc(var(--hh, 84px) + 62px); max-height:calc(100vh - var(--hh, 84px) - 62px - 28px); overflow-y:auto; border:1px solid var(--line); padding:18px;}
.tree .side-title{font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; display:block;}
.tree details{border-bottom:1px solid var(--line);}
.tree summary{display:flex; align-items:center; gap:9px; padding:10px 4px; font-size:13px; color:var(--ink); cursor:pointer; list-style:none;}
.tree summary::-webkit-details-marker{display:none;}
@media (hover:hover){.tree summary:hover{color:var(--gold);}}
.tree details[open] summary{color:var(--gold);}
.tree summary svg{flex-shrink:0; opacity:0.75;}
.tree a.g{display:block; padding:7px 4px 7px 32px; font-size:12.5px; color:var(--ink-soft);}
@media (hover:hover){.tree a.g:hover, .tree a.g.active{color:var(--gold);}}
/* Produkte stehen eine Stufe tiefer als ihre Gruppe */
.tree a.g.p{padding-left:48px; font-size:12px; opacity:0.82;}
@media (hover:hover){.tree a.g.p:hover, .tree a.g.p.active{opacity:1; color:var(--gold);}}
/* Ausfuehrungen stehen noch eine Stufe tiefer */
.tree a.g.v{padding-left:64px; font-size:11.5px; opacity:0.66;}
@media (hover:hover){.tree a.g.v:hover{opacity:1; color:var(--gold);}}
.plist-head{display:flex; align-items:center; gap:14px; margin-bottom:26px;}
.plist-head h2{font-size:26px;}
/* Zeile und Bildflaeche haben denselben Ton. Sonst steht das Bildfeld
   als dunkleres Rechteck in der helleren Karte, und ober- und unterhalb
   davon bleibt ein sichtbarer Streifen — das war der "Rand", der sich
   durch keine Bildkorrektur wegbekommen liess. */
/* Kein Kasten um die Zeile: nur eine Trennlinie darunter. Ein Rahmen
   ringsum sah wie eine Einfassung des Bildes aus, seit Zeile und
   Bildflaeche denselben Ton haben. */
.p-row{display:flex; align-items:center; gap:24px; padding:14px 16px; border:none; border-bottom:1px solid var(--line); background:var(--imgbg);}
.p-row:last-child{border-bottom:1px solid var(--line);}
/* Kein goldener Rahmen beim Ueberfahren. Er zog um die ganze Zeile eine
   Linie und wirkte wie ein Rahmen um das Bild. Dass die Zeile anklickbar
   ist, zeigen Mauszeiger und Pfeil rechts. */
@media (hover:hover){.p-row:hover{border-color:var(--line);}}
@media (hover:hover){.p-row:hover + .p-row{border-top:none;}}
/* Bildkasten waechst stufenlos mit der Fensterbreite mit — keine festen
   Pixelwerte mehr, deshalb auch keine Sprunge an den Umbruchpunkten. */
.p-row .pr-img{width:clamp(120px, 20vw, 280px); height:auto; aspect-ratio:1;
  background:var(--imgbg); flex-shrink:0; overflow:hidden; position:relative;}
.p-row .pr-img img{width:100%; height:100%; object-fit:contain; padding:0;}
/* Schwenk im grossen Galeriebild der Produktseite: ein breites Bild
   wandert hinter dem quadratischen Fenster hin und her. Die -33.4%
   sind kein Zufall, sondern 1 − Hoehe/Breite des Bildes (1200/1800);
   der Weg endet also exakt an der rechten Bildkante. Die Halte am
   Anfang und Ende lassen den Blick kurz ruhen. */
.gallery-main .xf .pan{position:absolute; inset:0; overflow:hidden;}
/* Die allgemeine Galerieregel (".gallery-main .xf img" mit width:100%)
   wuerde das breite Bild aufs Quadrat stauchen — dann schoebe die
   Verschiebung ueber die Bildkante hinaus. Der genauere Selektor
   gewinnt und laesst dem Bild seine natuerliche Breite; -33.333% ist
   exakt (Breite − Hoehe) / Breite bei 1800 × 1200, der Lauf endet
   also buendig am rechten Anschlag. */
.gallery-main .xf .pan img{position:absolute; top:0; left:0; height:100%; width:auto;
  max-width:none; object-fit:fill; animation:fc-pan 18s ease-in-out infinite alternate;}
@keyframes fc-pan{0%,10%{transform:translateX(0);} 90%,100%{transform:translateX(-33.333%);}}
@media (prefers-reduced-motion: reduce){ .gallery-main .xf .pan img{animation:none;} }
/* Ueberblendung in der Zeile: die Bilder liegen deckungsgleich
   uebereinander, gewechselt wird nur die Deckkraft. Die Ueberblendung
   laeuft in jeder Fensterbreite (ROW_FADE_FROM = 0 in app.js). */
.p-row .pr-img.xfade > .xf{position:absolute; inset:0; opacity:0;
  transition:opacity .8s ease; display:flex; align-items:center; justify-content:center;}
.p-row .pr-img.xfade > .xf.on{opacity:1;}
/* Groesse und Innenabstand des Bildes kommen weiter aus den bestehenden
   Regeln fuer .pr-img img — hier nur die Schicht selbst. */
@media (prefers-reduced-motion: reduce){ .p-row .pr-img.xfade > .xf{transition:none;} }
.p-row .pr-img .ph{position:absolute; inset:0; background:repeating-linear-gradient(135deg,#4C4F52 0 2px, transparent 2px 12px), #424548;}
.p-row .pr-img .ph span{display:none;}
.p-row .pr-body{flex:1; min-width:0;}
.p-row .pr-body h3{font-size:15px; margin-bottom:3px;}
.p-row .pr-body .pr-brand{font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold);}
.p-row .pr-spec{font-size:12px; color:var(--ink-soft); max-width:320px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.p-row .pr-arrow{color:var(--gold); font-size:18px; flex-shrink:0;}
.v3-group{margin-bottom:34px;}
.grp-anchor{scroll-margin-top:110px;}
/* Produktzeilen werden aus dem Index heraus angesprungen — sie muessen
   dabei unter der klebenden Kopfzeile anhalten. */
.p-row{scroll-margin-top:120px;}
.cat-block-head{margin-bottom:24px;}
/* Markenindex links */
.tree a.b{display:flex; align-items:center; gap:14px; padding:12px 4px; border-bottom:1px solid var(--line);}
.tree a.b:last-child{border-bottom:none;}
.tree a.b .b-logo{width:104px; height:48px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:none; padding:0;}
.tree a.b .b-logo:empty{background:none;}
.tree a.b .b-logo img{max-width:100%; max-height:100%; object-fit:contain;}
.tree a.b .b-name{font-size:13px; color:#FFFFFF; line-height:1.3;}
@media (hover:hover){.tree a.b:hover .b-name, .tree a.b.active .b-name{color:var(--gold);}}
@media (hover:hover){.tree a.b:hover .b-logo, .tree a.b.active .b-logo{background:none;}}
/* Marken-Kopfzeile: Logo in Originalfarben auf heller Fläche */
.cat-block-head .bh-logo{width:76px; height:38px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; background:none; padding:0;}
.cat-block-head .bh-logo img{max-width:100%; max-height:100%; object-fit:contain;}
.cat-block-head .bh-logo:empty{display:none;}

/* Kategorie-Kopfbild: breites Band über der Produktliste.
   Eigenes Bild später als images/cat-<slug>.jpg ablegen; solange keins da ist,
   greift ein Galerie- oder Produktfoto aus data.js. Fehlt alles, entfällt das Band. */
.cat-hero{overflow:hidden; background:#2F3235; border:1px solid var(--line);
  margin-bottom:26px; aspect-ratio:24/9;}
.cat-hero img{width:100%; height:100%; object-fit:cover; display:block;}
.cat-hero.page{aspect-ratio:24/10; margin:24px 0 32px;}
@media(max-width:860px){
  .cat-hero, .cat-hero.page{aspect-ratio:16/9;}
}

/* Kategorieblock auf der Startseite.
   Der Titel ist bewusst so gross wie ein Produktname und der Abstand
   davor gross gewaehlt: beim Scrollen soll sofort auffallen, dass eine
   neue Kategorie beginnt. Aendern: --cat-gap und die Schriftgroesse. */
.cat-block{margin-bottom:40px;}
.cat-block + .cat-block{margin-top:clamp(70px, 7vw, 130px);}
.cat-block-head{display:flex; align-items:center; gap:16px; padding-bottom:18px;
  margin-bottom:26px; border-bottom:2px solid var(--gold); color:var(--gold);}
.cat-block-head h3{font-size:clamp(24px, 2vw, 34px); line-height:1.15; color:var(--ink);
  letter-spacing:-0.01em;}
.cat-block-head > svg{width:clamp(28px, 2.2vw, 38px); height:clamp(28px, 2.2vw, 38px); flex-shrink:0;}
.cat-block-head .n{margin-left:auto; font-size:11px; color:var(--ink-soft); letter-spacing:0.08em;
  flex-shrink:0;}

.carousel{position:relative; overflow:hidden; border:1px solid var(--line);}
.carousel-track{display:flex; transition:transform .6s ease;}
.carousel-slide{flex:0 0 100%; aspect-ratio:16/9; background:#2F3235; cursor:zoom-in; position:relative; overflow:hidden;}
.carousel-slide img{width:100%; height:100%; object-fit:cover; display:block;}
.carousel-slide .ph{position:absolute; inset:0; background:repeating-linear-gradient(135deg,#4C4F52 0 2px, transparent 2px 22px), #424548; display:flex; align-items:flex-end; padding:18px;}
.carousel-slide .ph span{font-size:11px; color:var(--ink-soft);}
.carousel-nav{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:rgba(26,19,0,0.6); color:var(--gold); font-size:26px; cursor:pointer; user-select:none; z-index:2;}
@media (hover:hover){.carousel-nav:hover{background:rgba(26,19,0,0.85);}}
.carousel-prev{left:0;} .carousel-next{right:0;}
.carousel-dots{position:absolute; bottom:14px; left:0; right:0; display:flex; justify-content:center; gap:8px; z-index:2;}
.carousel-dot{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.4); cursor:pointer;}
.carousel-dot.active{background:var(--gold);}

.product-main h1{font-size:38px; margin-bottom:16px;}
.product-main .desc{font-size:14.5px; line-height:1.75; color:var(--ink-soft); margin-bottom:28px; max-width:480px;}
.variant-label{font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:12px; display:block;}
.variant-row{display:flex; gap:10px; margin-bottom:30px; flex-wrap:wrap;}
.variant-chip{border:1px solid var(--line); padding:10px 16px; font-size:12.5px; cursor:pointer; color:var(--ink-soft);}
.variant-chip.active{background:var(--gold); color:#1A1300; border-color:var(--gold);}
.variant-select{appearance:none; -webkit-appearance:none; background:var(--card) url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%228%22 viewBox=%220 0 12 8%22><path d=%22M1 1l5 5 5-5%22 fill=%22none%22 stroke=%22%23999%22 stroke-width=%221.6%22/></svg>') no-repeat right 14px center; border:1px solid var(--line); color:var(--ink); font:inherit; font-size:13px; padding:11px 38px 11px 14px; cursor:pointer; min-width:260px; max-width:100%;}
.variant-select:focus{outline:none; border-color:var(--gold);}
.pf-vars .pf-select{min-width:230px; font-size:12px; padding:9px 34px 9px 12px;}
.spec-list{border-top:1px solid var(--line); margin-bottom:30px;}
/* Eine Angabe je Zeile. Die zweispaltige .spec-row (Bezeichnung links,
   Wert rechts in Gold) ist entfallen — sie griff nur bei Angaben mit
   Doppelpunkt und liess die Marken unterschiedlich aussehen. */
.spec-single{padding:13px 0; border-bottom:1px solid var(--line);
  font-size:13.5px; color:var(--ink); line-height:1.55;}

.p-video-wrap{padding-top:56px;}
.v-title{font-size:24px; margin-bottom:24px;}
.v-frame{position:relative; aspect-ratio:16/9; max-width:940px; cursor:pointer;
  border:1px solid var(--line); background:var(--card);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;}
@media (hover:hover){.v-frame:hover{border-color:var(--gold);}}
.v-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.v-play{width:76px; height:76px; border-radius:50%; border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center; transition:background .18s;}
.v-play i{width:0; height:0; margin-left:6px; border-left:19px solid var(--gold);
  border-top:12px solid transparent; border-bottom:12px solid transparent;}
@media (hover:hover){.v-frame:hover .v-play{background:rgba(201,161,90,0.14);}}
.v-note{font-size:13px; letter-spacing:0.04em; color:var(--ink-soft);}

.related{padding-top:60px; padding-bottom:80px; border-top:1px solid var(--line); margin-top:44px;}
.related h2{font-size:24px; margin-bottom:30px;}

footer{padding:56px 0 28px; border-top:1px solid var(--gold); margin-top:40px;}
.foot-grid{display:grid; grid-template-columns:1.3fr repeat(3,1fr); gap:40px; padding-bottom:36px; border-bottom:1px solid var(--line);}
.foot-grid h4{font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); margin-bottom:16px;}
.foot-grid a, .foot-grid p{display:block; font-size:13px; color:var(--ink-soft); margin-bottom:10px; line-height:1.6;}
@media (hover:hover){.foot-grid a:hover{color:var(--ink);}}
.foot-bottom{display:flex; justify-content:space-between; padding-top:22px; font-size:11px; color:var(--ink-soft);}

.lightbox{position:fixed; inset:0; background:rgba(20,21,22,0.96); display:none; align-items:center; justify-content:center; z-index:100; flex-direction:column;}
.lightbox.open{display:flex;}
.lightbox-frame{width:min(80vw,760px); height:min(78vh,760px); display:flex; align-items:center; justify-content:center;}
.lightbox-frame img{max-width:100%; max-height:100%; object-fit:contain;}
.lightbox-frame .ph{width:100%; height:100%; background:repeating-linear-gradient(135deg,#4C4F52 0 2px, transparent 2px 22px), #35383B; display:flex; align-items:flex-end; padding:24px; border:1px solid var(--line);}
.lightbox-frame .ph span{font-size:12px; color:var(--ink-soft);}
.lightbox-caption{user-select:text; -webkit-user-select:text; cursor:text; color:#D8D2C2; font-size:13px; margin-top:16px; letter-spacing:0.04em;}
.lightbox-close{position:absolute; top:26px; right:36px; color:var(--ink); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; border:1px solid var(--line); padding:8px 16px;}
@media (hover:hover){.lightbox-close:hover{border-color:var(--gold); color:var(--gold);}}
.lightbox-nav{position:absolute; top:50%; transform:translateY(-50%); color:var(--ink); font-size:28px; cursor:pointer; padding:10px 16px; user-select:none;}
@media (hover:hover){.lightbox-nav:hover{color:var(--gold);}}
.lb-prev{left:22px;} .lb-next{right:22px;}

/* ===================================================================
   Kopfzeile: schon ab 1024 px auf zwei Zeilen umstellen — Logo oben,
   PRODUTOS/MARCAS und die Kontakt-Piktogramme darunter. So kommt der
   Text der Navigation dem Logo nie zu nahe.
   =================================================================== */
@media(max-width:1024px){
  nav{gap:12px;}
  nav a{display:none;}
  nav a.nav-keep{display:block;}
  .contact-menu{display:none;}
  .mobile-nav{display:flex; gap:0; border-top:1px solid var(--line);
    padding:0 clamp(32px, 5vw, 96px);}
  .mobile-nav a{flex:1; text-align:center; padding:12px 4px; font-size:11px; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--ink-soft); border-right:1px solid var(--line);}
  .mobile-nav a:last-child{border-right:none;}
  .mobile-nav a:hover, .mobile-nav a:active{color:var(--gold);}
  .mobile-nav a.ic{flex:0 0 70px; display:flex; align-items:center; justify-content:center;
    color:var(--gold); padding:9px 4px;}
  .mobile-nav a.ic svg{width:21px; height:21px;}
  .mobile-nav a.ic:hover{opacity:0.75;}
}

@media(max-width:860px){
  .wrap{padding:0 20px;}
  header .wrap{padding:12px 20px 10px;}
  nav{gap:10px;}
  nav a{display:none;}
  nav a.nav-keep{display:block;}
  .contact-menu{display:none;}
  .logo img{height:34px;}
  /* Sprachumschalter kompakter */
  .lang-toggle button{font-size:9.5px; letter-spacing:0.06em; padding:5px 8px;}
  .lang-select{font-size:9.5px; letter-spacing:0.06em; padding:5px 22px 5px 8px;}
  .icon-btn{width:30px; height:30px; font-size:14px;}
  /* Zweite Zeile im Header: Direktlinks zu den Bereichen */
  .mobile-nav{display:flex; gap:0; border-top:1px solid var(--line); padding:0 20px;}
  .mobile-nav a{flex:1; text-align:center; padding:11px 4px; font-size:11px; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--ink-soft); border-right:1px solid var(--line);}
  .mobile-nav a:last-child{border-right:none;}
  .mobile-nav a:active{color:var(--gold);}
  /* Kontakt-Piktogramme: Brief und Telefon */
  .mobile-nav a.ic{flex:0 0 60px; display:flex; align-items:center; justify-content:center; color:var(--gold); padding:9px 4px;}
  .mobile-nav a.ic svg{width:21px; height:21px;}
  .mobile-nav a.ic:active{opacity:0.6;}
  .hero h1{font-size:34px;}
  .hero{min-height:max(380px, min(66vh, 100vw));}
  .hero-grid{grid-template-columns:1fr;}
  /* Mobil: Text etwas größer, Lesbarkeit über Schatten statt Abdunklung */
  .hero-content p{font-size:16.5px; color:#D8D9D8; text-shadow:0 1px 14px rgba(0,0,0,0.9), 0 0 30px rgba(0,0,0,0.65);}
  .hero-content h1{text-shadow:0 2px 20px rgba(0,0,0,0.8), 0 0 40px rgba(0,0,0,0.5);}
  .cat-layout, #marcas .cat-layout{grid-template-columns:1fr;}
  .tree{position:static; max-height:none;}
  /* Mobil: Markenindex als Kachelraster statt langer Liste */
  /* Mobil: Markenindex als Logowand — zwei gleich große Felder pro Reihe,
     durch feine Linien getrennt, jedes Logo mittig. Dadurch entstehen
     unabhängig von der Bildschirmbreite keine ungleichen Lücken.
     Die Klassen third/half/two-thirds und al-* aus index.html gelten
     hier bewusst nicht — sie steuern nur die Reihenfolge bzw. den Desktop. */
  #marcas .tree{display:grid; grid-template-columns:1fr 1fr; gap:1px; padding:0;
    background:var(--line); border:1px solid var(--line);}
  #marcas .tree .box-head{grid-column:1/-1; background:var(--bg);
    padding:16px 15px 13px; margin:0; border-bottom:1px solid var(--gold);}
  #marcas .tree a.b{grid-column:auto; background:var(--bg); border-bottom:none;
    justify-content:center; padding:20px 12px; min-height:74px;}
  #marcas .tree a.b .b-logo{justify-content:center;}
  #marcas .tree a.b.has-logo .b-logo img{height:calc(var(--lh, 20px) * 0.9);
    transform:translateY(calc(var(--dy, 0px) * 0.9));}
  #marcas .tree a.b:active{background:var(--card);}
  .bt-logo{height:38px; max-width:150px; margin-right:12px;}
  .p-row{gap:16px; padding:12px;}
  .p-row .pr-spec{display:none;}
  .cat-grid{grid-template-columns:1fr 1fr;}
  .brand-grid{grid-template-columns:1fr 1fr 1fr; gap:12px;}
  .product-grid{grid-template-columns:1fr 1fr;}
  .product-main{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:1fr 1fr;}
  .thumb-row{grid-template-columns:repeat(4,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr;}
}

/* Negativ-Logos (weiß, transparent): keine helle Fläche nötig */
.tree a.b .b-logo.neg{background:none; padding:0;}
@media (hover:hover){.tree a.b:hover .b-logo.neg, .tree a.b.active .b-logo.neg{background:none;}}
.tree a.b .b-logo.neg img{opacity:0.85; transition:opacity .15s;}
@media (hover:hover){.tree a.b:hover .b-logo.neg img, .tree a.b.active .b-logo.neg img{opacity:1;}}
.cat-block-head .bh-logo.neg{background:none; padding:0;}

/* Marken mit Logo: Name entfällt, Logo größer und zentriert */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
/* Markenseite: Logo in der Kopfzeile — rechteckig, ohne helle Fläche wenn Negativ-Logo */
.bt-logo{display:inline-flex; align-items:center; justify-content:center;
  height:44px; max-width:180px; margin-right:16px; vertical-align:middle;
  background:#EDEEEE; padding:6px 12px;}
.bt-logo.neg{background:none; padding:0;}
.bt-logo img{max-width:100%; max-height:100%; object-fit:contain;}
.bt-name{vertical-align:middle;}

.tree a.b.has-logo{justify-content:flex-start; padding:11px 4px;}
/* Höhe kommt pro Marke aus --lh (siehe BRAND_LOGO_H in app.js), damit die
   Schrifthöhe aller Wortmarken gleich groß wirkt. */
.tree a.b.has-logo .b-logo{width:100%; max-width:none; height:auto; justify-content:flex-start;}
.tree a.b.has-logo .b-logo img{height:var(--lh,20px); width:auto; max-width:100%;
  transform:translateY(var(--dy,0px));}
.tree a.b:not(.has-logo){padding:15px 4px;}
.tree a.b:not(.has-logo) .b-name{font-size:14px; letter-spacing:0.06em;}
.cat-block-head .bh-logo{width:110px; height:44px;}

/* ---------------------------------------------------------------
   Große Monitore (ab 1400 px): mehr Spalten statt breiterer Kacheln,
   damit die Fläche genutzt wird, ohne dass einzelne Elemente
   unangenehm groß werden.
   --------------------------------------------------------------- */
@media(min-width:1400px){
  .product-grid{grid-template-columns:repeat(4,1fr);}
  .brand-grid{grid-template-columns:repeat(6,1fr);}
  .cat-grid{grid-template-columns:repeat(4,1fr);}
  .p-row .pr-spec{max-width:520px;}
  .about-grid{gap:80px;}
}

/* ===================================================================
   HELLES DESIGN   —   html[data-theme="light"]
   Umschalter: Sonne/Mond-Symbol oben rechts im Kopf.
   Dauerhaft hell: in app.js DEFAULT_THEME auf 'light' setzen.
   =================================================================== */
html[data-theme="light"]{
  --bg:#F4F3F1;          /* helles Sandgrau statt Felsgrau */
  --bg-alt:#EAE9E6;
  --ink:#25272A;         /* Text dunkel */
  --ink-soft:#5F6265;
  --line:rgba(0,0,0,0.16);
  --gold:#9C7628;        /* dunkleres Gold, damit es auf Hell lesbar bleibt */
  --card:#FFFFFF;
  --imgbg:#FFFFFF;       /* Bildflaechen: helle Fassung der Fotos steht auf Weiss */
}

/* Kopfzeile, Logo, Buttons */
html[data-theme="light"] header{background:rgba(244,243,241,0.94);}
html[data-theme="light"] .logo img{filter:brightness(0);}
html[data-theme="light"] .lang-toggle button.active,
html[data-theme="light"] .toggle button.active,
html[data-theme="light"] .btn-primary{color:#FFFFFF;}
html[data-theme="light"] .contact-drop{box-shadow:0 12px 30px rgba(0,0,0,0.13);}

/* Hero: Verlauf über dem Video in Hell */
html[data-theme="light"] .hero-veil{
  background:linear-gradient(90deg, rgba(244,243,241,0.88) 0%, rgba(244,243,241,0.5) 55%, rgba(244,243,241,0.12) 100%);}
/* Der Text steht auf dem Video und bleibt hell mit Schatten — außer
   auf großen Schirmen, wo er über der aufgehellten Seite liegt. */
html[data-theme="light"] .hero-content h1{color:#1C1E20; text-shadow:0 1px 12px rgba(255,255,255,0.85);}
html[data-theme="light"] .hero-content h1 em{color:#8A651F; text-shadow:0 1px 12px rgba(255,255,255,0.85);}
html[data-theme="light"] .hero-content p{color:#3A3D40; text-shadow:0 1px 10px rgba(255,255,255,0.9);}
html[data-theme="light"] .hero-content .eyebrow{color:#8A651F; text-shadow:0 1px 8px rgba(255,255,255,0.9);}
html[data-theme="light"] .hero-content .btn-secondary{border-color:#3A3D40; color:#1C1E20; background:rgba(255,255,255,0.4);}
@media (hover:hover){html[data-theme="light"] .hero-content .btn-secondary:hover{background:rgba(255,255,255,0.7);}}
html[data-theme="light"] #hero-video{filter:brightness(1.05);}

/* Flächen, die im dunklen Design absichtlich dunkel sind */
html[data-theme="light"] .carousel-slide,
html[data-theme="light"] .about-visual,
html[data-theme="light"] .cat-hero{background:#E4E2DE;}
html[data-theme="light"] .p-row .pr-img{background:var(--imgbg);}
html[data-theme="light"] .brand-logo-box{background:var(--imgbg); border:1px solid var(--line);}
html[data-theme="light"] .p-row .pr-img .ph{
  background:repeating-linear-gradient(135deg,#D9D7D3 0 2px, transparent 2px 12px), #EFEDEA;}
html[data-theme="light"] .ph{
  background:repeating-linear-gradient(135deg,#D9D7D3 0 2px, transparent 2px 12px), #EFEDEA;
  color:#7A7D80;}

/* Markenlogos: in Hell die Originalfarben ohne helle Kachel */
html[data-theme="light"] .tree a.b .b-logo,
html[data-theme="light"] .cat-block-head .bh-logo,
html[data-theme="light"] .bt-logo{background:none; padding:0;}
html[data-theme="light"] .tree a.b:hover .b-logo,
html[data-theme="light"] .tree a.b.active .b-logo{background:none;}

/* Lightbox bleibt abgedunkelt, damit das Bild wirkt */
html[data-theme="light"] .lightbox{background:rgba(20,21,22,0.92);}

/* Lightbox bleibt in beiden Designs dunkel — dort zählt nur das Bild */
html[data-theme="light"] .lightbox-close,
html[data-theme="light"] .lightbox-nav{color:#EDECEA;}
html[data-theme="light"] .lightbox-frame .ph{
  background:repeating-linear-gradient(135deg,#4C4F52 0 2px, transparent 2px 22px), #35383B;}
html[data-theme="light"] .lightbox-frame .ph span{color:#ABADAE;}

/* ===================================================================
   PRODUKTVORSCHAU — Testvarianten
   Umschalter unten rechts. Die drei Varianten arbeiten alle mit
   demselben HTML (.p-row), nur die Anordnung ändert sich.
   Entscheidung getroffen? Dann bleibt die gewählte Variante als
   Standard und dieser Block sowie der Umschalter können raus.
   =================================================================== */

/* ---- A: Kachelraster, Bild oben groß ---- */
body.pv-a .grp-anchor, body.pv-a .v3-group{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
body.pv-a .group-title{grid-column:1/-1;}
body.pv-a .p-row{display:flex; flex-direction:column; align-items:stretch;
  gap:0; padding:0; border:1px solid var(--line);}
@media (hover:hover){body.pv-a .p-row:hover{border-color:var(--line);}}
body.pv-a .p-row .pr-img{width:100%; height:auto; aspect-ratio:1;}
body.pv-a .p-row .pr-body{padding:18px 20px 6px;}
body.pv-a .p-row .pr-body h3{font-size:19px;}
body.pv-a .p-row .pr-spec{display:block; max-width:none; padding:0 20px 20px; -webkit-line-clamp:2;}
body.pv-a .p-row .pr-arrow{display:none;}

/* ---- B: kompakte Zeile, Text gebündelt neben dem Bild ---- */
body.pv-b .p-row{display:grid; grid-template-columns:130px 1fr auto;
  grid-template-areas:"img body arrow" "img spec arrow";
  align-items:center; column-gap:22px; row-gap:2px; padding:12px 16px;}
body.pv-b .p-row .pr-img{grid-area:img; width:130px; height:98px;}
body.pv-b .p-row .pr-body{grid-area:body; align-self:end;}
body.pv-b .p-row .pr-body h3{font-size:16px;}
body.pv-b .p-row .pr-spec{grid-area:spec; align-self:start; display:block;
  max-width:none; -webkit-line-clamp:1;}
body.pv-b .p-row .pr-arrow{grid-area:arrow;}

/* ---- C: große Bildzeile, Bild über die volle Zeilenhöhe ---- */
body.pv-c .p-row{display:grid; grid-template-columns:minmax(0, var(--imgw, min(44%, 50vh))) minmax(0,1fr) auto;
  grid-template-areas:"img body arrow" "img spec arrow";
  align-content:center; align-items:center; column-gap:36px; row-gap:10px;
  padding:0 30px 0 0; overflow:hidden;}
/* Die Bildfläche hängt an beidem: 54 % der Spaltenbreite UND höchstens
   62 % der Fensterhöhe. Dadurch wird sie in jede Richtung kleiner, sobald
   das Fenster kleiner wird — nicht erst am Handy-Umbruch.
   align-self:center statt stretch, sonst würde die Textlänge die Höhe
   bestimmen und das Bild bliebe beim Verkleinern gleich groß. */
body.pv-c .p-row .pr-img{grid-area:img; width:100%; height:auto;
  aspect-ratio:1; max-height:none; align-self:center; overflow:hidden;}
body.pv-c .p-row .pr-img img{width:100%; height:100%; object-fit:contain; padding:0;}
body.pv-c .p-row .pr-body{grid-area:body; align-self:end; padding-top:28px;}
body.pv-c .p-row .pr-body h3{font-size:26px; margin-bottom:0;}
body.pv-c .p-row .pr-arrow{grid-area:arrow; font-size:22px;}

/* Infospalte: bis zu drei technische Angaben, darunter die Varianten */
body.pv-c .p-row .pr-spec{grid-area:spec; align-self:start; display:flex;
  flex-direction:column; gap:5px; max-width:none; overflow:visible;
  -webkit-line-clamp:none; padding-bottom:28px;}
/* Angaben duerfen umbrechen statt abgeschnitten zu werden. Vorher stand
   hier white-space:nowrap mit Auslassungspunkten — bei laengeren Werten
   wie "≥ 26 mm (conforme modelo)" fehlte dadurch das Ende. Auch hier
   steht jede Angabe als durchgehende Zeile, ohne eigene Spalte fuer die
   Bezeichnung. */
body.pv-c .p-row .pr-spec .ps{font-size:12.5px; line-height:1.5;
  color:var(--ink-soft); display:block;}
body.pv-c .p-row .pr-vars{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px;}
body.pv-c .p-row .pr-vars i{font-style:normal; font-size:10.5px; letter-spacing:0.07em;
  color:var(--gold); border:1px solid var(--line); padding:4px 9px;}

@media(max-width:860px){
  body.pv-a .grp-anchor, body.pv-a .v3-group{grid-template-columns:1fr 1fr; gap:12px;}
  body.pv-b .p-row{grid-template-columns:100px 1fr auto;}
  body.pv-b .p-row .pr-img{width:100px; height:76px;}
  /* Der gestapelte Aufbau steht jetzt in einem eigenen Block (<=560px). */
}

/* Umschalter unten rechts — nur zum Aussuchen, später entfernen */
.pv-switch{position:fixed; right:18px; bottom:18px; z-index:50; display:flex;
  align-items:center; gap:2px; background:var(--card); border:1px solid var(--gold);
  padding:5px; box-shadow:0 10px 26px rgba(0,0,0,0.35);}
.pv-switch span{font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-soft); padding:0 10px 0 6px;}
.pv-switch button{border:none; background:none; cursor:pointer; color:var(--ink-soft);
  font-family:'Space Grotesk',sans-serif; font-size:12px; letter-spacing:0.06em;
  padding:7px 12px;}
@media (hover:hover){.pv-switch button:hover{color:var(--gold);}}
.pv-switch button.on{background:var(--gold); color:#1A1300;}
@media(max-width:860px){
  .pv-switch{right:10px; bottom:10px; padding:4px;}
  .pv-switch span{display:none;}
  .pv-switch button{padding:8px 11px;}
}


/* ===================================================================
   PRODUKTZEILE auf echten Telefonen (bis 560 px)
   Erst hier wird gestapelt. Zwischen 560 und 860 px bleibt die
   zweispaltige Zeile — dort skaliert das Bild stufenlos mit der Breite,
   genau wie auf dem Desktop.
   =================================================================== */
@media(max-width:560px){
  body.pv-c .p-row{grid-template-columns:1fr; grid-template-areas:"img" "body" "spec";
    column-gap:0; row-gap:0; padding:0 0 18px;}
  body.pv-c .p-row .pr-img{width:100%; aspect-ratio:1; height:auto;
    max-height:none; max-width:none; margin:0; align-self:start; justify-self:stretch;}
  body.pv-c .p-row .pr-img img{width:100%; height:100%; object-fit:contain; padding:0;}
  body.pv-c .p-row .pr-body{padding:16px 16px 0;}
  body.pv-c .p-row .pr-body h3{font-size:21px;}
  body.pv-c .p-row .pr-spec{padding:0 16px 16px;}
  body.pv-c .p-row .pr-arrow{display:none;}
}

/* ===================================================================
   Bis 1024 px steht der Kategorie-/Markenbaum über der Liste statt
   daneben. Dadurch bekommt die Produktspalte die volle Breite — das
   Bild wird auf schmalen Fenstern deutlich größer, statt sich mit dem
   300 px breiten Baum den Platz zu teilen.
   =================================================================== */
@media(max-width:1024px){
  .cat-layout, #marcas .cat-layout{grid-template-columns:1fr; gap:26px;}
  .tree{position:static; max-height:none;}
}


/* ===================================================================
   PRODUKTSEITE, schmale Fenster (bis 1024 px):
   Der Bildrahmen ist kein festes Quadrat mehr, sondern richtet sich
   nach dem Bild selbst — Breite = volle Spalte, Hoehe = was das Bild
   braucht, hoechstens 58 % der Fensterhoehe. Dadurch entsteht weder
   ein riesiges weisses Feld noch ein beschnittenes Produkt.
   Wieder quadratisch: diesen Block loeschen.
   =================================================================== */
@media(max-width:1024px){
  .product-main{grid-template-columns:1fr; gap:26px; padding-top:30px;}
  .product-main h1{font-size:26px;}
  .product-main .desc{max-width:none;}
  /* Der Rahmen bleibt quadratisch wie die Bilder selbst — so entsteht
     links und rechts kein leerer Rand. Das Bild fuellt ihn ganz aus und
     waechst mit der Fensterbreite mit. */
  .gallery-main{aspect-ratio:1; height:auto; max-height:none;
    display:flex; align-items:center; justify-content:center; padding:10px;}
  .gallery-main img{width:100%; height:100%; object-fit:contain; display:block;}
  .gallery-main .ph{position:absolute; inset:0;}
  .thumb-row{grid-template-columns:repeat(5,1fr);}
}
@media(max-width:560px){
  .thumb-row{grid-template-columns:repeat(4,1fr);}
}

/* Sicherheitsnetz gegen zu breite Inhalte.
   ACHTUNG: hier bewusst KEIN overflow auf html oder body — weder hidden
   noch clip. Beides macht die Seite zum eigenen Scrollbereich; Safari
   laesst die klebende Kopfzeile dann mitscrollen. Zu breite Inhalte sind
   ueber min-width:0 an den Rasterzellen geloest (siehe unten). */
img{max-width:100%;}

/* ===================================================================
   Ueberlauf-Schutz fuer die Produktzeile: lange Woerter in Titel oder
   Datenzeile duerfen die Textspalte nicht aufblaehen — sonst wird die
   ganze Zeile breiter als das Fenster und das Bild laeuft rechts raus.
   =================================================================== */
.p-row .pr-body, .p-row .pr-spec{min-width:0;}
.p-row .pr-body h3, .p-row .pr-brand, .p-row .pr-spec .ps{overflow-wrap:anywhere;}

/* Zwischen 560 und 860 px bekommt das Bild mehr Anteil an der Zeile,
   damit der Sprung zum gestapelten Aufbau kleiner ausfaellt. */
@media(max-width:860px) and (min-width:561px){
  body.pv-c .p-row{grid-template-columns:minmax(0, min(64%, 58vh)) minmax(0,1fr) auto;
    column-gap:22px; padding-right:18px;}
  body.pv-c .p-row .pr-body h3{font-size:22px;}
}

/* Rasterzellen duerfen nie breiter werden als ihr Anteil: ohne min-width:0
   waechst eine Spalte an ihrem laengsten Inhalt und schiebt das ganze
   Layout aus dem Fenster — genau das liess das Produktbild rechts
   herauslaufen. */
.cat-layout > *, .product-main > *, .p-row > *{min-width:0;}

/* ===================================================================
   VOLLSTAENDIGE PRODUKTZEILE — auf breiten Fenstern ab 1600 px.
   Darunter bleibt alles wie bisher: Bild, Name und drei Angaben, Klick fuehrt zur Produktseite.

   Ab 1600 px steht rechts neben dem Bild alles, was der Kunde braucht:
   Beschreibung, saemtliche technischen Daten, die Ausfuehrungen als
   Schaltflaechen (Klick wechselt das Bild) sowie Kontakt und Selector.
   Ein Klick weniger — die Produktseite ist ueber Bild und Name weiter
   erreichbar, ohne dass ein Knopf dafuer noetig waere.

   Schwelle aendern: die 1600px unten anpassen.
   =================================================================== */
.p-row{position:relative;}
.p-row .pr-full{display:none;}
.p-row .pr-body h3 a, .p-row .pr-img{color:inherit; display:block;}
/* Bis 1600 px bleibt die ganze Zeile anklickbar wie bisher: eine
   unsichtbare Flaeche ueber der Zeile fuehrt zur Produktseite.
   Ab 1600 px verschwindet sie, damit Ausfuehrungen und Knoepfe
   bedienbar sind. */
.p-row .pr-hit{position:absolute; inset:0; z-index:2;}

@media(min-width:1600px){
  .p-row .pr-hit{display:none;}

  /* Ab hier steht in der Zeile schon alles, was auch die Produktseite
     zeigt — Beschreibung, alle Daten, Ausfuehrungen, Contacto, Ficha
     tecnica, Selector. Ein Sprung auf die Produktseite waere doppelt
     gemoppelt, deshalb fuehren Bild und Name hier nicht mehr dorthin.
     Anklickbar bleiben nur die Schaltflaechen. Auch die Randfarbe beim
     Ueberfahren faellt weg, sonst verspricht die Zeile eine
     Klickbarkeit, die sie nicht mehr hat. */
  body.pv-c .p-row .pr-body h3 a,
  body.pv-c .p-row .pr-body .pr-brand{pointer-events:none; cursor:default;}
  /* A imagem continua clicável: abre a página do produto. */
  body.pv-c .p-row .pr-img{pointer-events:auto; cursor:pointer;}
  body.pv-c .p-row:hover{border-color:var(--line);}
  body.pv-c .p-row:hover + .p-row{border-top:none;}

  /* Bildfeld quadratisch.
     Die Bilddateien sind quadratisch. Im frueheren liegenden Feld (3:2)
     richtete sich das Quadrat nach der Hoehe und liess links und rechts
     ein knappes Drittel der Breite leer — daher wirkte das Produkt
     klein. Ein quadratisches Feld loest beides: Quadrat in Quadrat sitzt
     randlos, und die gewonnene Hoehe macht das Produkt groesser.

     Warum 'contain' und nicht 'cover': max-height begrenzt die Zeile auf
     niedrigen Fenstern. Wird sie wirksam, ist das Feld breiter als hoch.
     Mit 'cover' schnitte das Bild dann oben und unten ins Produkt — mit
     'contain' bleibt links und rechts etwas Luft. Das ist der harmlosere
     Ausgang: lieber Platz zuviel als ein angeschnittenes Produkt.

     Die Hoehe wird NICHT mehr per max-height gedeckelt — das machte das
     Feld auf flachen Fenstern liegend und erzeugte oben und unten wieder
     Rand. Stattdessen begrenzt min() die Spalten*breite*; das Feld bleibt
     dadurch bei jeder Fenstergroesse quadratisch.

     Einen Zoom braucht es nicht mehr: Die Bilddateien sind neu gesetzt,
     das Produkt sitzt darin mittig und fuellt 94 % der Hoehe. */
  /* Das Bild soll oben und unten am Zeilenrand anliegen. Es ist
     quadratisch, die Zeile aber so hoch wie ihr laengerer Teil — bei viel
     Text also hoeher als das Bild breit ist. Genau daraus entsteht der
     Rand oben und unten.
     Zwei Stellschrauben dagegen: der Deckel nach der Fensterhoehe faellt
     fast weg (74vh statt 62vh), und fitRowImages() in app.js gibt der
     Bildspalte notfalls die gemessene Zeilenhoehe als Breite. Das Bild
     waechst dabei nur in Platz hinein, den die Zeile ohnehin einnimmt —
     die Seite wird dadurch kein Stueck laenger. */
  body.pv-c .p-row{grid-template-columns:minmax(0, var(--imgw, min(42%, 62vh))) minmax(0,1fr) auto;}
  body.pv-c .p-row .pr-img{aspect-ratio:1; max-height:none;}
  body.pv-c .p-row .pr-img img{object-fit:contain; padding:0;}
  body.pv-c .p-row{grid-template-areas:"img body arrow" "img full arrow"; row-gap:4px;}
  body.pv-c .p-row .pr-spec{display:none;}
  body.pv-c .p-row .pr-arrow{display:none;}
  body.pv-c .p-row .pr-body{padding-top:34px;}
  body.pv-c .p-row .pr-body h3{font-size:30px;}
  body.pv-c .p-row .pr-full{display:block; grid-area:full; align-self:start;
    padding:2px 0 32px;}

  .pf-desc{font-size:14px; line-height:1.75; color:var(--ink-soft);
    margin:0 0 20px; max-width:78ch;}
  /* Eine Angabe je Zeile, untereinander weg — keine zweite Spalte mehr.
     Vorher lief hier ein auto-fit-Raster: bei kurzen Angaben standen die
     Zeilen nebeneinander, bei langen untereinander, und am Doppelpunkt
     wurde zusaetzlich in Bezeichnung und Wert getrennt. Dieselbe Liste
     sah dadurch von Marke zu Marke anders aus. */
  .pf-specs{display:block; max-width:72ch;}
  .pf-specs .r{padding:9px 0; border-bottom:1px solid var(--line);
    font-size:13.5px; color:var(--ink-soft); line-height:1.5;}

  .pf-vars{display:flex; flex-wrap:wrap; gap:9px; margin-top:20px;}
  .pf-chip{font-family:'Inter',sans-serif; font-size:12px; letter-spacing:0.06em;
    color:var(--gold); background:none; border:1px solid var(--line);
    padding:9px 15px; cursor:pointer; transition:border-color .15s, background .15s;}
  .pf-chip:hover{border-color:var(--gold);}
  .pf-chip.on{border-color:var(--gold); background:rgba(201,161,90,0.14);}

  /* Die drei Knoepfe stehen rechts und immer in einer Zeile. Statt
     umzubrechen schrumpfen sie mit dem Fenster — dieselbe Rechnung wie
     in der Knopfzeile der Produktseite. */
  /* Der Kontakt-Knopf steht links buendig mit dem Text — schneller
     Zugriff statt Suche am rechten Rand. */
  .pf-cta{display:flex; flex-wrap:nowrap; justify-content:flex-start;
    align-items:stretch; gap:clamp(8px, 0.7vw, 14px); margin-top:22px;}
  .pf-cta .btn-primary, .pf-cta .btn-secondary{
    display:inline-flex; align-items:center; justify-content:center;
    flex:0 1 auto; min-width:0; white-space:nowrap;
    padding:clamp(11px, 0.8vw, 16px) clamp(14px, 1.35vw, 30px);
    font-size:clamp(10px, 0.63vw, 12px); letter-spacing:0.08em;}
  .pf-cta span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .pf-cta svg{flex-shrink:0;
    width:clamp(14px, 1vw, 20px); height:clamp(14px, 1vw, 20px);
    margin-right:clamp(6px, 0.6vw, 11px);}
}

/* ===================================================================
   BLAETTERN (Karussell) — zurzeit NICHT eingebunden.
   Die Leiste bleibt als Baustein erhalten, falls sie doch gewuenscht
   wird. Vor/Zurueck laeuft jetzt ueber den Browser-Verlauf (.hist-nav).
   Schmale Leiste unter der Brotkrume: links das vorige, rechts das
   naechste Produkt derselben Kategorie, in der Mitte der Weg zurueck
   zur Uebersicht mit Zaehler. Auf schmalen Fenstern bleiben nur die
   Pfeile und der mittlere Text stehen.
   =================================================================== */
.pnav{border-bottom:1px solid var(--line); background:var(--bg);}
.pnav-in{display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding-top:11px; padding-bottom:11px;}
.pnav a{display:flex; align-items:center; gap:10px; font-size:11.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink-soft); min-width:0;}
@media (hover:hover){.pnav a:hover{color:var(--gold);}}
.pnav .pn-t{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:32ch;}
.pnav .pn-ar{color:var(--gold); font-size:15px; line-height:1;}
.pnav .pn-up{color:var(--ink); flex-shrink:0;}
.pnav .pn-up i{font-style:normal; color:var(--ink-soft); letter-spacing:0.06em;}
.pnav .pn-next{justify-content:flex-end; text-align:right;}
.pnav .pn-x{flex:1;}
.pnav .pn-prev, .pnav .pn-next{flex:1;}
@media(max-width:860px){
  .pnav-in{gap:10px;}
  .pnav .pn-t{display:none;}
  .pnav .pn-ar{font-size:18px;}
  .pnav a{font-size:11px; letter-spacing:0.06em;}
}

/* Auf schmalen Fenstern steht die Lupe wieder rechts neben den
   anderen Schaltflaechen — links davor gibt es dort keine Navigation. */
@media(max-width:1024px){
  nav .search-btn{order:3;}
  nav .lang-toggle{order:1;}
  nav .lang-select{order:1;}
  nav #theme-btn{order:2;}
}

/* ===================================================================
   Ueberschrift im Index-Kasten
   Auf der Startseite steht der Abschnittstitel nicht mehr ueber den
   beiden Spalten, sondern oben im Kasten links. Dadurch beginnen
   Kasten und Inhalt rechts auf derselben Linie.
   =================================================================== */
.tree .box-head{margin:0 0 16px; padding-bottom:14px; border-bottom:1px solid var(--gold);}
.tree .box-head h2{font-size:clamp(17px, 1.25vw, 21px); line-height:1.25; letter-spacing:-0.01em;}
#marcas .tree .box-head{grid-column:1/-1;}
@media(max-width:1024px){
  .tree .box-head{margin-bottom:14px;}
}

/* ===================================================================
   Die drei Schaltflaechen auf der Produktseite (Contacto · Ficha
   técnica · Selector) wachsen mit der Fensterbreite mit, damit sie
   auf 13 Zoll in eine Zeile passen und auf grossen Monitoren nicht
   verloren wirken. Am Handy bleiben sie unveraendert gross genug
   zum Antippen.
   =================================================================== */
/* Immer eine Zeile: die drei Knoepfe schrumpfen lieber mit, als dass
   einer umbricht und die Seite unnoetig in die Hoehe zieht. */
.product-main .cta-row{gap:clamp(8px, 0.8vw, 14px); flex-wrap:nowrap; align-items:stretch;}
.product-main .cta-row .btn-primary,
.product-main .cta-row .btn-secondary{display:inline-flex; align-items:center;
  justify-content:center; flex:0 1 auto; min-width:0;}
.product-main .cta-row .btn-primary span,
.product-main .cta-row .btn-secondary span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.product-main .cta-row .btn-primary svg,
.product-main .cta-row .btn-secondary svg{flex-shrink:0;}
.product-main .cta-row .btn-primary,
.product-main .cta-row .btn-secondary{
  padding:clamp(11px, 0.85vw, 17px) clamp(15px, 1.5vw, 32px);
  font-size:clamp(10px, 0.68vw, 12.5px);
  letter-spacing:0.08em; white-space:nowrap;}
.product-main .cta-row .btn-primary svg,
.product-main .cta-row .btn-secondary svg{
  width:clamp(15px, 1.15vw, 22px); height:clamp(15px, 1.15vw, 22px);
  margin-right:clamp(7px, 0.65vw, 12px);}

@media(max-width:860px){
  /* Handy: wie gehabt, grosse Tippflaeche — hier darf umgebrochen werden */
  .product-main .cta-row{gap:12px; flex-wrap:wrap;}
  .product-main .cta-row .btn-primary,
  .product-main .cta-row .btn-secondary{padding:15px 28px; font-size:11px;}
  .product-main .cta-row .btn-primary svg,
  .product-main .cta-row .btn-secondary svg{width:22px; height:22px; margin-right:12px;}
}

/* ===================================================================
   PRODUKTGALERIE ALS UEBERBLENDUNG
   Alle Bilder liegen deckungsgleich uebereinander und werden ineinander
   geblendet — nichts wandert, nichts scrollt. Weil die Produkte in den
   Dateien mittig sitzen, wirkt der Wechsel wie ein kurzer Film.
   Tempo und Dauer: FADE_EVERY / --fade in app.js bzw. hier.
   =================================================================== */
.gallery-main .xf{position:absolute; inset:0; padding:inherit;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .85s ease; pointer-events:none;}
.gallery-main .xf.on{opacity:1;}
.gallery-main .xf img{width:100%; height:100%; object-fit:contain;}
/* Wer Bewegung reduziert haben moechte, sieht nur das erste Bild. */
@media (prefers-reduced-motion: reduce){
  .gallery-main .xf{transition:none;}
}

/* ===================================================================
   SELECTOR-SEITE (selector.html)
   Der Konfigurator der Marke laeuft eingebettet in der eigenen Seite,
   damit Kopfzeile, Brotkrume und der Weg zurueck erhalten bleiben.
   Sperrt der Anbieter das Einbetten, tritt an die Stelle des Rahmens
   eine Erklaerung mit Knopf (.sel-frame.blocked).
   =================================================================== */
.sel-page{padding-top:34px; padding-bottom:70px;}
.sel-head{display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom:22px;}
.sel-head h1{font-size:clamp(26px, 3vw, 38px); margin:6px 0 10px;}
.sel-lead{font-size:14.5px; line-height:1.7; color:var(--ink-soft); max-width:60ch;}
.sel-ext{flex-shrink:0;}

.sel-frame{position:relative; border:1px solid var(--line); background:var(--card);
  height:max(760px, calc(100vh - var(--hh, 84px) - 24px)); overflow:hidden;}
.sel-frame iframe{width:100%; height:100%; border:0; display:block; opacity:0;
  transition:opacity .3s ease;}
.sel-frame.ok iframe{opacity:1;}
.sel-frame.blocked{height:auto;}
/* Geladen: die Hinweis-Ebene liegt sonst unsichtbar ueber dem Selektor
   und schluckt jeden Klick. */
.sel-frame.ok .sel-state{display:none;}
.sel-state{pointer-events:none;}
.sel-state a, .sel-frame.blocked .sel-state{pointer-events:auto;}
.sel-frame.blocked iframe{display:none;}

.sel-state{position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; text-align:center;
  padding:40px clamp(20px,5vw,80px); color:var(--ink-soft); font-size:13.5px;
  letter-spacing:0.04em;}
.sel-frame.blocked .sel-state{position:static; padding:44px clamp(20px,5vw,80px);}
.sel-state p{max-width:62ch; line-height:1.75; font-size:14px; letter-spacing:0;}

.sel-note{margin-top:16px; font-size:13px; color:var(--ink-soft);}
.sel-note a{color:var(--gold); border-bottom:1px solid var(--line);}
@media (hover:hover){.sel-note a:hover{border-bottom-color:var(--gold);}}

@media(max-width:860px){
  .sel-page{padding-top:24px;}
  .sel-head{gap:16px;}
  .sel-frame{height:min(72vh, 700px);}
}



/* Farbpalette auf der Produktseite (Les Couleurs® Le Corbusier) */
#cores-block{margin-top:22px;}
.cor-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(34px, 1fr));
  gap:7px; margin-top:12px; max-width:640px;}
.cor-grid span{display:block; aspect-ratio:1/1; border-radius:2px;
  border:1px solid rgba(0,0,0,0.12);}

/* Farbpalette in der Katalogzeile */
.cores-row{margin-top:18px;}
.cores-row .variant-label{display:block; margin-bottom:10px;}

/* Farbquadrat als Schaltfläche: zeigt den Drücker in dieser Farbe */
.cor-grid .cor-klick{cursor:pointer; transition:transform .12s, box-shadow .12s;}
@media (hover:hover){.cor-grid .cor-klick:hover{transform:scale(1.15); box-shadow:0 2px 8px rgba(0,0,0,0.35); z-index:1; position:relative;}}

/* Listagem de MARCAS: logos monocromáticos — escuros no modo claro,
   brancos no modo escuro. Todos, sem exceção.
   Os cabeçalhos das marcas mostram os logos originais. */
.b-logo img{filter:brightness(0) invert(1);}
html[data-theme="light"] .b-logo img{filter:brightness(0);}

/* Cabeçalhos das marcas: logos a cores, sem fundo branco, com o mesmo
   tamanho relativo da listagem de marcas (ampliado). */
.cat-block-head .bh-logo{width:auto; height:auto; background:none; padding:0;}
.cat-block-head .bh-logo img{height:calc(var(--lh, 20px) * 1.8); width:auto; max-width:300px; max-height:none;}
.bt-logo, html[data-theme="light"] .bt-logo{height:auto; max-width:none; background:none; padding:0;}
.bt-logo img{height:calc(var(--lh, 20px) * 1.8); width:auto; max-width:320px; max-height:none;}

/* Ecrãs grandes: os logos das marcas crescem com a largura do ecrã,
   para manterem a mesma presença que no portátil. */
@media (min-width:1500px){
  .cat-block-head .bh-logo img, .bt-logo img{height:calc(var(--lh, 20px) * 2.15);}
  .tree a.b.has-logo .b-logo img{height:calc(var(--lh, 20px) * 1.15);}
}
@media (min-width:1900px){
  .cat-block-head .bh-logo img, .bt-logo img{height:calc(var(--lh, 20px) * 2.5);}
  .tree a.b.has-logo .b-logo img{height:calc(var(--lh, 20px) * 1.3);}
}


/* Página do produto (computador): a galeria quadrada não passa de
   ~76% da altura da janela nem de 760 px — em ecrãs grandes deixava de
   ficar desproporcionada em relação ao texto. */
@media (min-width:1025px){
  .product-main{grid-template-columns:minmax(0, min(52%, 76vh, 760px)) minmax(0, 1fr);}
}
/* Descrição do produto em texto corrido: ocupa a largura da coluna
   (até ~80 caracteres por linha), alinhada com a lista de características. */
.product-main .desc{max-width:820px;}

/* Marken-Kopfzeilen: nur die schwarzen Logos werden im dunklen Design
   weiss. Farbige Logos (ARLU, athmer, WILKA, STRENGER, EVVA, Jakob,
   BMH, KWS, HELM) bleiben in Originalfarbe. */
.bt-logo img:is([alt="HEWI"],[alt="FritsJurgens"],[alt="SIMONSWERK"],[alt="FSB"],[alt="CES"]),
.cat-block-head .bh-logo img:is([alt="HEWI"],[alt="FritsJurgens"],[alt="SIMONSWERK"],[alt="FSB"],[alt="CES"]){filter:brightness(0) invert(1);}
html[data-theme="light"] .bt-logo img,
html[data-theme="light"] .cat-block-head .bh-logo img{filter:none;}

/* Direktlink zum Selektor / Konfigurator im Kategorie-Index */
/* Steht immer als letzter Eintrag der Kategorie und sieht bewusst
   anders aus als ein Produkt: kleiner Knopf mit Goldrahmen und Symbol. */
.tree a.g.g-sel{display:inline-flex; align-items:center; gap:7px; margin:10px 0 6px;
  padding:6px 12px 6px 10px; border:1px solid var(--gold); border-radius:3px;
  color:var(--gold); font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  background:rgba(201,161,90,0.08); line-height:1.3; width:auto;}
.tree a.g.g-sel::before{content:''; width:13px; height:13px; flex:none;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E") center/contain no-repeat;}
@media (hover:hover){ .tree a.g.g-sel:hover{background:var(--gold); color:var(--bg);} }