/* =========================================================================
   MÖBEL TÜREN WERK – Startseite im Studio-Wolf-Design (Design-Struktur der
   Basso-Wolf-Seite), Farbwelt SAND/ESPRESSO (Submarke Möbel Türen Werk).
   Alles unter .bsw gescoped. Begleitdateien: js/sw.js, css/sw-fonts.css.
   ========================================================================= */

.bsw *,
.bsw *::before,
.bsw *::after { box-sizing: border-box; margin: 0; padding: 0; }

.bsw {
  /* --- Farb-Tokens: EXTRANET24 (Lime/Beige/Dunkelgruen) --- */
  --green:     #B7BA1E;   /* Akzent hell (Linien, aktive Punkte) */
  --green2:    #5E6B10;   /* Text + gefuellte Buttons (lesbar auf Weiss) */
  --green3:    #47520B;   /* Hover gefuellte Buttons */
  --green-hi:  #CDCF3E;   /* Akzent auf dunklen Flaechen */
  --green-light:#F0F1D7;
  --dark:      #2C352F;   /* Text & dunkle Flaechen (Espresso) */
  --dark2:     #3C473E;
  --wood:      #c9a86a;
  --wood-light:#F1F0E2;   /* abgesetzte helle Flaechen (warmes Papier) */
  --white:     #ffffff;

  --ink:   var(--dark);
  --muted: #5d6358;
  --line:  #E4E2CF;

  --sans: 'Satoshi', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Montserrat', sans-serif;

  --maxw: 1180px;
  --gut: clamp(20px, 5vw, 64px);

  font-family: var(--sans);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.bsw img { max-width: 100%; display: block; }
.bsw a { color: inherit; text-decoration: none; }

.bsw h1, .bsw h2, .bsw h3, .bsw .display {
  font-family: var(--sans);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.bsw .accent { color: var(--green2); }
.bsw .eyebrow {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--green2);
  font-weight: 700;
}

.bsw .wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
.bsw .section { padding: clamp(60px, 10vw, 140px) 0; }

/* --- Buttons --- */
.bsw .btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 15px 30px; border-radius: 6px; cursor: pointer;
  border: 2px solid transparent; transition: all .22s ease;
}
.bsw .btn-fill { background: var(--green2); color: #fff; border-color: var(--green2); }
.bsw .btn-fill:hover { background: var(--green3); border-color: var(--green3); transform: translateY(-1px); }
.bsw .btn-outline { background: transparent; color: var(--green2); border-color: var(--green); }
.bsw .btn-outline:hover { background: var(--green-light); transform: translateY(-1px); }
.bsw .btn-dark { background: var(--dark); color: #fff; border-color: var(--dark); }
.bsw .btn-dark:hover { background: var(--dark2); border-color: var(--dark2); }

/* =========================================================================
   NAVIGATION
   ========================================================================= */
.bsw .nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.bsw .nav.scrolled { border-color: var(--line); box-shadow: 0 6px 24px rgba(26,34,34,.05); }
.bsw .nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 16px var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.bsw .nav-logo { display: flex; align-items: center; gap: 14px; }
.bsw .nav-logo .brand-logo { height: 54px; width: auto; display: block; }
.bsw .nav-logo .sub { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding-left: 14px; border-left: 1px solid var(--line); line-height: 1.25; }
.bsw .nav-links { display: flex; align-items: center; gap: 30px; list-style: none; }
.bsw .nav-links > li { position: relative; }
.bsw .nav-links a {
  font-size: 14px; font-weight: 600; color: var(--dark); position: relative; padding: 4px 0;
}
.bsw .nav-links > li > a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--green); transition: width .3s ease;
}
.bsw .nav-links > li > a:hover { color: var(--green2); }
.bsw .nav-links > li > a:hover::after { width: 100%; }
.bsw .nav-cta {
  font-size: 15.5px; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; color: #fff;
  background: var(--green2); padding: 14px 30px; border-radius: 6px; transition: all .22s ease;
}
.bsw .nav-cta:hover { background: var(--green3); transform: translateY(-1px); }
.bsw .nav-toggle { display: none; background: none; border: 0; cursor: pointer; width: 34px; height: 26px; position: relative; }
.bsw .nav-toggle span { position: absolute; left: 3px; right: 3px; height: 2px; background: var(--dark); transition: .3s; border-radius: 2px; }
.bsw .nav-toggle span:nth-child(1){ top: 4px; }
.bsw .nav-toggle span:nth-child(2){ top: 12px; }
.bsw .nav-toggle span:nth-child(3){ top: 20px; }
.bsw .nav-toggle.open span:nth-child(1){ top: 12px; transform: rotate(45deg); }
.bsw .nav-toggle.open span:nth-child(2){ opacity: 0; }
.bsw .nav-toggle.open span:nth-child(3){ top: 12px; transform: rotate(-45deg); }

/* --- Firmen-Mega-Menue (mehr Input ueber die Unternehmensgruppe) --- */
.bsw .nav-group-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--dark);
  background: none; border: 0; padding: 4px 0;
}
.bsw .nav-group-btn svg { transition: transform .25s ease; }
.bsw .nav-group:hover .nav-group-btn,
.bsw .nav-group.open .nav-group-btn { color: var(--green2); }
.bsw .nav-group.open .nav-group-btn svg { transform: rotate(180deg); }
.bsw .nav-mega {
  position: absolute; top: calc(100% + 16px); right: 0;
  width: min(640px, 92vw); background: #fff; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 24px 60px rgba(26,34,34,.16); padding: 22px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .24s ease, transform .24s ease; z-index: 60;
}
.bsw .nav-group:hover .nav-mega,
.bsw .nav-group.open .nav-mega { opacity: 1; visibility: visible; transform: translateY(0); }
.bsw .nav-mega-head { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--green2); font-weight: 700; margin-bottom: 14px; }
.bsw .nav-mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bsw .mega-brand { display: block; padding: 13px 15px; border: 1px solid var(--line); border-left: 3px solid var(--c, var(--green)); border-radius: 10px; transition: background .2s ease, transform .2s ease; }
.bsw .mega-brand:hover { background: var(--wood-light); transform: translateY(-1px); }
.bsw .mega-brand b { font-size: 15px; font-weight: 800; color: var(--dark); display: block; }
.bsw .mega-brand span { font-size: 12.5px; color: var(--muted); line-height: 1.5; display: block; margin-top: 3px; }
.bsw .mega-brand.is-here { background: var(--green-light); }
.bsw .mega-brand.is-here b::after { content: " · Sie sind hier"; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--green2); font-weight: 700; }
.bsw .nav-mega-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 20px; }
.bsw .nav-mega-foot b { color: var(--green2); }

/* =========================================================================
   HERO
   ========================================================================= */
.bsw .hero { position: relative; }
.bsw .hero-media {
  position: relative; height: clamp(440px, 76vh, 740px); overflow: hidden; background: var(--wood-light);
}
.bsw .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.bsw .hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,34,34,.30) 0%, rgba(26,34,34,.08) 38%, rgba(255,255,255,0) 68%, var(--white) 100%);
}
.bsw .hero-copy { position: relative; z-index: 4; max-width: var(--maxw); margin: clamp(28px, 4vw, 56px) auto 0; padding: 0 var(--gut) clamp(40px, 7vw, 86px); }
.bsw .hero-copy .eyebrow { margin-bottom: 18px; display: block; }
.bsw .hero-copy h1 { font-size: clamp(42px, 8.5vw, 110px); line-height: .98; max-width: 15ch; font-weight: 900; }
.bsw .hero-copy .lead { font-size: clamp(16px, 1.5vw, 20px); color: var(--muted); max-width: 54ch; margin-top: 24px; line-height: 1.7; }
.bsw .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* =========================================================================
   STATEMENT
   ========================================================================= */
.bsw .statement { text-align: center; }
.bsw .statement .eyebrow { margin-bottom: 22px; display: block; }
.bsw .statement h2 { font-size: clamp(30px, 5vw, 58px); line-height: 1.08; max-width: 20ch; margin: 0 auto; font-weight: 700; }
.bsw .statement p { color: var(--muted); max-width: 60ch; margin: 26px auto 0; font-size: 17px; }

/* =========================================================================
   PROJEKTE / RASTER
   ========================================================================= */
.bsw .grid-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 46px; flex-wrap: wrap; }
.bsw .grid-head h2 { font-size: clamp(30px, 4.5vw, 52px); font-weight: 700; }
.bsw .grid-head p { color: var(--muted); max-width: 40ch; }

.bsw .proj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vw, 42px); }
.bsw .proj-frame { position: relative; overflow: hidden; border-radius: 12px; background: var(--wood-light); aspect-ratio: 4 / 3; }
.bsw .proj-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.bsw .proj:hover .proj-frame img { transform: scale(1.05); }
.bsw .proj-cap { margin-top: 15px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.bsw .proj-cap h3 { font-size: clamp(19px, 2vw, 25px); font-weight: 700; }
.bsw .proj-cap span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--green2); font-weight: 700; white-space: nowrap; }
.bsw .proj-cap .arrow { display: inline-block; transition: transform .3s ease; }
.bsw .proj:hover .proj-cap .arrow { transform: translateX(6px); }

/* =========================================================================
   SPLIT
   ========================================================================= */
.bsw .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 86px); align-items: center; }
.bsw .split.reverse .split-media { order: 2; }
.bsw .split-media { position: relative; overflow: hidden; border-radius: 12px; background: var(--wood-light); aspect-ratio: 4/5; }
.bsw .split-media img { width: 100%; height: 100%; object-fit: cover; }
.bsw .split.wide .split-media { aspect-ratio: 4/3; }
.bsw .split-body .eyebrow { margin-bottom: 16px; display: block; }
.bsw .split-body h2 { font-size: clamp(30px, 4.5vw, 54px); margin-bottom: 20px; font-weight: 700; }
.bsw .split-body p { color: var(--muted); margin-bottom: 15px; max-width: 48ch; }
.bsw .split-body .btn { margin-top: 20px; }
.bsw .claim-line { margin-top: 28px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--green2); font-weight: 700; }

/* =========================================================================
   LEISTUNGSLISTE
   ========================================================================= */
.bsw .svc-list { border-top: 1px solid var(--line); }
.bsw .svc-row {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: clamp(16px, 3vw, 40px);
  padding: clamp(22px, 3vw, 36px) 0; border-bottom: 1px solid var(--line);
  transition: padding-left .35s ease;
}
.bsw .svc-row:hover { padding-left: 14px; }
.bsw .svc-row:hover .svc-name { color: var(--green2); }
.bsw .svc-num { font-size: 15px; color: var(--green2); font-weight: 700; }
.bsw .svc-name { font-size: clamp(24px, 3.4vw, 44px); line-height: 1.05; font-weight: 700; transition: color .3s ease; }
.bsw .svc-desc { font-size: 14px; color: var(--muted); max-width: 34ch; text-align: right; }

/* =========================================================================
   MARKENHAUS (dunkle Flaeche)
   ========================================================================= */
.bsw .bg-dark { background: var(--dark); color: #fff; }
.bsw .bg-dark h2, .bsw .bg-dark h3 { color: #fff; }
.bsw .bg-dark .eyebrow { color: var(--green-hi); }
.bsw .bg-dark p { color: rgba(255,255,255,.76); }

.bsw .house-roof { text-align: center; padding: 30px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; margin-bottom: 18px; }
.bsw .house-roof img { height: 52px; width: auto; margin: 0 auto 12px; }
.bsw .house-roof span { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--green-hi); font-weight: 600; }
.bsw .pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bsw .pillar {
  border: 1px solid rgba(255,255,255,.14); border-top: 3px solid var(--c, var(--green-hi));
  border-radius: 12px; padding: 24px 20px; background: rgba(255,255,255,.03);
  display: flex; flex-direction: column;
}
.bsw .pillar-name { font-size: 23px; font-weight: 800; margin-bottom: 4px; color: #fff; }
.bsw .pillar-role { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c, var(--green-hi)); margin-bottom: 14px; font-weight: 700; }
.bsw .pillar p { font-size: 14px; margin-bottom: 14px; }
.bsw .pillar .for { font-size: 12.5px; color: rgba(255,255,255,.62); margin-top: auto; }
.bsw .pillar-link { margin-top: 14px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--green-hi); border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 2px; align-self: flex-start; }
.bsw .pillar-link:hover { border-color: var(--green-hi); }
.bsw .house-base { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px 36px; justify-content: center; padding: 22px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; font-size: 13px; color: rgba(255,255,255,.72); text-align: center; }
.bsw .house-base b { color: var(--green-hi); }

/* =========================================================================
   PROZESS
   ========================================================================= */
.bsw .bg-alt { background: var(--wood-light); }
.bsw .proc-head { text-align: center; margin-bottom: 60px; }
.bsw .proc-head .eyebrow { display: block; margin-bottom: 16px; }
.bsw .proc-head h2 { font-size: clamp(30px, 5vw, 54px); font-weight: 700; }
.bsw .proc-head p { color: var(--muted); max-width: 62ch; margin: 20px auto 0; }
.bsw .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); }
.bsw .step { text-align: center; }
.bsw .step-mark { width: 58px; height: 58px; margin: 0 auto 20px; color: var(--green2); }
.bsw .step h3 { font-size: clamp(21px, 2.4vw, 27px); margin-bottom: 10px; font-weight: 800; }
.bsw .step p { color: var(--muted); font-size: 15px; max-width: 30ch; margin: 0 auto; }

/* =========================================================================
   KENNZAHLEN
   ========================================================================= */
.bsw .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; border-top: 1px solid var(--line); padding-top: 52px; }
.bsw .stat { text-align: center; }
.bsw .stat-num { font-size: clamp(38px, 5vw, 62px); line-height: 1; color: var(--green2); font-weight: 900; letter-spacing: -.02em; }
.bsw .stat-label { font-size: 13px; color: var(--muted); margin-top: 10px; font-weight: 600; }

/* =========================================================================
   CHRONIK
   ========================================================================= */
.bsw .timeline { position: relative; padding-left: 28px; }
.bsw .timeline::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.bsw .tl-item { position: relative; padding: 0 0 28px 26px; }
.bsw .tl-item::before { content: ""; position: absolute; left: -24px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--green2); }
.bsw .tl-item.now::before { background: var(--green); border-color: var(--green); box-shadow: 0 0 0 4px var(--green-light); }
.bsw .tl-year { font-size: 22px; color: var(--green2); font-weight: 800; }
.bsw .tl-item h3 { font-weight: 800; font-size: 15px; margin: 4px 0 4px; }
.bsw .tl-item p { color: var(--muted); font-size: 14px; max-width: 46ch; }

/* =========================================================================
   KONTAKT
   ========================================================================= */
.bsw .contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 6vw, 76px); }
.bsw .contact-grid h2 { font-size: clamp(30px, 4.5vw, 54px); margin-bottom: 18px; font-weight: 700; }
.bsw .contact-grid > div > .eyebrow { display: block; margin-bottom: 16px; }
.bsw .contact-grid .lead { color: var(--muted); margin-bottom: 32px; max-width: 46ch; }

.bsw form .fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bsw .field { display: flex; flex-direction: column; }
.bsw .field.full { grid-column: 1 / -1; }
.bsw .field label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; font-weight: 600; }
.bsw .field input, .bsw .field select, .bsw .field textarea {
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: transparent; border: 0; border-bottom: 2px solid var(--line); padding: 10px 0; transition: border-color .25s ease;
}
.bsw .field input:focus, .bsw .field select:focus, .bsw .field textarea:focus { outline: none; border-color: var(--green2); }
.bsw .field textarea { resize: vertical; min-height: 120px; }
.bsw .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bsw .checkbox-row { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 400; }
.bsw .checkbox-row a { color: var(--green2); text-decoration: underline; }
.bsw .field-note { font-size: 12px; color: var(--muted); margin-top: 12px; }

.bsw .contact-card { background: var(--wood-light); border: 1px solid var(--line); border-radius: 12px; padding: clamp(26px, 3vw, 38px); align-self: start; }
.bsw .contact-card h3 { font-size: 23px; margin-bottom: 4px; font-weight: 800; }
.bsw .contact-card .company { font-size: 13px; color: var(--muted); margin-bottom: 22px; }
.bsw .contact-card .row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 15px; font-size: 14px; color: var(--ink); }
.bsw .contact-card .row svg { flex: none; margin-top: 2px; color: var(--green2); }
.bsw .contact-card .row a { color: var(--ink); }
.bsw .contact-card .row a:hover { color: var(--green2); }
.bsw .contact-card .btn { width: 100%; justify-content: center; margin-top: 10px; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.bsw .footer { background: var(--dark); color: #fff; padding: clamp(50px, 7vw, 86px) 0 40px; }
.bsw .footer h4 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--green-hi); margin-bottom: 18px; font-weight: 700; }
.bsw .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.bsw .footer-logo { height: 44px; width: auto; margin-bottom: 20px; }
.bsw .footer-desc { color: rgba(255,255,255,.72); font-size: 14px; max-width: 34ch; }
.bsw .footer address { font-style: normal; color: rgba(255,255,255,.8); font-size: 14px; line-height: 1.9; }
.bsw .footer ul { list-style: none; }
.bsw .footer ul li { margin-bottom: 10px; }
.bsw .footer ul a { color: rgba(255,255,255,.8); font-size: 14px; }
.bsw .footer ul a:hover { color: var(--green-hi); }
.bsw .footer address a { color: inherit; }
.bsw .footer-bottom { max-width: var(--maxw); margin: 50px auto 0; padding: 24px var(--gut) 0; border-top: 1px solid rgba(255,255,255,.16); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12px; color: rgba(255,255,255,.58); }
.bsw .footer-claim { letter-spacing: .14em; text-transform: uppercase; color: var(--green-hi); font-weight: 700; }
.bsw .footer-legal { display: flex; gap: 20px; }
.bsw .footer-legal a { color: rgba(255,255,255,.58); }
.bsw .footer-legal a:hover { color: var(--green-hi); }

/* =========================================================================
   KI-KENNZEICHNUNG  (einheitlich wie mtwerk.de: schwarzes Signet "AI" im Bild)
   Getragen von img[data-ki]; js/sw.js umschliesst das Bild mit .ki-bild.
   ========================================================================= */
.bsw .ki-bild { position: relative; display: block; }
.bsw .proj-frame .ki-bild, .bsw .hero-media .ki-bild, .bsw .split-media .ki-bild { position: absolute; inset: 0; }
.bsw .proj-frame .ki-bild img, .bsw .hero-media .ki-bild img, .bsw .split-media .ki-bild img { width: 100%; height: 100%; object-fit: cover; }
.bsw .ki-marke {
  position: absolute; right: 10px; bottom: 10px; z-index: 5;
  width: 30px; height: 30px; border-radius: 50%; background: rgba(16,18,18,.82);
  color: #fff; font: 800 11px/1 var(--sans); letter-spacing: .03em;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.4); pointer-events: none;
}
.bsw .ki-marke--klein { width: 22px; height: 22px; font-size: 9px; }
/* kompatibel: textbasiertes KI-Badge (falls genutzt) */
.bsw .ki-badge {
  position: absolute; left: 12px; bottom: 12px; z-index: 5;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: rgba(16,18,18,.8); border: 1px solid rgba(255,255,255,.35);
  border-radius: 6px; padding: 4px 9px; pointer-events: none;
}
/* KI-Hinweistext im Footer */
.bsw .ki-hinweis { max-width: var(--maxw); margin: 36px auto 0; padding: 22px var(--gut) 0; border-top: 1px solid rgba(255,255,255,.16); font-size: 12.5px; color: rgba(255,255,255,.6); line-height: 1.65; }
.bsw .ki-hinweis b { color: #fff; }
.bsw .ki-hinweis .ki-marke { position: static; display: inline-flex; width: 20px; height: 20px; font-size: 9px; vertical-align: middle; margin: 0 3px; }

/* =========================================================================
   REVEAL
   ========================================================================= */
.bsw .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.bsw .reveal.in { opacity: 1; transform: none; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 960px) {
  .bsw .nav-links, .bsw .nav-cta { display: none; }
  .bsw .nav-toggle { display: block; }
  .bsw .nav.open .nav-links {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--line); padding: 10px var(--gut) 24px;
  }
  .bsw .nav.open .nav-links > li > a,
  .bsw .nav.open .nav-links .nav-group-btn { padding: 14px 0; border-bottom: 1px solid var(--line); width: 100%; justify-content: space-between; }
  .bsw .nav-group .nav-mega {
    position: static; width: 100%; box-shadow: none; border: 0; border-radius: 0;
    padding: 6px 0 10px; opacity: 1; visibility: visible; transform: none; display: none;
  }
  .bsw .nav-group.open .nav-mega { display: block; }
  .bsw .nav-mega-grid { grid-template-columns: 1fr; }
  .bsw .proj-grid { grid-template-columns: 1fr; }
  .bsw .split, .bsw .split.reverse { grid-template-columns: 1fr; }
  .bsw .split.reverse .split-media { order: 0; }
  .bsw .pillars { grid-template-columns: 1fr 1fr; }
  .bsw .steps { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .bsw .stats { grid-template-columns: 1fr 1fr; gap: 40px 20px; }
  .bsw .contact-grid { grid-template-columns: 1fr; }
  .bsw form .fgrid { grid-template-columns: 1fr; }
  .bsw .footer-grid { grid-template-columns: 1fr 1fr; }
  .bsw .svc-desc { display: none; }
  .bsw .svc-row { grid-template-columns: 44px 1fr; }
}
@media (max-width: 560px) {
  .bsw .pillars { grid-template-columns: 1fr; }
  .bsw .stats { grid-template-columns: 1fr; }
  .bsw .footer-grid { grid-template-columns: 1fr; }
  .bsw .hero-copy { margin-top: clamp(20px, 6vw, 40px); }
  .bsw .proj-cap span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bsw * { animation: none !important; transition: none !important; }
  .bsw .reveal { opacity: 1; transform: none; }
}

/* ── Cookie-Banner (DSGVO) ───────────────────────────── */
.bsw .cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  padding: 16px; display: flex; justify-content: center;
  opacity: 0; transform: translateY(16px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.bsw .cookie.is-in { opacity: 1; transform: none; pointer-events: auto; }
.bsw .cookie-inner {
  width: 100%; max-width: 1180px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 50px rgba(26,34,34,.16);
  padding: 20px 24px;
  display: flex; align-items: center; gap: 28px;
}
.bsw .cookie-text strong { display: block; font-weight: 700; color: var(--dark); font-size: 15px; margin-bottom: 4px; }
.bsw .cookie-text p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); max-width: 70ch; }
.bsw .cookie-text a { color: var(--green2); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.bsw .cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.bsw .cookie-actions .btn { white-space: nowrap; }

@media (max-width: 720px) {
  .bsw .cookie { padding: 12px; }
  .bsw .cookie-inner { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px; }
  .bsw .cookie-actions { flex-direction: column-reverse; }
  .bsw .cookie-actions .btn { width: 100%; justify-content: center; }
}

/* =========================================================================
   UNTERSEITEN-BAUSTEINE (Seitenkopf, Modell-/Dekor-Karten, Hinweis, Ticks)
   ========================================================================= */
.bsw .page-head { background: var(--wood-light); border-bottom: 1px solid var(--line); padding: clamp(40px,7vw,104px) 0 clamp(30px,5vw,58px); }
.bsw .page-head .eyebrow { display:block; margin-bottom:14px; }
.bsw .page-head h1 { font-size: clamp(34px,6vw,74px); font-weight:900; max-width:20ch; line-height:1.0; }
.bsw .page-head .lead { color:var(--muted); max-width:62ch; margin-top:20px; font-size:clamp(16px,1.4vw,19px); line-height:1.7; }
.bsw .chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.bsw .chips a { font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--green2); border:1px solid var(--line); border-radius:999px; padding:8px 16px; background:#fff; transition:all .2s ease; }
.bsw .chips a:hover { border-color:var(--green); background:var(--green-light); transform:translateY(-1px); }

.bsw .ticks { list-style:none; margin:20px 0 0; display:grid; gap:11px; }
.bsw .ticks li { position:relative; padding-left:28px; font-size:15px; color:var(--ink); line-height:1.5; }
.bsw .ticks li::before { content:""; position:absolute; left:2px; top:6px; width:11px; height:11px; border-radius:50%; background:var(--green-light); border:2px solid var(--green2); }

.bsw .model-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.2vw,28px); }
.bsw .model-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.bsw .model { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.bsw .model-pic { position:relative; aspect-ratio:1/1; background:var(--wood-light); overflow:hidden; }
.bsw .model-pic img { width:100%; height:100%; object-fit:cover; display:block; }
.bsw .model-b { padding:16px 18px; display:flex; flex-direction:column; flex:1; }
.bsw .model-code { font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--green2); }
.bsw .model-name { font-size:16px; font-weight:700; margin:3px 0 4px; }
.bsw .model-mass { font-size:12.5px; color:var(--muted); margin-bottom:12px; }
.bsw .model-preis { display:flex; flex-direction:column; gap:4px; border-top:1px solid var(--line); padding-top:11px; margin-top:auto; }
.bsw .model-preis span { display:flex; justify-content:space-between; gap:12px; font-size:12.5px; color:var(--muted); align-items:baseline; }
.bsw .model-preis b { color:var(--ink); font-weight:800; font-size:14px; white-space:nowrap; }

.bsw .dekor-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,24px); }
.bsw .dekor { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; margin:0; }
.bsw .dekor img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.bsw .dekor figcaption { padding:10px 13px; }
.bsw .dekor figcaption span { font-size:11px; color:var(--muted); display:block; letter-spacing:.04em; }
.bsw .dekor figcaption b { font-size:14px; font-weight:700; }

.bsw .note { display:flex; gap:14px; align-items:flex-start; margin-top:30px; padding:18px 20px; background:var(--wood-light); border:1px solid var(--line); border-radius:12px; }
.bsw .note svg { flex:none; margin-top:2px; color:var(--green2); }
.bsw .note b { display:block; font-size:14px; color:var(--dark); margin-bottom:4px; }
.bsw .note p { font-size:13.5px; color:var(--muted); line-height:1.6; margin:0; max-width:none; }

@media (max-width:960px){
  .bsw .model-grid, .bsw .model-grid.cols-3 { grid-template-columns:1fr 1fr; }
  .bsw .dekor-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .bsw .model-grid, .bsw .model-grid.cols-3 { grid-template-columns:1fr; }
}
/* =========================================================================
   AUFKLAPPMENUE-INHALT (Reiter mit Linkliste) – links verankert, schlicht
   ========================================================================= */
@media (min-width: 961px) {
  .bsw .nav-mega.is-produkte { right: auto; left: 0; width: min(320px, 92vw); }
}
.bsw .nav-mega.is-produkte { padding: 10px; }
.bsw .nav-mega.is-produkte .nav-mega-head { margin: 4px 10px 8px; }
.bsw .nav-mega.is-produkte .nav-mega-grid { grid-template-columns: 1fr; gap: 2px; }
.bsw .nav-mega.is-produkte .prod-link { display: block; padding: 9px 10px; border-radius: 10px; color: var(--dark); }
.bsw .nav-mega.is-produkte .prod-link b { display: block; font-size: 14px; font-weight: 700; }
.bsw .nav-mega.is-produkte .prod-link span { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.bsw .nav-mega.is-produkte .prod-link:hover { background: rgba(0,0,0,.05); color: var(--green2); }
.bsw .nav-mega.is-produkte .prod-link:hover span { color: var(--green2); }