/* ============================================================
   Armevo Metallbau — Basis-Stylesheet
   Designsprache aus dem freigegebenen Entwurf (Papier/Serif/Mono).
   Farben, Radien und Abstaende kommen aus theme.liquid (Theme-Editor).
   ============================================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* hidden muss IMMER stechen: sonst haelt ein eigenes display
   (z. B. .mst-dialog{display:flex}) das Element sichtbar und
   Fenster lassen sich nicht mehr schliessen (25.08.2026). */
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-weight:400;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
/* Markierter Text: warmer Sandton statt tiefschwarz - die harte
   Umkehrung war beim Lesen unangenehm (Raphael 31.08.2026) */
::selection{background:#DED2B4;color:var(--ink)}
::-moz-selection{background:#DED2B4;color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* --- Typografie ------------------------------------------------ */
.display{font-family:var(--serif);font-weight:400;line-height:.95;letter-spacing:-.02em}
.display i,.italic{font-style:italic}
.label{font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.18em;color:#5E5B54;font-weight:500}
h1,h2,h3,h4{font-weight:400}
.h-xl{font-size:clamp(48px,8.5vw,128px)}
.h-lg{font-size:clamp(40px,6.5vw,104px)}
.h-md{font-size:clamp(30px,3.4vw,48px)}
.lead{font-size:19px;line-height:1.6;color:var(--ink-soft)}
.lead .italic{font-family:var(--serif);font-size:22px;color:var(--ink)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

/* --- Raster ---------------------------------------------------- */
.section{padding:clamp(72px,10vw,140px) var(--pad);position:relative}
.section--warm{background:var(--bg-warm)}
.section--dark{background:var(--dark-bg);color:var(--dark-ink)}
.section--dark .label{color:rgba(239,235,224,.78)}
.section--tight{padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(48px,6vw,80px)}
.wrap{max-width:1560px;margin:0 auto}
.section-head{display:grid;grid-template-columns:1fr 2fr;gap:48px;
  margin-bottom:clamp(40px,6vw,80px);align-items:end}
.section-head h2{max-width:900px}

/* --- Buttons --------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 28px;
  border-radius:var(--btn-radius);font-size:14px;transition:all .25s;
  border:1px solid var(--ink);background:transparent;color:var(--ink);text-align:center}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--bg)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn .arrow{transition:transform .25s}
.btn:hover .arrow{transform:translateX(4px)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.btn-full{width:100%}
.section--dark .btn{border-color:var(--dark-ink);color:var(--dark-ink)}
.section--dark .btn-primary{background:var(--dark-ink);color:var(--dark-bg)}

/* --- Kopfzeile ------------------------------------------------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;padding:14px var(--pad);
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:var(--bg-blur);border-bottom:1px solid transparent;transition:border-color .3s}
.site-header.scrolled{border-bottom-color:var(--line)}
.logo{display:flex;align-items:center;gap:12px}
.logo-voll{height:68px;width:auto;display:block;transition:transform .25s}
.logo:hover .logo-voll{transform:scale(1.04)}
@media (max-width:800px){.logo-voll{height:52px}}
.logo-mark{width:30px;height:30px;object-fit:contain}
.logo-text{font-family:var(--serif);font-size:22px;letter-spacing:-.01em;line-height:1}
.logo-text small{display:block;font-family:var(--mono);font-size:9px;text-transform:uppercase;
  letter-spacing:.22em;color:var(--muted);margin-top:2px}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-size:13px;color:var(--ink-soft);transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink)}
.header-tools{display:flex;align-items:center;gap:14px}
.nav-cta{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.15em;
  padding:10px 18px;border:1px solid var(--ink);border-radius:999px;transition:all .25s;white-space:nowrap}
.nav-cta:hover{background:var(--ink);color:var(--bg)}
.cart-link{position:relative;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.15em}
.cart-count{font-variant-numeric:tabular-nums}
.lang-switch{display:flex;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted)}
.lang-switch a[aria-current]{color:var(--ink)}
.nav-toggle{display:none;width:34px;height:34px;align-items:center;justify-content:center}
.nav-toggle span{display:block;width:20px;height:1px;background:var(--ink);position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:20px;height:1px;background:var(--ink)}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}

/* --- Hero ------------------------------------------------------ */
.hero{min-height:100svh;display:grid;grid-template-columns:1.1fr 1fr}
.hero-text{padding:clamp(120px,14vh,170px) var(--pad) 72px;display:flex;
  flex-direction:column;justify-content:space-between;gap:40px;z-index:2}
.hero-image{position:relative;overflow:hidden;background:#2a2520}
.hero-image img{width:100%;height:100%;object-fit:cover;animation:heroZoom 18s ease-in-out infinite alternate}
@keyframes heroZoom{from{transform:scale(1.05)}to{transform:scale(1.12)}}
.hero-meta{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.hero-meta .dot{width:6px;height:6px;background:var(--ink);border-radius:50%}
.hero h1{margin-bottom:28px}
.hero h1 .accent{font-style:italic;color:var(--ink-soft)}
.hero-sub{max-width:480px;font-size:17px;color:var(--ink-soft);margin-bottom:28px}
.hero-facts{display:flex;gap:36px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:22px}
.hero-facts div .label{display:block;margin-bottom:6px}
.hero-facts div strong{font-family:var(--serif);font-size:26px;font-weight:400}

/* --- Laufband -------------------------------------------------- */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:20px 0;overflow:hidden;white-space:nowrap;background:var(--bg-warm)}
.ticker-track{display:inline-block;animation:tickerScroll 45s linear infinite}
.ticker-track span{font-family:var(--serif);font-size:clamp(20px,2.4vw,30px);font-style:italic;
  color:var(--ink-soft);padding:0 28px}
.ticker-track span::after{content:"\2726";margin-left:52px;font-style:normal;color:var(--muted);
  font-size:15px;vertical-align:5px}
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track,.hero-image img{animation:none}}

/* --- Zweispalter Text/Bild ------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.split p{font-size:21px;line-height:1.55;color:var(--ink-soft);margin-bottom:24px;max-width:560px}
.split p .italic{font-family:var(--serif);font-size:24px;color:var(--ink)}
.frame{aspect-ratio:3/4;overflow:hidden;position:relative;background:var(--bg-warm)}
.frame img{width:100%;height:100%;object-fit:cover}
.frame video{width:100%;height:100%;object-fit:cover;display:block}
.frame .caption{position:absolute;bottom:16px;left:16px;background:var(--bg);padding:8px 14px;
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.15em}

/* --- Leistungen ------------------------------------------------ */
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.service{background:var(--bg);display:flex;flex-direction:column;transition:background .3s}
.service-img{aspect-ratio:3/2;overflow:hidden;background:var(--bg-warm)}
.service-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.service:hover .service-img img{transform:scale(1.03)}
.service-body{padding:30px 34px 40px;display:grid;grid-template-columns:44px 1fr;gap:16px;flex:1;align-items:start}
.service:hover{background:var(--paper)}
.service-num{font-family:var(--mono);font-size:13px;color:var(--muted);padding-top:6px}
.service h3{font-family:var(--serif);font-size:clamp(26px,2.6vw,34px);line-height:1.1;margin-bottom:12px}
.service h3 .italic{color:var(--ink-soft);display:block;font-size:.8em}
.service p{color:var(--ink-soft);font-size:15px;max-width:440px}

/* Bildwechsel beim Darueberfahren: mehrere Bilder in einer Karte,
   das erste steht, die weiteren blenden bei Maus darueber langsam
   durch (Raphael 27.08.2026) */
[data-wechsel]{position:relative}
[data-wechsel] img{transition:opacity .8s ease}
[data-wechsel] img:not(:first-child){position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;opacity:0}
[data-wechsel] img.aktiv{opacity:1}
[data-wechsel] img:first-child.aktiv~img{opacity:0}

/* --- Werkstatt (dunkel) ---------------------------------------- */
.werkstatt-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(32px,5vw,80px);align-items:start}
.specs{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--dark-line)}
.specs--breit{grid-template-columns:repeat(3,1fr)}
.specs--breit .spec-item:nth-child(2n){border-right:1px solid var(--dark-line)}
.specs--breit .spec-item:nth-child(3n){border-right:none}
@media (max-width:800px){.specs--breit{grid-template-columns:1fr}
  .specs--breit .spec-item,.specs--breit .spec-item:nth-child(2n){border-right:none}}
.spec-item{padding:30px 20px;text-align:center;border-bottom:1px solid var(--dark-line);
  border-right:1px solid var(--dark-line)}
.spec-item:nth-child(2n){border-right:none}
.spec-item .label{display:block;margin-bottom:12px}
.spec-item .value{font-family:var(--serif);font-size:clamp(28px,3vw,38px);line-height:1;margin-bottom:8px}
.spec-item .unit{font-family:var(--mono);font-size:12px;color:rgba(239,235,224,.6)}
.spec-item .desc{font-size:13px;color:rgba(239,235,224,.55);margin-top:10px;line-height:1.4}

/* --- Referenzen ------------------------------------------------ */
.refs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ref-card{background:var(--bg-warm);border:1px solid var(--line);overflow:hidden;position:relative;
  aspect-ratio:4/3;transition:transform .4s ease}
.ref-card:hover{transform:translateY(-4px)}
.ref-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
img.fokus-oben{object-position:50% 18%}
img.fokus-leicht-oben{object-position:50% 22%}
img.fokus-mitte-oben{object-position:50% 35%}
img.fokus-unten{object-position:50% 88%}
/* Hochformat-Fotos in der 4:3-Karte: Bildausschnitt am Motiv gemessen
   (Design-Objekte, 30.08.2026) */
img.fokus-52{object-position:50% 52%}
img.fokus-60{object-position:50% 60%}
img.fokus-66{object-position:50% 66%}
.ref-card:hover img{transform:scale(1.04)}
.ref-overlay{position:absolute;inset:0;padding:20px;display:flex;flex-direction:column;
  justify-content:flex-end;opacity:0;transition:opacity .3s;
  background:linear-gradient(to top,rgba(0,0,0,.68),rgba(0,0,0,0) 52%)}
.ref-card:hover .ref-overlay,.ref-card:focus-within .ref-overlay{opacity:1}
.ref-overlay .ref-title{color:#fff;font-family:var(--serif);font-size:22px;line-height:1.1}
.ref-overlay .ref-meta{font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.15em;color:rgba(255,255,255,.85);margin-bottom:6px}

/* Beispielansichten: Kennzeichnung immer sichtbar, nicht nur beim
   Darueberfahren - Ehrlichkeit gehoert ins Bild (27.08.2026) */
.bsp-marke{position:absolute;top:10px;left:10px;z-index:2;
  background:rgba(15,15,16,.72);color:#EFEBE0;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 9px;border-radius:3px;pointer-events:none}

/* --- Prozess --------------------------------------------------- */
.prozess-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.step{padding:36px 26px 36px 0;border-right:1px solid var(--line)}
.step:last-child{border-right:none}
.step-num{font-family:var(--serif);font-style:italic;font-size:64px;color:var(--muted);
  line-height:.9;margin-bottom:20px}
.step h3{font-family:var(--serif);font-size:26px;margin-bottom:12px;line-height:1.1}
.step p{font-size:14px;color:var(--ink-soft);max-width:240px}

/* --- Ueber / Eckdaten ------------------------------------------ */
.ueber-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(32px,5vw,80px);align-items:start}
.facts{border-top:1px solid var(--line)}
.fact{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.fact .value{font-family:var(--serif);font-size:22px}
.portrait{aspect-ratio:4/5;overflow:hidden;background:var(--bg-warm);border:1px solid var(--line)}
.portrait img{width:100%;height:100%;object-fit:cover}
.signature{font-family:var(--serif);font-style:italic;font-size:26px;margin-top:22px}

/* --- Formulare ------------------------------------------------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.15em;color:var(--muted)}
.field input,.field select,.field textarea{background:transparent;border:none;
  border-bottom:1px solid var(--line);padding:10px 0;font-size:16px;border-radius:0}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom:2px solid var(--ink);box-shadow:0 1px 0 var(--ink)}
.checkbox-row{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-soft)}
.checkbox-row input{margin-top:3px;accent-color:var(--ink)}
.form-note{font-size:12px;color:var(--muted);margin-top:14px;max-width:520px;line-height:1.5}
.form-success{border:1px solid var(--ink);padding:16px 20px;margin-bottom:24px;font-size:15px}
.form-error{border:1px solid #A6392E;color:#A6392E;padding:16px 20px;margin-bottom:24px;font-size:14px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px)}
.contact-list{display:grid;gap:26px;border-top:1px solid var(--line);padding-top:26px}
.contact-list .value{font-size:17px;line-height:1.5}

/* --- Shop: Produktraster --------------------------------------- */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.card{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;
  transition:transform .35s ease,border-color .35s;position:relative}
.card:hover{transform:translateY(-4px);border-color:var(--ink)}
.card .card-img{aspect-ratio:4/5;overflow:hidden;background:var(--bg-warm)}
.card .card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .card-img img{transform:scale(1.04)}
.card .card-body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{font-family:var(--serif);font-size:24px;line-height:1.15}
.card .price{font-family:var(--mono);font-size:13px;letter-spacing:.06em}
.card .price s{color:var(--muted);margin-right:8px}
.badge{position:absolute;top:12px;left:12px;background:var(--ink);color:var(--bg);
  font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.15em;padding:6px 10px;z-index:2}
.collection-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;
  flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:32px}
.filter-links{display:flex;gap:16px;flex-wrap:wrap;font-size:13px}
.filter-links a[aria-current]{border-bottom:1px solid var(--ink)}
.pagination{display:flex;gap:14px;justify-content:center;margin-top:48px;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em}

/* --- Shop: Produktseite ---------------------------------------- */
.product{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.product-media{display:grid;gap:12px}
.product-media .main{aspect-ratio:4/5;overflow:hidden;background:var(--bg-warm);border:1px solid var(--line)}
.product-media .main img{width:100%;height:100%;object-fit:cover}
.product-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.product-thumbs button{border:1px solid var(--line);aspect-ratio:1;overflow:hidden;padding:0}
.product-thumbs button[aria-current="true"]{border-color:var(--ink)}
.product-info h1{font-family:var(--serif);font-size:clamp(34px,4.4vw,60px);line-height:1.02;margin-bottom:18px}
.product-price{font-family:var(--mono);font-size:18px;letter-spacing:.05em;margin-bottom:24px}
.product-desc{color:var(--ink-soft);font-size:16px;line-height:1.65;margin:24px 0}
.product-desc p{margin-bottom:14px}
.product-desc ul{margin:0 0 14px 20px}
.option{margin-bottom:18px}
.option .label{display:block;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:14px;
  transition:all .2s;position:relative;cursor:pointer}
.chip:hover{border-color:var(--ink)}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip:has(input:checked){background:var(--ink);color:var(--bg);border-color:var(--ink)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px}
.qty button{width:40px;height:44px}
.qty input{width:48px;text-align:center;border:none;background:none}
.accordion{border-top:1px solid var(--line);margin-top:28px}
.accordion details{border-bottom:1px solid var(--line)}
.accordion summary{padding:18px 0;cursor:pointer;font-family:var(--mono);font-size:12px;
  text-transform:uppercase;letter-spacing:.15em;list-style:none;display:flex;justify-content:space-between}
.accordion summary::-webkit-details-marker{display:none}
.accordion .acc-body{padding-bottom:20px;color:var(--ink-soft);font-size:15px;line-height:1.6}

/* --- Shop: Warenkorb ------------------------------------------- */
.cart-table{width:100%;border-collapse:collapse}
.cart-table th{text-align:left;font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.15em;color:var(--muted);padding-bottom:14px;border-bottom:1px solid var(--line);font-weight:500}
.cart-table td{padding:22px 0;border-bottom:1px solid var(--line);vertical-align:top}
.cart-item{display:grid;grid-template-columns:96px 1fr;gap:18px}
.cart-item img{width:96px;height:120px;object-fit:cover;background:var(--bg-warm)}
.cart-item h3{font-family:var(--serif);font-size:22px;margin-bottom:6px}
.cart-props{font-family:var(--mono);font-size:11px;color:var(--muted);line-height:1.7;margin-top:8px}
.cart-summary{margin-top:36px;display:flex;justify-content:flex-end}
.cart-summary .box{width:min(420px,100%);border-top:1px solid var(--ink);padding-top:20px}
.cart-summary .line{display:flex;justify-content:space-between;padding:8px 0;font-size:15px}
.cart-summary .total{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--serif);font-size:30px;padding:14px 0 20px}
.empty-state{text-align:center;padding:80px 0}
.empty-state h2{margin-bottom:20px}

/* --- Konfigurator ---------------------------------------------- */
.konf{display:grid;grid-template-columns:1fr 440px;gap:clamp(24px,4vw,56px);align-items:start}
.konf-preview{position:sticky;top:96px;background:var(--paper);border:1px solid var(--line);padding:22px}
.konf-stage{background:var(--stage-bg);display:grid;place-items:center;padding:20px;min-height:340px}
/* Musterbild fuellt die Paneelform formtreu; der Rahmen liegt darueber. */
.konf-stage svg{width:100%;height:auto;aspect-ratio:var(--paneel-ratio,1.6);
  max-height:62vh;background:var(--stage-bg)}
.konf-stage.mit-rahmen svg{outline:6px solid currentColor;outline-offset:-6px}
.konf-stage p{color:var(--muted)}
.konf-caption{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-top:14px}
.konf-panel{display:grid;gap:24px}
.konf-block{border-top:1px solid var(--line);padding-top:20px}
.konf-block > .label{display:block;margin-bottom:14px}
.pattern-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;
  max-height:420px;overflow-y:auto;padding-right:4px}
.pattern-opt{border:1px solid var(--line);padding:6px;display:grid;gap:6px;transition:all .2s;
  background:var(--paper);color:var(--ink-soft)}
.pattern-opt:hover{border-color:var(--ink)}
.pattern-opt[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.pattern-opt[aria-pressed="true"] .pattern-name{color:var(--bg)}
.pattern-opt img,.pattern-opt svg{width:100%;height:auto;aspect-ratio:620/420;
  background:var(--bg-warm);object-fit:cover}
.pattern-name{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);text-align:center;line-height:1.3;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.chips [aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.dim-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.range-row{display:grid;gap:6px}
.range-row input[type=range]{width:100%;accent-color:var(--ink)}
.range-val{font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
.konf-price{border-top:1px solid var(--ink);padding-top:18px}
.konf-price .amount{font-family:var(--serif);font-size:clamp(34px,4vw,54px);line-height:1}
.konf-price .per{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.14em;
  text-transform:uppercase;margin-top:8px}
.konf-breakdown{font-family:var(--mono);font-size:11px;color:var(--muted);line-height:1.9;margin:14px 0}
.konf-breakdown span{display:flex;justify-content:space-between;gap:12px}
.konf-hint{font-size:12px;color:var(--muted);line-height:1.55;margin-top:12px}
.konf-warn{border-left:2px solid #A6392E;padding-left:12px;color:#A6392E;font-size:13px;margin-top:12px}

/* --- Maschinenpark ---------------------------------------------- */
.mpark-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mpark-card{background:var(--paper);border:1px solid var(--line);display:flex;
  flex-direction:column;transition:transform .35s ease,border-color .35s}
.mpark-card:hover{transform:translateY(-4px);border-color:var(--ink)}
.mpark-media{aspect-ratio:4/3;overflow:hidden;background:var(--dark-bg)}
.mpark-media img,.mpark-media video{width:100%;height:100%;object-fit:cover;display:block}
.mpark-body{padding:22px 22px 26px;display:grid;gap:8px}
.mpark-body h3{font-family:var(--serif);font-size:26px;line-height:1.1}
.mpark-body p{color:var(--ink-soft);font-size:14.5px;line-height:1.55}
@media (max-width:1100px){.mpark-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:800px){.mpark-grid{grid-template-columns:1fr}}

/* --- Muster-Werkzeug (intern, ueber den Dienst) ----------------- */
.gen{display:grid;grid-template-columns:1fr 400px;gap:clamp(20px,3vw,40px);align-items:start}
.gen-buehne{position:sticky;top:96px;display:grid;gap:12px}
.gen-blech{background:var(--paper);border:1px solid var(--line);display:grid;
  place-items:center;padding:22px;min-height:420px;position:relative}
.gen-blech svg{max-width:100%;max-height:66vh;width:auto;height:auto}
.gen-blech.laedt::after{content:'rechnet …';position:absolute;top:12px;right:16px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.gen-offline{max-width:460px;text-align:center;display:grid;gap:10px;color:var(--ink-soft);font-size:15px}
.gen-offline code{font-family:var(--mono);font-size:13px;background:var(--bg-warm);padding:2px 8px}
.gen-fuss{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.gen-ampel{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.gen-punkt{width:10px;height:10px;border-radius:50%;background:var(--muted)}
.gen-ampel.gruen .gen-punkt{background:#1E7A46}
.gen-ampel.gruen{color:#1E7A46}
.gen-ampel.rot .gen-punkt{background:#A6392E}
.gen-ampel.rot{color:#A6392E}
.gen-zahlen{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;color:var(--ink-soft)}
.gen-befunde{font-family:var(--mono);font-size:11px;color:#A6392E;line-height:1.7;max-height:110px;overflow:auto}
.gen-notizen{font-family:var(--mono);font-size:10.5px;color:var(--muted);line-height:1.7;max-height:96px;overflow:auto}
.gen-pult{display:grid;gap:22px}
.gen-familien{max-height:280px;overflow-y:auto;border:1px solid var(--line);background:var(--paper)}
.gen-familie{display:block;width:100%;text-align:left;padding:9px 12px;font-size:13.5px;
  border-bottom:1px solid var(--line);transition:background .15s}
.gen-familie:last-child{border-bottom:none}
.gen-familie:hover{background:var(--bg-warm)}
.gen-familie small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:2px}
.gen-familie[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.gen-familie[aria-pressed="true"] small{color:rgba(244,241,234,.7)}
.gen-schieber{display:grid;grid-template-columns:1fr 72px;gap:10px;align-items:center}
.gen-schieber input[type=range]{width:100%;accent-color:var(--ink);border:none;padding:0}
.gen-schieber input[type=number]{text-align:right;font-family:var(--mono);font-size:12px}
@media (max-width:1100px){.gen{grid-template-columns:1fr}.gen-buehne{position:static}}

/* --- Fusszeile ------------------------------------------------- */
.site-footer{background:var(--dark-bg);color:var(--dark-ink);padding:clamp(56px,7vw,96px) var(--pad) 40px}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;
  padding-bottom:48px;border-bottom:1px solid var(--dark-line)}
.footer-grid h3{font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.18em;color:rgba(239,235,224,.5);margin-bottom:18px}
.footer-grid ul{list-style:none;display:grid;gap:10px}
.footer-grid a{font-size:14px;color:rgba(239,235,224,.82)}
.footer-grid a:hover{color:var(--dark-ink)}
.footer-intro{font-family:var(--serif);font-size:24px;line-height:1.25;max-width:420px;margin-bottom:20px}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:24px;font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.14em;color:rgba(239,235,224,.5)}
.newsletter{display:flex;gap:8px;border-bottom:1px solid var(--dark-line);padding-bottom:8px;max-width:320px}
.newsletter input{background:none;border:none;flex:1;color:var(--dark-ink)}
.newsletter input::placeholder{color:rgba(239,235,224,.4)}
.newsletter button{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.15em}

/* --- Inhaltsseiten (Impressum, AGB ...) ------------------------ */
.rte{max-width:760px;font-size:16px;line-height:1.7;color:var(--ink-soft)}
.rte h2{font-family:var(--serif);font-size:32px;color:var(--ink);margin:36px 0 14px}
.rte h3{font-family:var(--serif);font-size:24px;color:var(--ink);margin:26px 0 10px}
.rte p{margin-bottom:14px}
.rte ul,.rte ol{margin:0 0 16px 22px}
.rte a{border-bottom:1px solid var(--line)}

/* --- Cookie-Hinweis ------------------------------------------- */
.cookie-hinweis{position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:var(--dark-bg);color:var(--dark-ink);padding:16px var(--pad);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--dark-line);transform:translateY(100%);
  transition:transform .4s ease}
.cookie-hinweis.sichtbar{transform:none}
.cookie-hinweis p{font-size:13.5px;line-height:1.5;flex:1;min-width:260px;
  color:rgba(239,235,224,.85);margin:0}
.cookie-hinweis a{border-bottom:1px solid var(--dark-line)}
.cookie-hinweis button{font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.15em;padding:11px 22px;border:1px solid var(--dark-ink);
  border-radius:var(--btn-radius);background:var(--dark-ink);color:var(--dark-bg);
  cursor:pointer;transition:all .2s;white-space:nowrap}
.cookie-hinweis button:hover{background:transparent;color:var(--dark-ink)}
@media (prefers-reduced-motion:reduce){.cookie-hinweis{transition:none}}

/* --- Einblend-Animation ---------------------------------------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* --- Responsiv -------------------------------------------------- */
@media (max-width:1100px){
  .hero{grid-template-columns:1fr}
  .hero-image{min-height:52vh;order:-1}
  .split,.werkstatt-grid,.ueber-grid,.contact-grid,.product,.konf{grid-template-columns:1fr}
  .konf-preview{position:static}
  .prozess-grid{grid-template-columns:repeat(2,1fr)}
  .step:nth-child(2n){border-right:none}
  .refs-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:800px){
  :root{--pad:20px}
  .nav-links{display:none}
  .nav-links.open{display:flex;position:fixed;inset:64px 0 auto;flex-direction:column;
    background:var(--bg);padding:24px var(--pad) 32px;border-bottom:1px solid var(--line);gap:18px}
  .nav-toggle{display:flex}
  .section-head{grid-template-columns:1fr;gap:20px}
  .services-grid,.form-grid,.dim-row{grid-template-columns:1fr}
  .refs-grid{grid-template-columns:1fr}
  .prozess-grid{grid-template-columns:1fr}
  .step{border-right:none;border-bottom:1px solid var(--line)}
  .specs{grid-template-columns:1fr}
  .spec-item:nth-child(2n){padding-left:0;border-right:none}
  .footer-grid{grid-template-columns:1fr}
  .cart-item{grid-template-columns:72px 1fr}
  .cart-item img{width:72px;height:90px}
}

/* --- Musterbeispiele (Katalog) ---------------------------------- */
.mst{color:#8f959c}
.mst-werkzeuge{display:flex;gap:20px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:8px}
.mst-motive{display:flex;gap:8px;flex-wrap:wrap}
.mst-motiv{border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:14px;
  background:none;color:var(--ink-soft);cursor:pointer;transition:all .2s}
.mst-motiv:hover{border-color:var(--ink);color:var(--ink)}
.mst-motiv[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.mst-rechts{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.mst-suche{border:none;border-bottom:1px solid var(--line);background:none;padding:8px 2px;
  font-size:15px;width:180px;color:var(--ink)}
.mst-suche:focus{outline:none;border-bottom-color:var(--ink)}
.mst-materialien{display:flex;gap:6px;flex-wrap:wrap}
.mst-material{width:30px;height:30px;border:1px solid rgba(15,15,16,.28);border-radius:50%;
  cursor:pointer;padding:0;transition:transform .15s,box-shadow .15s}
.mst-material:hover{transform:scale(1.15)}
.mst-material[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink);transform:scale(1.1)}
.mst-matname{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);min-width:96px}
.mst-zaehler{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 24px}
.mst-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}
.mst-kachel{border:1px solid var(--line);background:var(--paper);padding:0;cursor:pointer;
  display:flex;flex-direction:column;transition:transform .3s ease,border-color .3s,box-shadow .3s;
  text-align:left;overflow:hidden}
.mst-kachel:hover{transform:translateY(-4px);border-color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.09)}
.mst-bild{aspect-ratio:1;display:grid;place-items:center;padding:20px;background:var(--bg-warm)}
.mst-hell .mst-bild{background:#3b4045}
.mst-bild svg{width:100%;height:100%;display:block}
/* Kurzzeichen (Gruppe + Nummer) ueber dem Namen */
.mst-code{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  color:var(--muted);padding:12px 20px 0;display:block}
/* Metallschimmer: laeuft schraeg ueber die Kachel, Staerke je Material */
.mst-bild{position:relative}
.mst-bild::after{content:"";position:absolute;inset:0;pointer-events:none;
  opacity:var(--glanz,0);mix-blend-mode:overlay;
  background:linear-gradient(114deg,rgba(255,255,255,0) 12%,
    rgba(255,255,255,.55) 34%,rgba(255,255,255,0) 46%,
    rgba(0,0,0,.28) 62%,rgba(255,255,255,.34) 82%,rgba(255,255,255,0) 94%)}
.mst-name{font-family:var(--serif);font-size:22px;line-height:1.2;padding:2px 20px 18px;
  color:var(--ink);background:var(--paper)}
.mst-leer{color:var(--muted);font-size:15px;grid-column:1/-1;padding:30px 0}

/* Detailfenster */
.mst-dialog{position:fixed;inset:0;z-index:200;background:rgba(14,14,16,.62);
  display:flex;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(3px)}
.mst-fenster{background:var(--bg);width:min(1080px,96vw);max-height:92vh;overflow-y:auto;
  border:1px solid var(--line);display:grid;gap:0}
.mst-fenster-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding:26px 30px 20px;border-bottom:1px solid var(--line)}
.mst-fenster-kopf h3{font-size:36px;line-height:1.05;margin-top:6px;font-weight:400}
.mst-zu{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:9px 18px;background:none;
  cursor:pointer;color:var(--ink-soft);white-space:nowrap}
.mst-zu:hover{border-color:var(--ink);color:var(--ink)}
.mst-gross{background:var(--bg-warm);padding:30px;display:grid;place-items:center;color:#8f959c}
.mst-gross svg{width:100%;max-height:44vh;display:block}
.mst-text{padding:26px 30px 32px;display:grid;gap:18px;max-width:760px}
.mst-text p{color:var(--ink-soft);font-size:15.5px;line-height:1.65}
.mst-daten{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;margin:0;
  border-top:1px solid var(--line);padding-top:18px}
.mst-daten dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding-top:3px}
.mst-daten dd{margin:0;font-size:15px;color:var(--ink)}
.mst-hinweis{font-size:13.5px !important;color:var(--muted) !important}
.mst-text .btn{justify-self:start}
@media (max-width:800px){
  .mst-werkzeuge{flex-direction:column;align-items:stretch;gap:14px}
  /* Suchfeld ueber die volle Breite, Materialwahl als eigene Zeile:
     vorher blieben rechts 155 px leer und zwischen Farbpunkten und
     Materialnamen klaffte ein 65-px-Loch. */
  .mst-rechts{flex-direction:column;align-items:stretch;gap:12px}
  .mst-suche{width:100%}
  .mst-materialien{gap:9px;justify-content:flex-start}
  /* Fingergerechte Flaeche statt 30 px */
  .mst-material{width:46px;height:46px}
  .mst-material:hover{transform:none}
  .mst-material[aria-pressed="true"]{transform:none;
    box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--bg)}
  .mst-matname{min-width:0;text-align:center;font-size:12px}
  .mst-raster{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .mst-name{font-size:16px;padding:10px 12px 12px}
  .mst-fenster-kopf{padding:20px}
  .mst-fenster-kopf h3{font-size:26px}
  .mst-gross,.mst-text{padding:18px}
}

/* Musterschau auf der Startseite */
.mst-vorschau{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;color:#8f959c}
.mst-vorschau-feld{aspect-ratio:1;background:var(--bg-warm);border:1px solid var(--line);
  display:grid;place-items:center;padding:10px;transition:opacity .4s,transform .3s,border-color .3s}
.mst-vorschau-feld:hover{transform:translateY(-3px);border-color:var(--ink)}
.mst-vorschau-feld svg{width:100%;height:100%;display:block}
@media (max-width:800px){.mst-vorschau{grid-template-columns:repeat(3,1fr);gap:8px}}

/* Design-Objekte: eigene Seite, Bild mit sichtbarem Text darunter.
   Anders als die Referenz-Kacheln (Text erst beim Darueberfahren) soll
   hier jedes Stueck erklaert sein - es ist die Detailseite (30.08.2026) */
.obj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,44px)}
.obj-karte{background:var(--paper);border:1px solid var(--line);overflow:hidden;
  display:flex;flex-direction:column}
.obj-bild{aspect-ratio:4/3;overflow:hidden;background:var(--bg-warm)}
.obj-bild img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s ease}
.obj-karte:hover .obj-bild img{transform:scale(1.03)}
.obj-text{padding:26px 28px 30px}
.obj-meta{display:block;font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.15em;color:var(--muted);margin-bottom:10px}
.obj-text h3{font-family:var(--serif);font-size:27px;line-height:1.15;margin-bottom:12px}
.obj-text p{font-size:16.5px;line-height:1.6;color:var(--ink-soft)}
@media (max-width:800px){.obj-grid{grid-template-columns:1fr}.obj-text{padding:22px 22px 26px}}

/* Teaser auf der Startseite: drei Objekte, Verweis auf die eigene Seite */
.obj-teaser{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.obj-teaser-feld{aspect-ratio:1;overflow:hidden;border:1px solid var(--line);
  background:var(--bg-warm);transition:transform .3s,border-color .3s}
.obj-teaser-feld:hover{transform:translateY(-3px);border-color:var(--ink)}
.obj-teaser-feld img{width:100%;height:100%;object-fit:cover;display:block}

/* Bereiche: stehen gleich unter dem Startbild. Raphael 30.08.2026 -
   der Kunde soll nicht erst scrollen und sofort sehen, dass es klickbar
   ist: groessere Kacheln, sichtbarer Knopf, deutliche Reaktion. */
.bereiche-sektion{padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(48px,6vw,80px)}
.weg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.8vw,28px)}
.weg-karte{display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);overflow:hidden;color:inherit;text-decoration:none;
  transition:transform .35s ease,border-color .3s,box-shadow .35s ease}
.weg-karte:hover,.weg-karte:focus-visible{transform:translateY(-6px);
  border-color:var(--ink);box-shadow:0 18px 40px rgba(15,15,16,.13)}
.weg-bild{display:block;position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--bg-warm)}
.weg-bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.weg-karte:hover .weg-bild img{transform:scale(1.04)}
.weg-text{display:block;padding:26px 28px 30px}
.weg-titel{display:block;font-family:var(--serif);font-size:clamp(24px,1.9vw,30px);
  line-height:1.1;margin-bottom:10px}
.weg-p{display:block;font-size:16.5px;line-height:1.55;color:var(--ink-soft);
  margin-bottom:20px}
.weg-knopf{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.12em;
  border:1px solid var(--ink);border-radius:var(--btn-radius);padding:10px 20px;
  transition:background .3s,color .3s}
.weg-karte:hover .weg-knopf{background:var(--ink);color:var(--bg)}
.weg-knopf .arrow{transition:transform .3s}
.weg-karte:hover .weg-knopf .arrow{transform:translateX(4px)}
@media (max-width:1100px){.weg-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.weg-grid{grid-template-columns:1fr}
  .weg-bild{aspect-ratio:16/9}}

/* ============================================================
   Mehrseitige Website (Raphael 03.09.2026: "mehrseitig,
   uebersichtlich, leicht manoevrieren"). Orientierung auf jeder
   Seite: aktive Seite im Menue, Brotkrumen unter der Kopfzeile,
   Weiter/Zurueck am Seitenende, Handy-Menue als ganze Seite.
   ============================================================ */
.skip{position:absolute;left:-999px;top:10px;z-index:200;background:var(--ink);
  color:var(--bg);padding:10px 18px;border-radius:999px;font-size:13px}
.skip:focus{left:16px}

/* Aktive Seite im Menue: feine Linie darunter */
.nav-links a{position:relative;padding:4px 0;white-space:nowrap}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;
  bottom:-2px;height:1px;background:var(--ink)}
.nav-links .nur-mobil{display:none}

/* Erste Sektion einer Unterseite: Platz fuer die feste Kopfzeile */
.seite-kopf{padding-top:clamp(150px,18vh,200px)}

/* Brotkrumen: Start / Seite */
.brotkrumen{font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);font-weight:500;
  display:flex;flex-wrap:wrap;gap:0 12px;align-items:center}
.brotkrumen a{color:var(--muted);transition:color .2s}
.brotkrumen a:hover{color:var(--ink)}
.brotkrumen [aria-current]{color:var(--ink)}

/* Referenz-Auswahl auf der Startseite: drei gleich grosse Kacheln */
.refs-grid--auswahl{grid-template-columns:repeat(3,1fr)}
.refs-grid--auswahl .ref-card{grid-column:auto;grid-row:auto;aspect-ratio:4/3;height:auto}
@media (max-width:800px){.refs-grid--auswahl{grid-template-columns:1fr}}

/* Kontakt-Band auf der Startseite (dunkel, wie die Fusszeile) */
.kontakt-band .lead{color:rgba(239,235,224,.78)}
.kontakt-band .btn-row{margin-top:32px}

/* Weiter / Zurueck am Seitenende */
.seiten-weiter{padding:0 var(--pad) clamp(56px,7vw,96px)}
.weiter-grid{max-width:1560px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line)}
.weiter-karte{display:flex;flex-direction:column;gap:12px;padding:36px 0;color:inherit}
.weiter-vor:only-child{grid-column:2}
.weiter-zurueck:only-child{grid-column:1}
.weiter-vor{text-align:right;align-items:flex-end;border-left:1px solid var(--line);padding-left:32px}
.weiter-zurueck{padding-right:32px}
.weiter-titel{font-family:var(--serif);font-size:clamp(28px,3.2vw,44px);line-height:1.05;
  letter-spacing:-.01em;transition:transform .3s ease}
.weiter-vor:hover .weiter-titel{transform:translateX(6px)}
.weiter-zurueck:hover .weiter-titel{transform:translateX(-6px)}
@media (max-width:800px){
  .weiter-grid{grid-template-columns:1fr}
  .weiter-vor{border-left:none;border-top:1px solid var(--line);padding-left:0}
  .weiter-zurueck{padding-right:0}
  .weiter-vor:only-child,.weiter-zurueck:only-child{grid-column:auto}
}

/* Fusszeile: aktuelle Seite unterstrichen */
.footer-grid ul a[aria-current="page"]{color:var(--dark-ink);text-decoration:underline;
  text-underline-offset:4px}

/* Handy: Menue fuellt die ganze Seite, grosse nummerierte Eintraege,
   Schliessen-Kreuz statt drei Striche */
@media (max-width:800px){
  .header-tools{position:relative;z-index:2}
  .nav-links{counter-reset:menue}
  .nav-links.open{display:flex;position:fixed;inset:auto;top:0;left:0;right:0;height:100dvh;
    flex-direction:column;align-items:stretch;gap:0;padding:110px var(--pad) 40px;
    background:var(--bg);border-bottom:none;z-index:1;overflow:auto}
  .nav-links.open a{font-family:var(--serif);font-size:clamp(30px,8vw,42px);line-height:1.1;
    color:var(--ink);padding:14px 0;border-bottom:1px solid var(--line);
    display:flex;align-items:baseline;gap:16px;white-space:normal}
  .nav-links.open a::before{content:counter(menue,decimal-leading-zero);counter-increment:menue;
    font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--muted)}
  .nav-links.open a[aria-current="page"]::after{display:none}
  .nav-links.open a[aria-current="page"]{color:var(--muted)}
  .nav-links.open .nur-mobil{display:flex}
  .nav-toggle[aria-expanded="true"] span{background:transparent}
  .nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
}

/* Foto-Reihe unter den Leistungen: vier echte Aufnahmen, Hochformat
   (Raphael 03.09.2026: "bei Was wir fuer Sie fertigen noch Fotos") */
.foto-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  padding:clamp(40px,5vw,72px) 0 0}
.foto-reihe figure{position:relative;aspect-ratio:4/5;overflow:hidden;
  background:var(--bg-warm);border:1px solid var(--line);margin:0}
.foto-reihe img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.foto-reihe figure:hover img{transform:scale(1.04)}
.foto-reihe figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#EFEBE0;background:linear-gradient(to top,rgba(15,15,16,.72),rgba(15,15,16,0))}
@media (max-width:1100px){.foto-reihe{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.foto-reihe{grid-template-columns:1fr}}

/* Logo als Wasserzeichen hinter dem Starttext (Raphael 03.09.2026:
   "man sieht nicht, dass es meine Firma ist") */
.hero-text{position:relative;overflow:hidden}
.hero-text::before{content:"";position:absolute;right:-8%;top:clamp(90px,11vh,140px);
  width:min(66%,600px);aspect-ratio:1;
  background:url("logo-mark.png") center/contain no-repeat;opacity:.075;
  pointer-events:none;z-index:-1}
.hero-text>*{position:relative;z-index:1}
@media (max-width:1100px){.hero-text::before{width:min(70%,420px);right:-10%;top:24px}}

/* ============================================================
   Vollbild-Start (Raphael 03.09.2026: "kreativer, moderner - mach,
   was du fuer besser haeltst"): echte Fotos wechseln langsam durch,
   Text liegt auf dunklem Verlauf, Logo als helles Wasserzeichen.
   ============================================================ */
.hero--voll{display:block;position:relative;min-height:92svh;overflow:hidden;
  background:var(--dark-bg);color:var(--dark-ink)}
.hero-bilder{position:absolute;inset:0}
.hero-bilder img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.6s ease;animation:none}
.hero-bilder img.aktiv{opacity:1;animation:heroZoom 14s ease-in-out forwards}
.hero--voll::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(14,14,16,.88) 0%,rgba(14,14,16,.5) 42%,
    rgba(14,14,16,.12) 75%,rgba(14,14,16,.3) 100%)}
.hero--voll .hero-text{position:relative;z-index:2;min-height:92svh;max-width:1560px;
  margin:0 auto;padding:clamp(150px,18vh,200px) var(--pad) clamp(56px,8vh,96px);
  justify-content:flex-end;overflow:visible}
.hero--voll .hero-text>div{max-width:860px}
.hero--voll .hero-meta .dot{background:var(--dark-ink)}
.hero--voll .hero-meta .label{color:rgba(239,235,224,.72)}
.hero--voll h1{color:var(--dark-ink)}
.hero--voll h1 .accent{color:rgba(239,235,224,.72)}
.hero--voll .hero-sub{color:rgba(239,235,224,.82);max-width:560px}
.hero--voll .btn{border-color:var(--dark-ink);color:var(--dark-ink)}
.hero--voll .btn-primary{background:var(--dark-ink);color:var(--dark-bg)}
.hero--voll .btn-primary:hover{background:transparent;color:var(--dark-ink)}
.hero--voll .btn-ghost:hover{background:var(--dark-ink);color:var(--dark-bg)}
/* Wasserzeichen: gleiches Zeichen, hell, rechts oben im Bild */
.hero--voll .hero-text::before{right:var(--pad);left:auto;top:clamp(110px,14vh,170px);
  width:min(36vw,440px);filter:brightness(0) invert(1);opacity:.14;z-index:0}
@media (max-width:1100px){
  .hero--voll .hero-text::before{width:min(52vw,320px);top:110px;right:-6%}
  .hero--voll .hero-text{min-height:84svh}
  .hero--voll{min-height:84svh}
}
@media (prefers-reduced-motion:reduce){
  .hero-bilder img{transition:none}
  .hero-bilder img.aktiv{animation:none}
}

/* Musterband: ein echtes Katalogmuster als Trennlinie */
.musterband{height:clamp(80px,11vw,150px);overflow:hidden;background:var(--bg);
  border-bottom:1px solid var(--line);position:relative}
.musterband img{width:100%;height:100%;object-fit:cover;object-position:center 60%;
  opacity:.16;display:block}

/* Produktansichten: Originalkonturen, Licht und raeumliche Praesentation. */
.bereiche-kopf{margin-bottom:36px;display:flex;justify-content:space-between;gap:24px;align-items:end}
.bereiche-kopf h2{font-size:clamp(30px,3.2vw,48px);line-height:1.1}
.bereiche-sektion .weg-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.bereiche-sektion .weg-bild{aspect-ratio:4/5}
.bereiche-sektion .weg-titel{font-size:clamp(27px,2.6vw,40px)}
.bereiche-sektion .weg-text{display:flex;flex-direction:column;flex:1;padding:26px}
.weg-nummer{font:11px var(--mono);letter-spacing:.15em;color:var(--muted);margin-bottom:18px}
.bereiche-sektion .weg-knopf{align-self:flex-start;margin-top:auto}
.bereiche-sektion .weg-p{font-size:15px;min-height:4.7em}
.mst-ansicht-controls{display:flex;justify-content:space-between;gap:16px;padding:18px 30px;border-bottom:1px solid var(--line)}
.mst-ansicht-controls select,.mst-ansicht-schalter{font:inherit;font-size:14px;color:var(--ink);border:1px solid var(--line);border-radius:24px;padding:10px 18px;background:var(--bg);max-width:100%;cursor:pointer}
.mst-ansicht-controls :focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.mst-produkt{min-height:320px;overflow:hidden;perspective:1400px;padding:64px 8%;background:radial-gradient(ellipse at 25% 15%,#faf8f2,transparent 65%),linear-gradient(165deg,#e4e1d7 60%,#d5d0c3 60.3%,#efebe2);position:relative}
.mst-paneel{width:100%;transform:rotateY(-15deg) rotateX(5deg);transition:transform .65s ease;filter:drop-shadow(1px 1px 0 #15191b) drop-shadow(1px 1px 0 #25292c) drop-shadow(12px 22px 15px #22222238)}
.mst-produkt .mst-paneel svg{width:100%;height:auto;max-height:42vh;overflow:visible}
.mst-paneel-reflex{opacity:var(--reflex,.15)}
.mst-produkt.ist-frontal .mst-paneel{transform:none}
.mst-vorschau-note{padding:12px 30px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line);margin:0}
@media(max-width:900px){.bereiche-sektion .weg-grid{grid-template-columns:1fr}.bereiche-sektion .weg-bild{aspect-ratio:16/10}.bereiche-kopf{display:block}.bereiche-kopf h2{margin-top:14px}.bereiche-sektion .weg-p{min-height:0}.mst-produkt{min-height:220px;padding:42px 7%}}
@media(max-width:500px){.mst-dialog{padding:8px}.mst-fenster{width:100%;max-height:94dvh}.mst-ansicht-controls{padding:14px;flex-wrap:wrap}.mst-vorschau-note{padding:12px 18px}.mst-produkt{min-height:180px}.mst-daten{grid-template-columns:1fr;gap:5px}.mst-daten dd{margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){.mst-paneel{transition:none}}


/* --- Pruefung UI/UX Pro Max (06.09.2026): Fokus, Touch, Sprunglink, Handy-Schrift --- */
.mst-suche:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
a,button,input,select,textarea,summary{touch-action:manipulation}
.skip-link{position:absolute;left:-9999px;top:14px;z-index:2000;background:var(--ink);color:var(--bg);
  padding:12px 18px;border-radius:999px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.skip-link:focus{left:14px;outline:2px solid var(--bg);outline-offset:2px}
@media (pointer:coarse){
  .laser-nochmal,.chip,.mst-material,.mst-motiv{min-height:44px}
  .footer-grid li a{display:inline-block;padding:7px 0}
  .nav-links a{padding-top:10px;padding-bottom:10px}
}
@media (max-width:760px){body{font-size:16px}}


/* --- UI/UX-Pruefung 06.09.: Tippziele und Lesbarkeit auf dem Handy --- */
@media (pointer:coarse){
  .nav-cta{min-height:44px;display:inline-flex;align-items:center}
  .nav-toggle,.menu-toggle,button[aria-label="Menue"],button[aria-label="Menü"]{min-width:44px;min-height:44px}
  .footer-grid li a{display:inline-block;padding:12px 0}
  .newsletter input,.newsletter button,.footer-news input,.footer-news button{min-height:44px}
  .cookie-hinweis a{display:inline-block;padding:10px 0}
  .checkbox-row input{width:22px;height:22px}
}


/* --- UI/UX-Pruefung 06.09.: Kontrast 4,5:1 fuer kleine Beschriftungen auf Papier --- */
.fakt .label,.bereiche-kopf .label,.mpark-body .label,.mat-name+.mat-text .label{color:#5E5B54}
@media (pointer:coarse){
  .footer-bottom a,.footer-legal a,.site-footer .legal a{display:inline-block;padding:12px 0}
  .cookie-hinweis button{min-height:44px}
}

/* --- Musterwand (07.09.2026) --------------------------------------------
   EINE Buehne fuer alle Leitmuster. Chips waehlen das Muster, das Blech
   haengt vor einer Wand: bei Tag wirft es einen Schatten, am Abend liegt
   Licht dahinter und die Loecher leuchten. Die Musterfarbe setzt allein
   das Skript (stand.farbe) - hier stuende sonst eine zweite Wahrheit. */
.kfg{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(24px,3vw,48px);align-items:start}
.kfg-links{position:sticky;top:96px;z-index:0;min-width:0}
.kfg-bedienung{position:relative;z-index:1;min-width:0;display:flex;flex-direction:column;gap:22px}

.wand-chips{grid-column:1 / -1;min-width:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:6px}
.wand-chip{display:block;padding:0;border:1px solid var(--line);background:var(--paper);color:#2F3237;
  text-align:left;cursor:pointer;overflow:hidden;font:inherit;
  transition:border-color .25s,transform .4s cubic-bezier(.2,.7,.2,1)}
.wand-chip:hover{border-color:var(--ink);transform:translateY(-2px)}
.wand-chip[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.wand-chipbild{display:block;aspect-ratio:1;background:var(--bg-warm);overflow:hidden}
.wand-chipbild svg{width:100%;height:100%;display:block}
.wand-chipname{display:block;padding:8px 10px 2px;font-size:12.5px;line-height:1.3;color:var(--ink-soft);min-height:calc(2.6em + 10px)}
.wand-chipoffen{display:block;padding:0 10px 9px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}

.wand-buehne{position:relative;padding:7% 8% 10%;border:1px solid var(--line);
  background:linear-gradient(155deg,#F7F4ED 0%,#E8E2D5 100%);transition:background .7s ease,border-color .7s ease}
.wand-buehne[data-licht="abend"]{border-color:#2A2B2F;
  background:radial-gradient(ellipse 70% 62% at 50% 46%,#4B3B29 0%,#23201E 55%,#131416 100%)}
.kfg-buehne{position:relative;aspect-ratio:var(--feld-seiten,2);perspective:1600px;margin:0 auto;
  max-width:calc(56vh * var(--feld-seiten,2));transition:color .35s ease}
.kfg-platte{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.kfg-blech{width:100%;height:100%;filter:drop-shadow(14px 22px 16px rgba(30,25,15,.36));transition:filter .7s ease}
.kfg-blech svg{width:100%;height:100%;display:block}
.wand-buehne[data-licht="abend"] .kfg-blech{
  background:radial-gradient(ellipse 80% 70% at 50% 45%,#FFE2B4 0%,#F4A857 50%,#9E5320 100%);
  filter:drop-shadow(0 0 36px rgba(255,170,90,.32))}
.wand-glut{display:none}
.wand-buehne[data-licht="abend"] .wand-glut{display:block}
.kfg-schenkel{position:absolute;display:none;background-color:currentColor;
  background-image:linear-gradient(rgba(0,0,0,.32),rgba(0,0,0,.6))}
.kfg-buehne[data-kantung="c"] .kfg-schenkel.oben,.kfg-buehne[data-kantung="c"] .kfg-schenkel.unten,
.kfg-buehne[data-kantung="tasse"] .kfg-schenkel{display:block}
.kfg-schenkel.oben{left:0;right:0;top:0;height:var(--sch-h,4.5%);transform-origin:50% 0;transform:rotateX(90deg)}
.kfg-schenkel.unten{left:0;right:0;bottom:0;height:var(--sch-h,4.5%);transform-origin:50% 100%;transform:rotateX(-90deg)}
.kfg-schenkel.links{top:0;bottom:0;left:0;width:var(--sch-b,2.3%);transform-origin:0 50%;transform:rotateY(-90deg)}
.kfg-schenkel.rechts{top:0;bottom:0;right:0;width:var(--sch-b,2.3%);transform-origin:100% 50%;transform:rotateY(90deg)}
.wand-mass{position:absolute;left:0;top:calc(100% + 18px);width:calc(var(--meter,.556) * 100%);height:7px;
  border:1px solid var(--muted);border-top:0;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.wand-mass span{position:absolute;left:calc(100% + 10px);top:-5px;white-space:nowrap}
.wand-buehne[data-licht="abend"] .wand-mass{border-color:#7E786C;color:#7E786C}
.wand-leiste{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-top:14px}
.kfg-hinweis{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);line-height:1.6;margin:0}
.wand-licht{display:flex;gap:6px;flex-shrink:0}
.wand-licht .kfg-knopf{padding:6px 12px;font-size:12.5px}
.kfg-fussnote{font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.5;max-width:52ch}
.kfg-leer{padding:40px;color:var(--muted)}
.wand-notiz{font-size:14px;color:var(--ink-soft);margin:0;max-width:40ch;line-height:1.5}
.wand-konfig{margin-top:6px;align-self:flex-start}

.kfg-feld{display:flex;flex-direction:column;gap:9px}
.kfg-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.kfg-knoepfe{display:flex;gap:8px;flex-wrap:wrap}
.kfg-knopf{font-family:var(--sans);font-size:14px;padding:9px 16px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink-soft);border-radius:var(--btn-radius);cursor:pointer;transition:all .25s}
.kfg-knopf:hover{border-color:var(--ink)}
.kfg-knopf[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.kfg-masse{display:flex;align-items:center;gap:10px}
.kfg-zahl{width:104px;padding:9px 12px;border:1px solid var(--line);background:var(--paper);
  font-family:var(--mono);font-size:14px;color:var(--ink)}
.kfg-mal{color:var(--muted)}
.kfg-farben{display:flex;gap:8px;flex-wrap:wrap}
.kfg-farbe{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);cursor:pointer;
  transition:transform .2s,box-shadow .2s}
.kfg-farbe:hover{transform:scale(1.08)}
.kfg-farbe[aria-pressed="true"]{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink)}
.kfg-anfragen{margin-top:6px;align-self:flex-start}
@media (max-width:1000px){.kfg{grid-template-columns:1fr}.kfg-links{position:static}
  .wand-chips{grid-template-columns:repeat(4,minmax(0,1fr))}
  .kfg-buehne{max-width:none}}
@media (max-width:600px){.wand-chips{display:flex;overflow-x:auto;gap:10px;padding-bottom:8px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .wand-chip{flex:0 0 112px;scroll-snap-align:start}
  .wand-buehne{padding:8% 6% 13%}
  .wand-leiste{flex-direction:column}}

/* --- Startseite: sechs Wege (07.09.2026), Kontakt-Kachel ohne Bild ---------- */
.weg-karte--kontakt{background:var(--ink);color:var(--bg)}
.weg-karte--kontakt .weg-text{flex:1;justify-content:flex-end;min-height:100%}
.weg-karte--kontakt .weg-titel,.weg-karte--kontakt .weg-p{color:var(--bg)}
.weg-karte--kontakt .weg-nummer{color:rgba(239,235,224,.55)}
.weg-karte--kontakt .weg-knopf{border-color:rgba(239,235,224,.45);color:var(--bg)}
.weg-karte--kontakt:hover .weg-knopf{background:var(--bg);color:var(--ink)}
.weg-karte--kontakt .weg-zeile{display:block;font-family:var(--serif);font-size:clamp(30px,2.6vw,42px);
  line-height:1.05;margin:0 0 auto;color:var(--bg)}
.weg-karte--kontakt .weg-tel{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  margin-top:18px;color:rgba(239,235,224,.75)}

/* --- Musterwand: Durchblick-Filter (07.09.2026) ------------------------------ */
.wand-sicht{grid-column:1 / -1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:2px}
.wand-sicht .kfg-label{margin-right:6px}
.wand-sicht .kfg-knopf{padding:6px 12px;font-size:12.5px}
.wand-chip.gedimmt{opacity:.28}
.wand-chip.gedimmt:hover{opacity:.7}

/* --- Bewegte Kacheln (07.09.2026): Video ueber dem Foto ---------------------- */
.weg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .5s ease;pointer-events:none;z-index:1}
.weg-karte.spielt .weg-video{opacity:1}
.weg-karte.spielt .weg-bild img{transform:scale(1.04)}
.weg-karte.spielt .ki-hinweis{opacity:0}