/* FRA Fenster GmbH — Stilvorlage für alle Seiten.
   Aus Variante A übernommen. Geändert: Markenfarben, Belegwerte der Abdunklung,
   Umbruch- und Silbentrennregeln, Menü für schmale Fenster. */

:root{
  --lime:#D9ED52;
  --pine:#252500;
  --pine-800:#30300D;
  --industrial:#515133;
  --concrete:#929280;
  --stone:#E9E9E5;
  --white:#FFFFFF;
  --ink:#252500;
  --muted:#515133;
  --line:rgba(37,37,0,.14);
  --line-dark:rgba(233,233,229,.16);

  --maxw:1440px;
  --gut:clamp(16px,4vw,64px);
  --gap:clamp(10px,1.1vw,16px);
  --r:2px;

  --h1:clamp(2.4rem,6.4vw,5.6rem);
  --h2:clamp(1.8rem,3.6vw,3.2rem);
  --tile:clamp(1.5rem,2.6vw,2.6rem);
  --body:clamp(1rem,1.05vw,1.125rem);

  /* Abdunklung über den Fotos, je Bild gemessen (siehe build-notes.md) */
  --scrim:.72;
  --veil:.74;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;hyphens:auto;-webkit-hyphens:auto}
body{
  margin:0;background:var(--stone);color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--body);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
p,li,address,dd,dt,td,th,figcaption{overflow-wrap:break-word}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{
  font-family:"Archivo","Inter",sans-serif;margin:0;line-height:1.02;
  letter-spacing:-.02em;font-weight:800;text-wrap:balance;hyphens:manual;
}
p{margin:0}
/* Fokusrahmen: Pine auf hellen Flächen. Dunkle Flächen, Fotos und Lime-Flächen
   stellen ihn am Ende der Datei um (Abschnitt «Fokus»). */
:focus-visible{outline:3px solid var(--pine);outline-offset:2px;border-radius:var(--r)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.eyebrow{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:.7rem;
  letter-spacing:.22em;text-transform:uppercase;hyphens:manual;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--lime);color:var(--pine);padding:14px 20px;font-weight:700;
}
.skip:focus{left:var(--gut);top:12px}

/* Anmerkungsziffern: die Schrift der Seite, keine eigene Auszeichnung */
sup.note{font-size:.62em;line-height:0;vertical-align:super;font-weight:inherit;letter-spacing:normal}
sup.note a{padding:6px 2px;color:inherit;position:relative;z-index:1}
sup.note a:hover{color:var(--lime)}

/* ---------- header ---------- */
.top{
  position:sticky;top:0;z-index:50;background:var(--pine);color:var(--stone);
  border-bottom:1px solid var(--line-dark);
}
.top__in{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,3vw,48px);min-height:84px}
.brand{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:10px 0;flex:0 0 auto;color:var(--lime);
}
.brand svg{height:40px;width:auto;flex:0 0 auto}
.brand__tag{
  display:none;font-family:"Archivo",sans-serif;font-weight:500;
  font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(233,233,229,.72);white-space:nowrap;
}
@media(min-width:1340px){.top .brand__tag{display:block}}
.foot .brand__tag{display:block}
.nav{
  order:3;flex:1 0 100%;display:flex;gap:22px;align-items:center;
  margin-inline:calc(var(--gut)*-1);padding:0 var(--gut) 2px;
  border-top:1px solid var(--line-dark);
}
.nav a{white-space:nowrap;padding-block:14px}
.nav a{
  font-family:"Archivo",sans-serif;font-weight:600;font-size:.82rem;
  letter-spacing:.09em;text-transform:uppercase;padding:8px 0;position:relative;
  color:rgba(233,233,229,.88);
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--lime);
  transition:right .28s ease;
}
.nav a:hover{color:var(--white)}
.nav a:hover::after{right:0}
.nav a.is-active{color:var(--white)}
.nav a.is-active::after{right:0}
.top__cta{
  margin-left:auto;display:inline-flex;align-items:center;gap:9px;
  background:var(--lime);color:var(--pine);
  font-family:"Archivo",sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.05em;
  padding:13px 18px;border-radius:var(--r);white-space:nowrap;
  transition:background .2s ease,transform .2s ease;
}
.top__cta:hover{background:var(--white);transform:translateY(-1px)}
.top__cta svg{width:15px;height:15px}
.top__cta .lbl{display:none}
@media(min-width:560px){.top__cta .lbl{display:inline}}

/* Menüknopf und Menütafel für schmale Fenster.
   Ohne JavaScript bleibt die Navigation als umbrechende Zeile sichtbar. */
.menu-btn{
  order:4;display:none;align-items:center;gap:10px;
  background:none;border:1px solid rgba(233,233,229,.45);color:var(--stone);
  font-family:"Archivo",sans-serif;font-weight:700;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;
  padding:12px 14px;border-radius:var(--r);cursor:pointer;
  transition:border-color .2s ease,color .2s ease;
}
.menu-btn:hover{border-color:var(--lime);color:var(--lime)}
.menu-btn svg{width:18px;height:18px}
.menu-btn .menu-btn__close{display:none}
.menu-btn[aria-expanded="true"] .menu-btn__open{display:none}
.menu-btn[aria-expanded="true"] .menu-btn__close{display:inline}
.menu-btn .lbl{display:none}
@media(min-width:560px){.menu-btn .lbl{display:inline}}

@media(max-width:1039.98px){
  .nav{flex-wrap:wrap;gap:0 22px}
  .nav__tel{display:none}
  .has-js .menu-btn{display:inline-flex}
  .has-js .nav{
    display:none;position:fixed;inset:84px 0 0 0;z-index:49;
    margin:0;padding:clamp(18px,5vw,36px) var(--gut) 48px;
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;
    background:var(--pine);border-top:1px solid var(--line-dark);
    overflow-y:auto;overscroll-behavior:contain;
  }
  .has-js .nav.is-open{display:flex}
  .has-js .nav a{
    font-size:1.15rem;letter-spacing:.06em;padding:18px 0;
    border-bottom:1px solid var(--line-dark);white-space:normal;
  }
  .has-js .nav a::after{bottom:-1px}
  .has-js .nav a.nav__tel{
    margin-top:28px;display:inline-flex;align-items:center;gap:10px;
    font-family:"Archivo",sans-serif;font-weight:700;font-size:1rem;
    letter-spacing:.04em;color:var(--lime);border-bottom:0;padding:0;
  }
  .has-js .nav a.nav__tel svg{width:18px;height:18px}
  .has-js .nav a.nav__tel::after{content:none}
  body.menu-open{overflow:hidden}
}

@media(min-width:1040px){
  .top__in{flex-wrap:nowrap}
  .nav{
    order:0;flex:0 1 auto;margin-left:auto;margin-inline-end:0;
    padding:0;border-top:0;gap:clamp(14px,1.7vw,30px);
  }
  .nav a{padding-block:8px}
  .nav__tel{display:none}
  .top__cta{margin-left:0}
  .menu-btn,.has-js .menu-btn{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--pine);color:var(--stone);overflow:hidden}
.hero__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:70% 40%;opacity:.8;
}
.hero__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(37,37,0,calc(var(--veil)*.63)) 0%,rgba(37,37,0,calc(var(--veil)*.21)) 30%,rgba(37,37,0,var(--veil)) 100%),
    linear-gradient(90deg,rgba(37,37,0,calc(var(--veil)*.88)) 0%,rgba(37,37,0,calc(var(--veil)*.5)) 45%,rgba(37,37,0,calc(var(--veil)*.06)) 100%);
}
.hero__in{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:min(82svh,760px);padding-block:clamp(88px,15vw,150px) clamp(36px,5vw,64px);
}
.hero .eyebrow{color:var(--lime);margin-bottom:clamp(18px,2.4vw,28px)}
.hero h1{font-size:var(--h1);max-width:16ch;color:var(--white)}
.hero h1 em{font-style:normal;color:var(--lime)}
.hero__lead{
  margin-top:clamp(20px,2.6vw,30px);max-width:52ch;
  font-size:clamp(1rem,1.25vw,1.24rem);color:rgba(233,233,229,.9);
}
.hero__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3.4vw,40px)}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"Archivo",sans-serif;font-weight:700;font-size:.86rem;letter-spacing:.06em;
  padding:16px 26px;border-radius:var(--r);border:2px solid transparent;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease;
}
.btn svg{width:16px;height:16px;flex:0 0 auto}
.btn--lime{background:var(--lime);color:var(--pine)}
.btn--lime:hover{background:var(--white);transform:translateY(-2px)}
.btn--ghost{border-color:rgba(233,233,229,.45);color:var(--stone)}
.btn--ghost:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-2px)}
.btn--dark{background:var(--pine);color:var(--stone)}
.btn--dark:hover{background:var(--pine-800);transform:translateY(-2px)}
.btn--outline{border-color:var(--pine);color:var(--pine)}
.btn--outline:hover{background:var(--pine);color:var(--stone);transform:translateY(-2px)}

/* strip under hero */
.strip{background:var(--lime);color:var(--pine)}
.strip__in{
  display:flex;flex-wrap:wrap;gap:8px clamp(20px,4vw,56px);
  padding-block:16px;align-items:center;
}
.strip span{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;
}
.strip span::before{content:"";width:7px;height:7px;background:var(--pine);flex:0 0 auto}

/* ---------- section head ---------- */
.sec{padding-block:clamp(52px,7vw,104px)}
.sec__head{
  display:grid;gap:clamp(14px,2vw,40px);margin-bottom:clamp(26px,3.4vw,44px);
  grid-template-columns:1fr;align-items:end;
}
.sec__head h2{font-size:var(--h2);max-width:18ch}
.sec__head p{max-width:46ch;color:var(--muted)}
.sec__head .eyebrow{color:var(--industrial);margin-bottom:12px;display:block}
@media(min-width:900px){.sec__head{grid-template-columns:1.25fr .9fr}}

/* ---------- tiles ---------- */
.tiles{display:grid;gap:var(--gap);grid-template-columns:1fr}
.tile{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(268px,56vw,340px);overflow:hidden;background:var(--pine);
  color:var(--white);border-radius:var(--r);isolation:isolate;
  --scrim-top:calc(var(--scrim)*.54);
  --scrim-mid:calc(var(--scrim)*.14);
}
.tile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .8s cubic-bezier(.2,.7,.25,1);
}
.tile::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(37,37,0,var(--scrim-top)) 0%,
    rgba(37,37,0,var(--scrim-mid)) 24%,
    rgba(37,37,0,calc(var(--scrim)*.89)) 56%,
    rgba(37,37,0,var(--scrim)) 100%);
  transition:opacity .4s ease;
}
.tile:hover img,.tile:focus-within img{transform:scale(1.055)}
.tile__body{padding:clamp(18px,2.2vw,30px)}
.tile__rule{width:34px;height:4px;background:var(--lime);margin-bottom:14px;transition:width .4s cubic-bezier(.2,.7,.25,1)}
.tile:hover .tile__rule,.tile:focus-within .tile__rule{width:72px}
.tile h3{font-size:var(--tile);letter-spacing:-.015em;overflow-wrap:break-word}
.tile p{
  margin-top:10px;max-width:38ch;font-size:.95rem;line-height:1.55;
  color:rgba(255,255,255,.86);
}
.tile__go{
  margin-top:16px;display:inline-flex;align-items:center;gap:9px;
  font-family:"Archivo",sans-serif;font-weight:700;font-size:.76rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--lime);
}
/* Die Schlusszeile ist der Link der Kachel und deckt die ganze Fläche,
   damit eine Anmerkungsziffer in der Kachel selbst ein Link sein kann. */
.tile__go::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
.tile__go svg{width:15px;height:15px;transition:transform .3s ease}
.tile:hover .tile__go svg{transform:translateX(5px)}
.badge{
  position:absolute;top:clamp(14px,1.8vw,22px);left:clamp(18px,2.2vw,30px);
  background:var(--lime);color:var(--pine);
  font-family:"Archivo",sans-serif;font-weight:800;font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;padding:7px 12px;border-radius:var(--r);
}

@media(min-width:680px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .t-fenster{grid-column:span 2;min-height:clamp(320px,44vw,420px)}
  .t-ueber{grid-column:span 2;min-height:clamp(300px,36vw,380px)}
}
@media(min-width:1040px){
  .tiles{
    grid-template-columns:repeat(12,1fr);
    grid-auto-rows:clamp(190px,15vw,215px);
  }
  .t-fenster{grid-column:1/8;grid-row:1/3;min-height:0}
  .t-tueren{grid-column:8/13;grid-row:1/2}
  .t-kuechen{grid-column:8/13;grid-row:2/3}
  .t-mehr{grid-column:1/5;grid-row:3/5}
  .t-ref{grid-column:5/10;grid-row:3/5}
  .t-ueber{grid-column:10/13;grid-row:3/5}
  .tile{min-height:0}
}

/* ---------- trust ---------- */
.trust{background:var(--pine);color:var(--stone)}
.trust .sec__head h2{color:var(--white)}
.trust .sec__head p{color:rgba(233,233,229,.72)}
.trust .sec__head .eyebrow{color:var(--lime)}
.cards{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media(min-width:920px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{
  background:var(--pine-800);padding:clamp(24px,2.6vw,36px);
  border-top:4px solid var(--lime);border-radius:var(--r);
  display:flex;flex-direction:column;gap:12px;
}
.card h3{font-size:clamp(1.15rem,1.5vw,1.4rem);color:var(--white)}
.card p{color:rgba(233,233,229,.78);font-size:.98rem}
.card__n{
  font-family:"Archivo",sans-serif;font-weight:800;font-size:2.6rem;line-height:1;
  color:var(--lime);letter-spacing:-.03em;
}
.facts{
  margin-top:clamp(26px,3vw,44px);display:grid;gap:1px;
  background:var(--line-dark);border:1px solid var(--line-dark);border-radius:var(--r);
  grid-template-columns:repeat(2,1fr);overflow:hidden;
}
@media(min-width:860px){.facts{grid-template-columns:repeat(4,1fr)}}
.fact{background:var(--pine);padding:clamp(20px,2.2vw,30px)}
.fact b{
  display:block;font-family:"Archivo",sans-serif;font-weight:800;
  font-size:clamp(1.6rem,2.4vw,2.2rem);color:var(--lime);letter-spacing:-.02em;line-height:1.05;
}
.fact span{
  display:block;margin-top:8px;font-size:.82rem;letter-spacing:.05em;
  color:rgba(233,233,229,.72);
}

/* ---------- cta ---------- */
.cta{background:var(--lime);color:var(--pine)}
.cta__in{
  display:grid;gap:clamp(22px,3vw,56px);grid-template-columns:1fr;align-items:center;
  padding-block:clamp(48px,6vw,88px);
}
@media(min-width:900px){.cta__in{grid-template-columns:1.1fr .9fr}}
.cta h2{font-size:var(--h2);max-width:15ch}
.cta p{margin-top:16px;max-width:44ch;color:rgba(37,37,0,.82)}
.cta__box{
  background:var(--pine);color:var(--stone);padding:clamp(24px,2.8vw,38px);
  border-radius:var(--r);display:flex;flex-direction:column;gap:18px;
}
.cta__row{display:flex;align-items:center;gap:14px}
.cta__row svg{width:20px;height:20px;color:var(--lime);flex:0 0 auto}
.cta__row a,.cta__row span{font-family:"Archivo",sans-serif;font-weight:700;font-size:clamp(1rem,1.4vw,1.2rem);letter-spacing:.01em}
.cta__row a:hover{color:var(--lime)}
.cta__row small{display:block;font-family:"Inter",sans-serif;font-weight:400;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(233,233,229,.6);margin-bottom:2px}
.cta__box .btn{justify-content:center;margin-top:4px}

/* ---------- footer ---------- */
.foot{background:var(--pine);color:rgba(233,233,229,.76);padding-block:clamp(48px,6vw,80px) 0}
.foot__grid{display:grid;gap:clamp(28px,3.4vw,48px);grid-template-columns:1fr}
@media(min-width:720px){.foot__grid{grid-template-columns:1.4fr 1fr 1fr}}
@media(min-width:1040px){.foot__grid{grid-template-columns:1.6fr 1fr 1fr 1.1fr}}
.foot h4{
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lime);font-weight:700;margin-bottom:16px;
}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot a:hover{color:var(--lime)}
.foot address{font-style:normal;line-height:1.8}
.foot .brand svg{height:36px}
.foot__note{margin-top:20px;max-width:34ch;font-size:.92rem;color:rgba(233,233,229,.6)}
.foot__line{margin-top:14px;line-height:1.6}
.foot__bar{
  margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--line-dark);
  padding-block:22px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  font-size:.8rem;color:rgba(233,233,229,.56);
}
.credit{font-size:.74rem;color:rgba(233,233,229,.68);line-height:1.7;padding-bottom:28px;max-width:80ch}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ================================================================
   Seitenregeln. Zusammengeführt aus den früheren <style data-page>-
   Blöcken der einzelnen Seiten; die Blöcke sind entfernt. Eine Regel,
   die mehrere Seiten teilen, steht im Abschnitt der ersten Seite, die
   sie verwendet. Regeln, die sich von Seite zu Seite unterscheiden,
   tragen die Seitenklasse des <body> (body.p-fenster und so fort).
   ================================================================ */

/* --- fenster.html --- */
body.p-fenster .hero--sub .hero__in{min-height:min(56svh,520px);padding-block:clamp(76px,12vw,124px) clamp(32px,4vw,56px)}
/* Nur die Übersichts- und Produktseiten; auf Küchen, Referenzen und Über uns
   läuft die Zeile wie in Variante A über die volle Breite. */
body.p-fenster .hero--sub h1,
body.p-fenster-kunststofffenster-ideal .hero--sub h1,
body.p-tueren .hero--sub h1,
body.p-tueren-lift-slide .hero--sub h1,
body.p-mehr-produkte .hero--sub h1{max-width:19ch}
.tiles--drei .tile{min-height:clamp(300px,30vw,400px)}
.spec-wrap{overflow-x:auto;margin-top:clamp(24px,3vw,38px)}
body.p-fenster .spec{width:100%;min-width:34rem;border-collapse:collapse;font-size:.95rem;text-align:left}
.spec th,.spec td{padding:13px 22px 13px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec thead th{font-family:"Archivo",sans-serif;font-weight:700;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--industrial)}
.spec tbody th{font-weight:600;color:var(--ink)}
.spec td{color:var(--muted)}
.trust .spec th,.trust .spec td{border-bottom-color:var(--line-dark)}
.trust .spec thead th{color:var(--lime)}
.trust .spec tbody th{color:var(--white)}
.trust .spec td{color:rgba(233,233,229,.78)}
@media(min-width:1040px){
  .tiles--drei{grid-template-columns:repeat(3,1fr);grid-auto-rows:auto}
}

/* --- fenster-kunststofffenster-ideal.html --- */
body.p-fenster-kunststofffenster-ideal .hero--sub .hero__in{min-height:min(56svh,520px);padding-block:clamp(76px,12vw,124px) clamp(32px,4vw,56px)}
body.p-fenster-kunststofffenster-ideal .spec{width:100%;min-width:34rem;border-collapse:collapse;font-size:.95rem;text-align:left}
/* Galerie .gal: siehe Abschnitt «Galerie» am Ende der Datei. */
.docs{list-style:none;margin:clamp(24px,3vw,36px) 0 0;padding:0;border-top:1px solid var(--line)}
.docs li{display:flex;flex-wrap:wrap;gap:4px 24px;justify-content:space-between;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.docs b{font-family:"Archivo",sans-serif;font-weight:700;font-size:1rem}
.docs span{font-size:.88rem;color:var(--muted)}

/* --- tueren.html --- */
body.p-tueren .hero--sub .hero__in{min-height:min(56svh,520px);padding-block:clamp(76px,12vw,124px) clamp(32px,4vw,56px)}
.tiles--zwei .tile{min-height:clamp(300px,30vw,400px)}
body.p-tueren .spec{width:100%;min-width:34rem;border-collapse:collapse;font-size:.95rem;text-align:left}
.act{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3.4vw,40px)}
@media(min-width:1040px){
  .tiles--zwei{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}
}

/* --- tueren-lift-slide.html --- */
body.p-tueren-lift-slide .hero--sub .hero__in{min-height:min(56svh,520px);padding-block:clamp(76px,12vw,124px) clamp(32px,4vw,56px)}
body.p-tueren-lift-slide .spec{width:100%;min-width:30rem;border-collapse:collapse;font-size:.95rem;text-align:left}

/* --- kuechen.html --- */
body.p-kuechen .hero--sub .hero__in{min-height:min(62svh,560px)}
body.p-kuechen .hero--sub .hero__img{object-position:62% 52%}
.split{display:grid;gap:clamp(20px,3vw,48px);grid-template-columns:1fr;align-items:center}
.split__media{margin:0}
.split__media img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r)}
.split__text h3{font-size:clamp(1.25rem,1.9vw,1.7rem);margin-bottom:16px}
.split__text p{margin-top:18px;color:var(--muted);max-width:46ch}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;max-width:46ch}
.ticks li{position:relative;padding-left:22px;line-height:1.6}
.ticks li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;background:var(--lime)}
.split__text .btn{margin-top:26px}
@media(max-width:1039.98px){
  body.p-kuechen .hero--sub .hero__veil{--veil:.82}
  body.p-kuechen .hero--sub .hero__img{object-position:30% 70%}
}
@media(min-width:900px){
  .split{grid-template-columns:1.02fr .98fr}
}

/* --- mehr-produkte.html --- */
body.p-mehr-produkte .hero--sub .hero__in{min-height:min(56svh,520px);padding-block:clamp(76px,12vw,124px) clamp(32px,4vw,56px)}

/* --- referenzen.html --- */
body.p-referenzen .hero--sub .hero__in{min-height:min(62svh,560px)}
body.p-referenzen .hero--sub .hero__img{object-position:50% 86%}
.ba{--pos:42%;max-width:920px;margin-inline:auto}
.ba__frame{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r); background:var(--pine)}
.ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fokus,50% 50%)}
/* Das Vorher-Bild steht im Markup zuerst (es wird zuerst vorgelesen) und liegt
   trotzdem über dem Nachher-Bild; Linie, Griff und Etiketten darüber. */
.ba__img--vorher{z-index:1;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba__line{position:absolute;z-index:2;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1px; background:var(--lime)}
.ba__tag{position:absolute;z-index:2;top:clamp(14px,1.8vw,22px); background:var(--pine);color:var(--stone); font-family:"Archivo",sans-serif;font-weight:800;font-size:.66rem; letter-spacing:.18em;text-transform:uppercase;padding:7px 12px;border-radius:var(--r)}
.ba__tag--vorher{left:clamp(14px,1.8vw,22px)}
.ba__tag--nachher{right:clamp(14px,1.8vw,22px);background:var(--lime);color:var(--pine)}
/* Ohne JavaScript bleibt der Vergleich ein ruhendes Bild: Regler und Griff
   erscheinen erst, wenn menu.js sie bedienen kann. */
.ba__ctl{display:none;margin-top:18px}
.has-js .ba__ctl{display:block}
/* Sichtbarer Name des Reglers. Die zweite, nur vorgelesene span (.vh) nennt die
   Bildstelle. «span:only-of-type» deckt Markup ohne Klasse mit einer einzigen span ab. */
.ba__ctl-text,.ba__ctl>span:only-of-type{display:block;font-family:"Archivo",sans-serif;font-weight:700;font-size:.72rem; letter-spacing:.16em;text-transform:uppercase;color:var(--industrial);margin-bottom:4px}
/* 44 px hohe Trefferfläche, sichtbar bleibt die 4 px starke Schiene */
.ba__ctl input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;
  background:linear-gradient(rgba(37,37,0,.22),rgba(37,37,0,.22)) center/100% 4px no-repeat;
  border-radius:var(--r);cursor:ew-resize}
.ba__ctl input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%; background:var(--lime);border:3px solid var(--pine);cursor:ew-resize}
.ba__ctl input::-moz-range-thumb{width:22px;height:22px;border-radius:50%; background:var(--lime);border:3px solid var(--pine);cursor:ew-resize}
@media(max-width:1039.98px){
  body.p-referenzen .hero--sub .hero__veil{--veil:.80}
  body.p-referenzen .hero--sub .hero__img{opacity:.55}
  .tiles--3 .tile:nth-of-type(1)::before{--scrim:.92;--scrim-top:.52;--scrim-mid:.70}
  .tiles--3 .tile:nth-of-type(2)::before{--scrim:.82;--scrim-top:.44;--scrim-mid:.48}
  .tiles--3 .tile:nth-of-type(3)::before{--scrim:.82;--scrim-top:.44;--scrim-mid:.48}
}
@media(min-width:1040px){
  .tiles--3{grid-template-columns:repeat(3,1fr);grid-auto-rows:auto}
  .tiles--3 .tile{min-height:clamp(320px,26vw,400px)}
}

/* --- ueber-uns.html --- */
body.p-ueber-uns .hero--sub .hero__in{min-height:min(62svh,560px)}
.prose{max-width:62ch;display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px)}
.prose p{color:var(--muted)}
.prose p:first-child{color:var(--ink);font-size:clamp(1.05rem,1.35vw,1.28rem);line-height:1.55}
.card__n--wort{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;line-height:1.4; font-weight:700}
@media(max-width:1039.98px){
  body.p-ueber-uns .hero--sub .hero__veil{--veil:.80}
  body.p-ueber-uns .hero--sub .hero__img{opacity:.66}
}

/* --- kontakt.html --- */
.sec--top{padding-block:clamp(40px,5vw,80px) clamp(52px,7vw,104px)}
.sec__head h1{font-size:var(--h2);max-width:18ch}
.kontakt{display:grid;gap:clamp(22px,3vw,48px);grid-template-columns:1fr;align-items:start}
.form__title{font-size:clamp(1.15rem,1.5vw,1.4rem)}
.form__hint{margin-top:10px;color:var(--muted);font-size:.9rem}
.form__grid{display:grid;gap:16px clamp(14px,1.6vw,20px);grid-template-columns:1fr;margin-top:clamp(20px,2.4vw,28px)}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:"Archivo",sans-serif;font-weight:700;font-size:.72rem; letter-spacing:.14em;text-transform:uppercase;color:var(--industrial)}
.field input,.field select,.field textarea{font-family:"Inter",sans-serif;font-size:1rem;color:var(--ink); background:var(--white);border:1px solid var(--line);border-radius:var(--r); padding:13px 14px;width:100%;transition:border-color .2s ease}
.field textarea{resize:vertical;min-height:140px;line-height:1.6}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--concrete)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--pine)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:22px;max-width:60ch}
.consent input{margin-top:4px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--pine)}
.consent label{font-size:.92rem;line-height:1.6;color:var(--muted)}
.consent a{text-decoration:underline;text-underline-offset:3px}
.form .btn{margin-top:24px}
.kontakt__side{display:flex;flex-direction:column;gap:var(--gap)}
.karte{background:var(--pine);color:var(--stone);border-radius:var(--r); padding:clamp(24px,2.8vw,34px);display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.karte__pin{width:34px;height:34px;color:var(--lime)}
.karte__adresse{font-family:"Archivo",sans-serif;font-weight:700;font-size:1.05rem;line-height:1.55}
.daten{margin:0;background:var(--pine-800);color:var(--stone);border-radius:var(--r); padding:clamp(24px,2.8vw,34px);border-top:4px solid var(--lime)}
.daten dt{font-family:"Archivo",sans-serif;font-weight:700;font-size:.7rem;letter-spacing:.16em; text-transform:uppercase;color:rgba(233,233,229,.66)}
.daten dd{margin:6px 0 20px;font-family:"Archivo",sans-serif;font-weight:700; font-size:1rem;overflow-wrap:break-word}
.daten dd:last-child{margin-bottom:0}
.daten a:hover{color:var(--lime)}
@media(min-width:900px){
  .kontakt{grid-template-columns:1.25fr .75fr}
}
@media(min-width:620px){
  .form__grid{grid-template-columns:1fr 1fr}
  .field--voll{grid-column:1/-1}
}

/* --- impressum.html --- */
.legal{max-width:68ch}
.legal h2{font-size:clamp(1.1rem,1.5vw,1.35rem);margin-top:clamp(34px,4vw,52px)}
.legal p{margin-top:14px;color:var(--muted)}
.legal a{text-decoration:underline;text-underline-offset:3px}
.legal__dl{margin:0;border-top:1px solid var(--line)}
.legal__row{display:grid;grid-template-columns:1fr;gap:4px; padding-block:16px;border-bottom:1px solid var(--line)}
.legal__dl dt{font-family:"Archivo",sans-serif;font-weight:700;font-size:.72rem; letter-spacing:.14em;text-transform:uppercase;color:var(--industrial)}
.legal__dl dd{margin:0;line-height:1.7}
@media(min-width:620px){
  .legal__row{grid-template-columns:15rem 1fr;gap:24px;align-items:baseline}
}

/* --- datenschutz.html --- */
.legal__stand{font-family:"Archivo",sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.16em; text-transform:uppercase;color:var(--industrial);margin-top:0}

/* --- review-notes.html --- */
body.p-review-notes .notes{max-width:78ch}
body.p-review-notes .notes__lead{color:var(--muted);max-width:62ch;margin-bottom:clamp(30px,4vw,48px)}
body.p-review-notes .notes h2{
  font-size:clamp(1.15rem,1.7vw,1.55rem);margin-top:clamp(40px,4.6vw,64px);
  padding-top:clamp(18px,2vw,26px);border-top:1px solid var(--line);
}
body.p-review-notes .notes h2:first-of-type{margin-top:0;border-top:0;padding-top:0}
body.p-review-notes .notes__file{
  display:block;margin-top:8px;font-family:"Inter",sans-serif;font-weight:400;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--industrial);
}
body.p-review-notes .notes__pages{
  list-style:none;margin:0;padding:0;display:grid;gap:0;
  border-top:1px solid var(--line);
}
body.p-review-notes .notes__pages li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;
  padding-block:13px;border-bottom:1px solid var(--line);
}
body.p-review-notes .notes__pages li>a:first-child{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:1rem;
  text-decoration:underline;text-underline-offset:4px;flex:1 1 14rem;
}
body.p-review-notes .notes__pages span{font-size:.86rem;color:var(--industrial)}
body.p-review-notes .notes__pages li>a:last-child{
  font-size:.86rem;color:var(--industrial);text-decoration:underline;text-underline-offset:3px;
}
body.p-review-notes .notes__pages a:hover{color:var(--pine)}
body.p-review-notes .notes__list{
  margin:clamp(20px,2.4vw,30px) 0 0;padding-left:1.9em;
  display:flex;flex-direction:column;gap:clamp(18px,2vw,26px);
}
body.p-review-notes .notes__list li{line-height:1.65;color:var(--muted)}
body.p-review-notes .notes__list li::marker{
  font-family:"Archivo",sans-serif;font-weight:800;color:var(--industrial);
}
body.p-review-notes .notes__list strong{color:var(--ink);font-weight:600}
body.p-review-notes .notes__list em{display:block;margin-top:8px;font-style:normal;font-weight:600;color:var(--ink)}
body.p-review-notes .notes__hints{
  list-style:none;margin:clamp(20px,2.4vw,30px) 0 0;padding:0;
  display:flex;flex-direction:column;gap:clamp(16px,1.8vw,22px);
}
body.p-review-notes .notes__hints li{
  position:relative;padding-left:22px;line-height:1.65;color:var(--muted);max-width:74ch;
}
body.p-review-notes .notes__hints li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;background:var(--lime);
}
body.p-review-notes .notes__hints strong{color:var(--ink);font-weight:600}
body.p-review-notes .notes code{font-size:.92em;background:rgba(37,37,0,.06);padding:1px 5px;border-radius:var(--r)}

/* ================================================================
   Gemeinsame Bausteine, Stand V3.
   Jede Regel ist entweder eine eigene, neue Klasse oder auf die
   Unterseiten beschränkt. Die Startseite ändert sich nur durch die
   Schaltfläche «Anmerkungen zum Entwurf», srcset und die Fokusrahmen.
   Aufbau und Markup: CONTRACT-v3.md.
   ================================================================ */

/* Nur für Screenreader sichtbar */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- Helle Karte .card--hell ----------
   Für Listen auf hellem Grund. Gleicher Radius, gleicher Innenabstand und
   gleiche Lime-Oberkante wie die dunkle Karte; weiss, damit sich die Karte
   vom Stone-Grund der Sektion abhebt. */
.card--hell{background:var(--white);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.card--hell h3{color:var(--pine)}
.card--hell p{color:var(--muted)}
.card--hell .card__n{color:var(--pine)}
.card--hell a{text-decoration:underline;text-underline-offset:3px}

/* ---------- Karten im dunklen Band: ohne Fläche ----------
   Auf den Unterseiten wird eine Karte im Pine-Band zur Spalte mit
   Lime-Linie: keine Fläche, kein Rahmen. Die Startseite trägt keine
   Seitenklasse am <body>; ihre drei nummerierten Karten bleiben gefüllt.
   Darum muss jede andere Seite <body class="p-…"> tragen. */
body[class*="p-"] .trust .cards{column-gap:clamp(28px,3.4vw,56px);row-gap:clamp(30px,3.4vw,44px)}
body[class*="p-"] .trust .card{
  background:none;border-radius:0;box-shadow:none;
  padding:clamp(18px,1.8vw,24px) 0 0;
}

/* ---------- Anker-Verweis .go--anker ----------
   Führt zu einem Abschnitt derselben Seite: Wortlaut «Mehr dazu», Pfeil
   nach unten. Der Pfeil nach rechts bleibt Verweisen auf andere Seiten. */
.go--anker svg{transition:transform .3s ease}
.tile:hover .go--anker svg,.tile:focus-within .go--anker svg,
.go--anker:hover svg,.go--anker:focus-visible svg{transform:translateY(4px)}

/* ---------- Brotkrumen .crumb (ersetzt die Dachzeile im Kopfbild) ---------- */
.crumb{margin-bottom:clamp(18px,2.4vw,28px)}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;row-gap:4px}
.crumb li{
  display:inline-flex;align-items:center;
  font-family:"Archivo",sans-serif;font-weight:700;font-size:.7rem;
  letter-spacing:.22em;text-transform:uppercase;hyphens:manual;
}
.crumb li+li::before{
  content:"\203A" / "";margin:0 .75em;font-size:1rem;line-height:1;letter-spacing:0;
  color:rgba(233,233,229,.6);
}
.crumb a{
  display:inline-block;padding:12px 0;margin:-12px 0;color:var(--lime);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;
}
.crumb a:hover{color:var(--white)}
.crumb [aria-current]{color:rgba(233,233,229,.92)}

/* ---------- Weitere Linien .sibs (Reihe unter dem Kontaktband) ---------- */
.sibs{padding-block:clamp(40px,5vw,72px)}
.sibs__head{margin-bottom:clamp(18px,2vw,26px)}
.sibs__head .eyebrow{display:block;color:var(--industrial);margin-bottom:10px}
.sibs__head h2{font-size:clamp(1.3rem,2vw,1.8rem);max-width:24ch}
.sibs__list{
  list-style:none;margin:0;padding:0;display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
}
.sib{
  display:grid;grid-template-columns:112px 1fr auto;align-items:center;gap:16px;
  min-height:104px;padding:10px 18px 10px 10px;
  background:var(--white);border-radius:var(--r);box-shadow:0 0 0 1px var(--line);
  transition:box-shadow .2s ease;
}
.sib:hover{box-shadow:0 0 0 2px var(--pine)}
.sib img{width:112px;height:84px;object-fit:cover;border-radius:var(--r)}
.sib__name{
  display:block;font-family:"Archivo",sans-serif;font-weight:700;font-size:1.02rem;
  line-height:1.25;color:var(--pine);hyphens:manual;overflow-wrap:break-word;
}
.sib__meta{display:block;margin-top:4px;font-size:.82rem;color:var(--muted)}
.sib svg{width:18px;height:18px;color:var(--pine);transition:transform .3s ease}
.sib:hover svg,.sib:focus-visible svg{transform:translateX(4px)}
.sib--alle{grid-template-columns:1fr auto;padding-left:22px}

/* ---------- Galerie .gal ----------
   Eine Spur mit Einrastpunkten für beliebig viele Bilder, feste Bühne 4:3.
   Mit einem Bild bleibt es eine Abbildung mit Bildunterschrift. Pfeile und
   Zähler setzt menu.js frei (.gal--mehr); ohne JavaScript bleibt die Spur
   mit sichtbarer Bildlaufleiste wischbar. */
.gal{position:relative;max-width:920px;container-type:inline-size}
.gal__track{
  position:relative;list-style:none;margin:0;padding:0;
  display:flex;gap:var(--gap);overflow-x:auto;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:thin;scrollbar-color:var(--concrete) transparent;
}
.has-js .gal--mehr .gal__track,.gal--einzeln .gal__track{scrollbar-width:none}
.has-js .gal--mehr .gal__track::-webkit-scrollbar,.gal--einzeln .gal__track::-webkit-scrollbar{display:none}
.gal__slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.gal__fig{margin:0}
.gal__zoom{
  position:relative;display:block;overflow:hidden;border-radius:var(--r);
  background:var(--pine);cursor:zoom-in;
}
.gal__img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  object-position:var(--fokus,50% 50%);
}
.gal__cap{
  margin-top:12px;min-height:3.1em;max-width:62ch;
  font-size:.88rem;line-height:1.55;color:var(--muted);
}
.gal__btn{
  display:none;position:absolute;z-index:2;top:37.5cqw;transform:translateY(-50%);
  width:48px;height:48px;place-items:center;padding:0;
  border:0;border-radius:var(--r);background:rgba(37,37,0,.86);color:var(--lime);
  cursor:pointer;transition:background .2s ease,color .2s ease;
}
.gal__btn svg{width:22px;height:22px}
.gal__btn--prev{left:14px}
.gal__btn--next{right:14px}
.gal__btn:hover{background:var(--pine);color:var(--white)}
/* Gedimmt werden Fläche und Pfeil, nicht das Element: sonst verblasst auch der
   Fokusrahmen auf einem Knopf, der am Anfang oder Ende den Fokus behält. */
.gal__btn[aria-disabled="true"],.gal__btn[aria-disabled="true"]:hover{background:rgba(37,37,0,.33);color:var(--lime);cursor:default}
.gal__btn[aria-disabled="true"] svg{opacity:.38}
.gal__count{
  display:none;position:absolute;z-index:2;top:clamp(12px,1.6vw,18px);right:clamp(12px,1.6vw,18px);
  margin:0;padding:7px 12px;border-radius:var(--r);background:var(--pine);color:var(--stone);
  font-family:"Archivo",sans-serif;font-weight:800;font-size:.66rem;line-height:1.4;
  letter-spacing:.18em;text-transform:uppercase;pointer-events:none;
}
/* Zähler und Pfeile nur, wenn menu.js sie bedienen kann. Mit feinem Zeiger
   (Maus, Trackpad) auch unter 680 px, etwa bei stark vergrössertem Text. */
.has-js .gal--mehr .gal__count{display:block}
@media(min-width:680px),(hover:hover) and (pointer:fine){.has-js .gal--mehr .gal__btn{display:grid}}

/* Grossansicht, von menu.js als <dialog class="lb"> angelegt */
.lb{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:clamp(72px,8vw,88px) clamp(16px,4vw,48px) clamp(20px,3vw,40px);
  border:0;background:transparent;color:var(--stone);overflow:auto;
}
.lb[open]{display:flex;align-items:center;justify-content:center}
.lb::backdrop{background:var(--pine)}
.lb__fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%}
.lb__img{
  display:block;width:auto;height:auto;max-width:100%;
  max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px);
  object-fit:contain;border-radius:var(--r);
}
.lb__cap{max-width:62ch;text-align:center;font-size:.92rem;line-height:1.55;color:rgba(233,233,229,.86)}
.lb__close{
  position:absolute;top:clamp(14px,2vw,24px);right:clamp(14px,2vw,24px);
  display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;
  border:0;border-radius:var(--r);background:var(--lime);color:var(--pine);cursor:pointer;
  font-family:"Archivo",sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
}
.lb__close svg{width:18px;height:18px}
.lb__close:hover{background:var(--white)}
html.lb-open{overflow:hidden}

/* ---------- Vorher-Nachher: Griff auf der Trennlinie ----------
   Der Griff ist nur für Maus und Finger (aria-hidden); bedient wird mit dem
   Regler darunter. Hat der Regler den Fokus, trägt der Griff den Rahmen. */
.ba__grip{
  display:none;position:absolute;z-index:2;top:50%;left:var(--pos);
  width:48px;height:48px;margin:-24px 0 0 -24px;place-items:center;
  border-radius:50%;background:var(--lime);color:var(--pine);border:3px solid var(--pine);
  box-shadow:0 2px 12px rgba(37,37,0,.35);cursor:ew-resize;touch-action:none;
  transition:transform .15s ease;
}
.has-js .ba__grip{display:grid}
.ba__grip svg{width:24px;height:24px}
.ba__grip:hover,.ba.is-drag .ba__grip{transform:scale(1.08)}
.ba.is-drag{cursor:ew-resize;user-select:none;-webkit-user-select:none}
.ba:has(.ba__ctl input:focus-visible) .ba__grip{
  outline:3px solid var(--lime);outline-offset:2px;box-shadow:0 0 0 7px var(--pine);
}

/* ---------- Bildstellen ----------
   Jede Bildstelle zeigt kein Bild, ein Einzelbild (figure.mb--single),
   eine Bildstrecke (.gal) oder einen Vorher-Nachher-Vergleich (.ba).
   Ohne Bild steht kein leerer Rahmen: die Zeile wird zu .pos--ohne,
   der Zweispalter zu .split--ohne. Markup: CONTRACT-v3.md §14.
   sizes für Bilder neben Text (.pos__media, .split__media):
   (min-width: 1440px) 760px, (min-width: 920px) 55vw, 92vw */

/* Einzelbild: dieselbe Bühne 4:3 und Bildunterschrift wie die Galerie */
.mb{margin:0;max-width:920px}
.mb .gal__zoom{display:block}

/* Zeichnungen und Schnitte werden nicht beschnitten: ganz sichtbar auf Weiss */
.gal__img--zeichnung{object-fit:contain;background:#fff}
.lb__img--zeichnung{background:#fff}

/* Position mit Bild: Text links (5), Bild rechts (7), oben bündig.
   Unter 920 px: Titel, Text, Bild untereinander. */
.pos-list{margin:0;padding:0}
.pos{
  display:grid;grid-template-columns:1fr;gap:clamp(18px,2.4vw,28px);
  padding-block:clamp(28px,3.4vw,48px);border-top:1px solid var(--line);
}
.pos__text{min-width:0}
.pos__text h3{font-size:clamp(1.25rem,1.9vw,1.7rem)}
.pos__text p{margin-top:14px;color:var(--muted);max-width:46ch}
.pos__text .ticks{margin-top:16px}
.pos__text .btn{margin-top:22px}
.pos__n{
  display:block;margin-bottom:12px;font-family:"Archivo",sans-serif;font-weight:800;
  font-size:2.6rem;line-height:1;letter-spacing:-.03em;color:var(--pine);
}
.pos__media{min-width:0}
.pos__media .gal,.pos__media .mb,.pos__media .ba{max-width:none;margin-inline:0}
@media(min-width:920px){
  .pos{grid-template-columns:5fr 7fr;column-gap:clamp(28px,3.4vw,56px);align-items:start}
  /* Ohne Bild: Nummer und Titel links, Text rechts, im selben Raster */
  .pos--ohne .pos__text{
    grid-column:1/-1;display:grid;grid-template-columns:5fr 7fr;
    column-gap:clamp(28px,3.4vw,56px);align-items:start;
  }
  .pos--ohne .pos__text>*{grid-column:2}
  .pos--ohne .pos__text>h3,.pos--ohne .pos__text>.pos__n{grid-column:1}
  .pos--ohne .pos__text>h3+*{margin-top:0}
  .pos--ohne .pos__text>.btn{justify-self:start}
}

/* Zweispalter ohne Bild: Titel links, Aufzählung, Text und Knopf rechts */
@media(min-width:900px){
  .split--ohne{grid-template-columns:1fr}
  .split--ohne .split__text{
    display:grid;grid-template-columns:5fr 7fr;column-gap:clamp(20px,3vw,48px);align-items:start;
  }
  .split--ohne .split__text>*{grid-column:2}
  .split--ohne .split__text>h3{grid-column:1;margin-bottom:0}
  .split--ohne .split__text>h3+*{margin-top:0}
  .split--ohne .split__text>.btn{justify-self:start}
}

/* Im dunklen Band (.trust): alles, was nicht auf einem Foto liegt */
.trust .pos{border-top-color:var(--line-dark)}
.trust .pos__text h3{color:var(--white)}
.trust .pos__text p{color:rgba(233,233,229,.78)}
.trust .pos__n{color:var(--lime)}
.trust .gal__cap{color:rgba(233,233,229,.78)}
/* Schiene und Bildlaufleiste mit .42: 3,4:1 gegen Pine (Nicht-Text-Kontrast 3:1) */
.trust .gal__track{scrollbar-color:rgba(233,233,229,.42) transparent}
.trust .ba__ctl-text{color:var(--lime)}
.trust .ba__ctl input{background-image:linear-gradient(rgba(233,233,229,.42),rgba(233,233,229,.42))}
.trust .ba__ctl input::-webkit-slider-thumb{border-color:var(--stone)}
.trust .ba__ctl input::-moz-range-thumb{border-color:var(--stone)}

/* ---------- Technische Daten auf hellem Grund ----------
   .spec-box umschliesst Hinweis und Tabelle. menu.js setzt .is-scroll, sobald
   die Tabelle breiter ist als der Platz, und .is-end am rechten Rand. */
.spec{width:100%;min-width:34rem;border-collapse:collapse;font-size:.95rem;text-align:left}
.spec-box{position:relative;margin-top:clamp(24px,3vw,38px);--hint-h:0px}
.spec-box .spec-wrap{margin-top:0}
.spec-hint{
  display:none;height:1.75rem;margin:0 0 .5rem;align-items:center;justify-content:flex-end;gap:6px;
  font-family:"Archivo",sans-serif;font-weight:700;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--industrial);
}
.spec-hint svg{width:16px;height:16px;flex:0 0 auto}
.spec-box::after{
  content:"";position:absolute;top:var(--hint-h);right:0;bottom:0;width:56px;pointer-events:none;
  background:linear-gradient(90deg,rgba(233,233,229,0),var(--stone) 88%);
  opacity:0;transition:opacity .2s ease;
}
.spec-box.is-scroll{--hint-h:2.25rem}
.spec-box.is-scroll .spec-hint{display:flex}
.spec-box.is-scroll::after{opacity:1}
.spec-box.is-scroll.is-end::after{opacity:0}
@media(max-width:640px){
  html:not(.has-js) .spec-box{--hint-h:2.25rem}
  html:not(.has-js) .spec-hint{display:flex}
  html:not(.has-js) .spec-box::after{opacity:1}
}

/* ---------- Anmerkungen zum Entwurf ----------
   Die Ziffern sind im Grundzustand verborgen und werden in der Fusszeile
   bewusst eingeblendet. Ohne JavaScript bleiben sie sichtbar, weil die
   Schaltfläche dann nichts schalten kann. */
html.has-js:not(.notes-on) sup.note{display:none}
.notes-toggle{
  display:none;margin:0 0 28px;padding:12px 14px;
  border:1px dashed rgba(233,233,229,.38);border-radius:var(--r);
  width:max-content;max-width:100%;
}
.has-js .notes-toggle{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.notes-toggle__tag{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(233,233,229,.68);
}
.notes-toggle__btn{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;
  background:none;border:1px solid rgba(233,233,229,.45);border-radius:var(--r);
  color:var(--stone);cursor:pointer;
  font-family:"Archivo",sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.06em;
  transition:border-color .2s ease,color .2s ease;
}
.notes-toggle__btn:hover{border-color:var(--lime);color:var(--lime)}
html.notes-on .notes-toggle__btn{border-color:var(--lime);color:var(--lime)}
/* Abstand nach unten innerhalb der Fusszeile, damit kein Stone-Streifen entsteht */
.foot .notes-toggle{margin-bottom:0}
.has-js .foot:has(.notes-toggle){padding-bottom:28px}

/* ---------- Fokus ----------
   Regel: Pine-Rahmen auf hellen Flächen (Stone, Weiss, Lime), Lime-Rahmen
   auf dunklen Flächen, auf Fotos Lime mit Pine-Saum innen und aussen.
   3 px, 2 px Abstand. Gemessene Kontraste in CONTRACT-v3.md. */
.skip:focus-visible,
.top :focus-visible,.trust :focus-visible,.foot :focus-visible,
.card :focus-visible,.karte :focus-visible,.daten :focus-visible,
.lb :focus-visible{outline-color:var(--lime)}
.strip :focus-visible,.cta :focus-visible,.badge :focus-visible,
.card--hell :focus-visible,.trust .card--hell :focus-visible{outline-color:var(--pine)}
.cta .cta__box :focus-visible{outline-color:var(--lime)}
/* auf Fotos: der Pine-Saum füllt den Abstand und umgibt den Rahmen */
.hero :focus-visible,.tile :focus-visible,.gal :focus-visible,.ba__frame :focus-visible{
  outline-color:var(--lime);box-shadow:0 0 0 7px var(--pine);
}
.tile .badge :focus-visible{outline-color:var(--pine);box-shadow:none}
/* Ein Rahmen ausserhalb des Bildes würde von der Spur abgeschnitten:
   in der Galerie liegt er innen auf dem Bild. */
.gal .gal__zoom:focus-visible,.mb .gal__zoom:focus-visible{outline:none;box-shadow:none}
.gal__zoom:focus-visible::after{
  content:"";position:absolute;inset:7px;border:3px solid var(--lime);border-radius:var(--r);
  box-shadow:0 0 0 3px var(--pine),inset 0 0 0 3px var(--pine);pointer-events:none;
}
/* Bildlaufbereich der Tabelle und Regler liegen auf Stone */
.spec-wrap:focus-visible,.ba__ctl input:focus-visible{outline-color:var(--pine);box-shadow:none}
.trust .spec-wrap:focus-visible,.trust .ba__ctl input:focus-visible{outline-color:var(--lime)}
/* Formularfelder: Rahmen zusätzlich zur Pine-Kante des Feldes */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,
.consent input:focus-visible{outline-color:var(--pine)}

/* ================================================================
   Seitenregeln V3. Zusammengeführt aus den <style data-page>-Blöcken
   der V3-Seiten; die Blöcke sind entfernt. Sie stehen am Ende der Datei,
   weil sie vorher nach styles.css geladen wurden und so dieselbe
   Reihenfolge behalten. Jede Regel trägt die Seitenklasse des <body>.
   ================================================================ */

/* --- tueren.html --- */
/* Schaltflächen in den hellen Produktkarten: ohne die Unterstreichung, die .card--hell für Textverweise setzt, und unten bündig. */
body.p-tueren .card--hell .btn{text-decoration:none}
body.p-tueren .card--hell .act{margin-top:auto;padding-top:clamp(4px,1vw,12px)}

/* --- tueren-lift-slide.html --- */
/* Unter 1040 px liegt der Vorspann über der hellen Wand des Kopfbilds; gemessen 2,2:1. Mit diesen Werten 4,5:1. */
@media(max-width:1039.98px){
  body.p-tueren-lift-slide .hero--sub .hero__veil{--veil:.86}
  body.p-tueren-lift-slide .hero--sub .hero__img{opacity:.5}
}

/* --- fenster-energeto.html --- */
/* Kopfbild der Produktseite energeto: dieselben Masse wie die Produktseite IDEAL. */
body.p-fenster-energeto .hero--sub .hero__in{min-height:min(56svh,520px);padding-block:clamp(76px,12vw,124px) clamp(32px,4vw,56px)}
body.p-fenster-energeto .hero--sub h1{max-width:19ch}

/* --- tueren-smart-slide.html --- */
/* Kopfband und Titelbreite wie auf tueren-lift-slide.html. */
body.p-tueren-smart-slide .hero--sub .hero__in{min-height:min(56svh,520px);padding-block:clamp(76px,12vw,124px) clamp(32px,4vw,56px)}
body.p-tueren-smart-slide .hero--sub h1{max-width:19ch}
@media(max-width:1039.98px){
  body.p-tueren-smart-slide .hero--sub .hero__veil{--veil:.80}
  body.p-tueren-smart-slide .hero--sub .hero__img{opacity:.6}
}

/* --- kontakt.html --- */
/* Kopfbild der Kontaktseite: dieselben Masse wie die übrigen Unterseiten. */
body.p-kontakt .hero--sub .hero__in{min-height:min(56svh,520px);padding-block:clamp(76px,12vw,124px) clamp(32px,4vw,56px)}
body.p-kontakt .hero--sub h1{max-width:19ch}
body.p-kontakt .hero__img{object-position:50% 62%}

/* --- mp-glas-verglasung.html --- */
/* Kopfbild der Gruppenseite: dieselben Masse wie Mehr Produkte. */
body.p-mp-glas-verglasung .hero--sub .hero__in{min-height:min(56svh,520px);padding-block:clamp(76px,12vw,124px) clamp(32px,4vw,56px)}
body.p-mp-glas-verglasung .hero--sub h1{max-width:19ch}

/* --- mp-sonnenschutz.html --- */
/* Kopfbild der Gruppenseite: dieselben Masse wie Mehr Produkte. */
body.p-mp-sonnenschutz .hero--sub .hero__in{min-height:min(56svh,520px);padding-block:clamp(76px,12vw,124px) clamp(32px,4vw,56px)}
body.p-mp-sonnenschutz .hero--sub h1{max-width:19ch}
body.p-mp-sonnenschutz .hero__img{object-position:50% 38%}

/* --- mp-innenausbau.html --- */
/* Kopfbild der Gruppenseite: dieselben Masse wie Mehr Produkte. */
body.p-mp-innenausbau .hero--sub .hero__in{min-height:min(56svh,520px);padding-block:clamp(76px,12vw,124px) clamp(32px,4vw,56px)}
body.p-mp-innenausbau .hero--sub h1{max-width:19ch}

/* --- mp-aussenbereich.html --- */
/* Kopfbild der Gruppenseite: dieselben Masse wie Mehr Produkte. */
body.p-mp-aussenbereich .hero--sub .hero__in{min-height:min(56svh,520px);padding-block:clamp(76px,12vw,124px) clamp(32px,4vw,56px)}
body.p-mp-aussenbereich .hero--sub h1{max-width:19ch}

/* --- alle Unterseiten --- */
/* Die Telefonnummer bricht im Fliesstext nicht um (Datenschutz, Impressum). */
body[class*="p-"] a[href^="tel:"]{white-space:nowrap}
/* Produktnamen mit Bindestrich bleiben in der Reihe «Weitere Linien» ganz. */
.sib__name .nw{white-space:nowrap}