/* =====================================================================
   CLAUSWÄRMEBRÜCKE® — Stylesheet (Relaunch im Muster-Design, September 2026)
   Schriften: Manrope (Überschriften) · IBM Plex Sans (Fließtext) · IBM Plex Mono (Werte)
   — selbst gehostet, siehe assets/fonts/fonts.css
   ===================================================================== */

:root{
  color-scheme:light;
  --navy:#0b2545; --navy-mid:#163a6b; --navy-deep:#071a33; --navy-light:#e8edf5;
  /* --gold-dark, --text-soft, --text-faint, --steel: auf WCAG-AA-Kontrast (mind. 4,5:1 auf hellem Grund)
     angehoben, Audit F-006/F-007, 01.11.2026. Vorher #a87820 / #6b7a8d / #8a94a3 / #8a94a3. */
  --gold:#c8972a; --gold-dark:#8d651b; --gold-light:#fdf6e7;
  --red:#c0392b;
  --bg:#faf9f6; --white:#ffffff; --paper:#f3f1eb;
  --text:#1a2332; --text-mid:#4a5568; --text-soft:#586474; --text-faint:#626d7d; --text-light:#718096;
  --border:#e6e3dc; --border-soft:#eeebe4; --steel:#626d7d;
  --success:#2e7d4f; --error:#c0392b;
  --font-display:Manrope,"Segoe UI",system-ui,sans-serif;
  --font-body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono","Cascadia Code",Consolas,monospace;
  --radius:6px; --radius-lg:10px;
  --shadow-md:0 30px 60px -30px rgba(11,37,69,.35);
  --shadow-sm:0 8px 24px -12px rgba(11,37,69,.25);
  --nav-h:78px;
}

/* ---------- Basis ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{font-family:var(--font-body);color:var(--text);background:var(--bg);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
h1,h2,h3,h4,.h{font-family:var(--font-display);letter-spacing:-.02em;color:var(--navy);line-height:1.1}
strong{font-weight:600}
.wrap{width:min(1280px,calc(100% - 48px));margin:0 auto}
.mono{font-family:var(--font-mono)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--navy);color:#fff;padding:10px 16px;border-radius:var(--radius)}
.skip-link:focus{left:12px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:var(--radius);font-weight:600;font-size:15px;line-height:1;white-space:nowrap;border:1.5px solid transparent;transition:background .18s,color .18s,border-color .18s}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn-gold{background:var(--gold);color:var(--navy);font-weight:700}
.btn-gold:hover{background:#d6a63a}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-mid)}
.btn-outline-dark{border-color:var(--navy);color:var(--navy);background:transparent}
.btn-outline-dark:hover{background:var(--navy);color:#fff}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{background:var(--paper)}
.btn-link{display:inline-flex;align-items:center;gap:8px;height:52px;font-weight:600;font-size:15px;color:var(--navy);border-bottom:2px solid #d9d4c9;white-space:nowrap}
.btn-link:hover{border-color:var(--gold)}
.btn-link svg{width:16px;height:16px}
.btn-lg{height:56px;font-size:16px;padding:0 30px}

/* ---------- Kleinteile ---------- */
.eyebrow{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dark)} /* hell: Dunkelgold (Kontrast); Hero: kick.css */
.eyebrow-line::before{content:"";display:block;width:28px;height:2px;background:var(--gold)}
.arrow-ico{width:18px;height:18px;flex-shrink:0}

/* ---------- Kopfzeile ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(250,249,246,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--nav-h)}
.brand{display:flex;flex-direction:column;gap:5px;flex-shrink:0}
.wm{font-family:var(--font-display);font-size:22px;line-height:1;color:var(--navy);letter-spacing:-.02em;white-space:nowrap}
.wm-light{font-weight:400}
.wm-bold{font-weight:800}
.wm-r{font-size:10px;font-weight:600;vertical-align:super;margin-left:2px}
.wm-dots{display:flex;align-items:center;gap:4px;padding-left:62px}
.wm-dots span{display:block;border-radius:50%;background:var(--red);width:var(--d);height:var(--d)}
.wm-dots span:nth-child(1),.wm-dots span:nth-child(9){--d:3px}
.wm-dots span:nth-child(2),.wm-dots span:nth-child(8){--d:4px}
.wm-dots span:nth-child(3),.wm-dots span:nth-child(7){--d:5px}
.wm-dots span:nth-child(4),.wm-dots span:nth-child(6){--d:6px}
.wm-dots span:nth-child(5){--d:7px}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none}
.nav-links > li{position:relative}
.nav-links > li > a{font-size:15px;font-weight:500;color:#3d4a5c;padding:26px 0;display:inline-block}
.nav-links > li > a:hover{color:var(--navy)}
.dropdown{position:absolute;top:100%;left:-14px;min-width:250px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:8px;display:none;flex-direction:column;z-index:50}
.dropdown a{padding:10px 12px;border-radius:var(--radius);font-size:14.5px;font-weight:500;color:var(--text-mid)}
.dropdown a:hover{background:var(--paper);color:var(--navy)}
.nav-links > li:hover > .dropdown,.nav-links > li:focus-within > .dropdown{display:flex}
.dropdown-right{left:auto;right:-14px}
.nav-right{display:flex;align-items:center;gap:16px;flex-shrink:0}
.nav-tel{font-size:15px;font-weight:500;color:#3d4a5c;white-space:nowrap}
.nav-tel:hover{color:var(--navy)}
.nav-cta{display:inline-flex;align-items:center;height:46px;padding:0 22px;border-radius:var(--radius);background:var(--navy);color:#fff;font-size:15px;font-weight:600;white-space:nowrap}
.nav-cta:hover{background:var(--navy-mid)}
.lang-switch{display:flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff}
.lang-switch button{padding:0 11px;height:36px;font-size:12.5px;font-weight:700;color:var(--text-soft);letter-spacing:.04em}
.lang-switch button.active{background:var(--navy);color:#fff}
.hamburger{display:none;width:44px;height:44px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.hamburger span{display:block;width:20px;height:2px;background:var(--navy);border-radius:2px}
.mobile-menu{display:none;flex-direction:column;background:#fff;border-top:1px solid var(--border);padding:8px 24px 22px;max-height:calc(100vh - var(--nav-h));overflow:auto}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:13px 0;border-bottom:1px solid var(--border-soft);font-weight:600;color:var(--navy);font-size:16px}
.mobile-menu a.mm-sub{font-weight:400;color:var(--text-soft);font-size:14px;padding:10px 0}
.mobile-menu a.mm-cta{margin-top:16px;border:0;background:var(--gold);color:var(--navy);border-radius:var(--radius);text-align:center;padding:15px;font-weight:700}

/* ---------- Hero ---------- */
.hero{padding:88px 0 72px}
.hero-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:26px;max-width:600px}
.hero h1{font-size:clamp(2.4rem,4.4vw,3.75rem);font-weight:800;line-height:1.05}
.hero-sub{font-size:19px;line-height:1.6;color:var(--text-mid)}
.hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding-top:4px}
.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding-top:28px;border-top:1px solid var(--border);margin-top:10px}
.stat-item{display:flex;flex-direction:column;gap:5px}
.stat-n{font-family:var(--font-display);font-size:34px;font-weight:800;color:var(--navy);line-height:1;letter-spacing:-.02em}
.stat-l{font-size:14px;color:var(--text-soft);line-height:1.4}
.hero-figure{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);background:var(--navy)}
.hero-figure img{width:100%;height:520px;object-fit:cover}
.hero-cap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;background:var(--navy);color:#fff;font-size:14px;font-weight:500}
.hero-cap .mono{font-size:12px;color:#c8d2e0;letter-spacing:.06em;white-space:nowrap}

/* ---------- Vertrauensleiste ---------- */
.trust-strip{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:24px 32px;border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;flex-wrap:wrap}
.trust-items{display:flex;align-items:center;gap:40px;flex-wrap:wrap;font-size:14px;font-weight:500;color:#3d4a5c}
.trust-item{display:flex;align-items:center;gap:10px}
.trust-item svg{width:20px;height:20px;flex-shrink:0}
.trust-mark{font-size:13px;color:var(--text-faint)}

/* ---------- Abschnitte ---------- */
.section{padding:104px 0 96px}
.section-tight{padding:72px 0}
.section-white{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section-dark{background:var(--navy);color:#fff}
.section-dark h2,.section-dark h3,.section-dark h4{color:#fff}
.section-dark .sd{color:#b8c4d6}
.section-head{display:flex;flex-direction:column;gap:14px;max-width:680px;margin-bottom:44px}
.section-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:40px;flex-wrap:wrap}
.section-head-row .section-head{margin-bottom:0}
.sh{font-size:clamp(1.9rem,3.2vw,2.625rem);font-weight:800;line-height:1.1}
.sd{font-size:17px;line-height:1.6;color:var(--text-mid)}

/* ---------- Modelle ---------- */
.models-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.model-card{display:flex;flex-direction:column;gap:18px;padding:20px 20px 20px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;text-align:left;transition:border-color .18s,box-shadow .18s,transform .18s}
.model-card:hover{border-color:var(--navy);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.model-card.active{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,151,42,.22)}
.model-img{position:relative;aspect-ratio:5/2;display:flex;align-items:center;justify-content:center;background:var(--paper);border-radius:var(--radius);overflow:hidden}
.model-img picture{width:100%;height:100%}
.model-img img{width:100%;height:100%;object-fit:contain}
.model-img-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;font-size:12px;color:var(--text-faint)}
.mi-icon{font-size:20px;opacity:.6}
.model-badge{position:absolute;top:8px;left:8px;background:var(--gold);color:var(--navy);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:4px 8px;border-radius:4px}
.model-head{display:flex;flex-direction:column;gap:6px}
.model-name{font-family:var(--font-display);font-size:26px;font-weight:800;color:var(--navy);line-height:1;letter-spacing:-.02em}
.model-len{font-size:13px;color:var(--text-faint)}
.bars{display:flex;align-items:flex-end;gap:3px;height:26px}
.bars span{display:block;flex:1;height:100%;background:#dfe4ec;border-radius:2px;transition:background .18s}
.model-card:hover .bars span,.model-card.active .bars span{background:var(--gold)}
.model-specs{display:flex;flex-direction:column;gap:9px;padding-top:16px;border-top:1px solid var(--border-soft);font-size:14px}
.spec{display:flex;justify-content:space-between;gap:10px}
.spec dt{color:var(--text-soft)}
.spec dd{font-weight:600;color:var(--text);text-align:right}
.model-cta{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;height:44px;border:1.5px solid var(--navy);border-radius:var(--radius);font-size:14px;font-weight:600;color:var(--navy);width:100%;transition:background .18s,color .18s}
.model-card:hover .model-cta,.model-card.active .model-cta{background:var(--navy);color:#fff}
.models-note{margin-top:20px;font-size:13px;color:var(--text-faint);line-height:1.5}

/* ---------- Technik (dunkel) ---------- */
.tech-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:start}
.tech-grid .section-head{margin-bottom:32px}
.tech-rows{border-top:1px solid rgba(255,255,255,.14)}
.tech-row{display:grid;grid-template-columns:180px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.tech-row h4{font-size:16px;font-weight:700;color:#fff;letter-spacing:-.01em}
.tech-row p{font-size:15px;line-height:1.55;color:#b8c4d6}
.tech-figure{position:sticky;top:calc(var(--nav-h) + 24px);display:flex;flex-direction:column;gap:14px}
.tech-figure-box{border-radius:var(--radius-lg);overflow:hidden;background:#fff}
.tech-figure-box img{width:100%;height:auto}
.tech-figcap{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:#8fa0b8;flex-wrap:wrap}
.tech-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:6px}
.tech-stat{padding:16px 18px;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:4px}
.tech-stat b{font-family:var(--font-display);font-size:22px;font-weight:800;color:#fff;line-height:1;letter-spacing:-.02em}
.tech-stat span{font-size:12.5px;color:#8fa0b8;line-height:1.35}

/* ---------- Vorteile ---------- */
.vorteile-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.vorteil-card{display:flex;flex-direction:column;gap:14px;padding:28px 24px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg)}
.vorteil-num{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--gold-dark)}
.vorteil-title{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--navy);line-height:1.25;letter-spacing:-.01em}
.vorteil-desc{font-size:14.5px;line-height:1.6;color:var(--text-mid)}
.haccp-box{margin-top:24px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;padding:28px 32px;background:#fff;border:1px solid var(--border);border-left:4px solid var(--gold);border-radius:var(--radius-lg)}
.haccp-ico{font-size:28px;line-height:1}
.haccp-badge{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:8px}
.haccp-title{font-family:var(--font-display);font-size:21px;font-weight:700;color:var(--navy);margin-bottom:10px;letter-spacing:-.01em}
.haccp-desc{font-size:15px;line-height:1.65;color:var(--text-mid)}
.haccp-note{margin-top:10px;font-size:13px;color:var(--text-faint);line-height:1.55}

/* ---------- Sonderbau ---------- */
.sonder-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:center}
.mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.mosaic figure{display:flex;flex-direction:column;gap:10px}
.mosaic figure:first-child{grid-column:span 2}
.mosaic img{width:100%;height:220px;object-fit:cover;border-radius:var(--radius-lg);cursor:zoom-in;transition:transform .3s}
.mosaic img:hover{transform:scale(1.015)}
.mosaic figure:first-child img{height:300px}
.mosaic figcaption{font-size:13px;color:var(--text-soft)}
.sonder-copy{display:flex;flex-direction:column;gap:24px}
.tech-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 32px}
.tech-item{display:flex;gap:12px;align-items:flex-start}
.tech-dot{flex-shrink:0;width:7px;height:7px;border-radius:50%;background:var(--red);margin-top:9px}
.tech-content h4{font-size:15.5px;font-weight:700;color:var(--navy);margin-bottom:3px;letter-spacing:-.01em}
.tech-content p{font-size:14px;line-height:1.55;color:var(--text-mid)}
.fh-box{padding:20px 22px;background:var(--gold-light);border-left:4px solid var(--gold);border-radius:var(--radius-lg)}
.fh-title{display:block;font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--navy);margin-bottom:6px}
.fh-box p{font-size:14.5px;line-height:1.65;color:var(--text-mid)}
.sb-gallery-head{margin:80px 0 24px;display:flex;flex-direction:column;gap:8px}
.sb-gallery-head h3{font-size:26px;font-weight:800}
.sb-gallery-head p{color:var(--text-mid);font-size:15px}
.sb-gallery-wrap{position:relative}
.sb-gallery{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin}
.sb-tile{position:relative;flex:0 0 300px;aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;cursor:zoom-in;scroll-snap-align:start;background:var(--paper)}
.sb-tile img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.sb-tile:hover img{transform:scale(1.04)}
.sb-zoom{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;background:rgba(11,37,69,.75);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px}
.sb-tile-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;background:linear-gradient(transparent,rgba(11,37,69,.85));color:#fff;font-size:13.5px;font-weight:600}
.sb-arrow{position:absolute;top:calc(50% - 26px);width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-sm);color:var(--navy);font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;z-index:2}
.sb-arrow-l{left:-22px}
.sb-arrow-r{right:-22px}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;background:rgba(7,16,30,.92);z-index:300;display:none;align-items:center;justify-content:center;padding:40px}
.lightbox.open{display:flex}
.lightbox img{max-width:min(1100px,100%);max-height:80vh;border-radius:var(--radius);box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.lightbox-close{position:absolute;top:18px;right:22px;color:#fff;font-size:34px;width:48px;height:48px}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:44px;width:56px;height:72px;display:flex;align-items:center;justify-content:center;opacity:.8}
.lightbox-nav:hover{opacity:1}
.lightbox-prev{left:16px}
.lightbox-next{right:16px}
.lightbox-cap{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#c8d2e0;font-size:14px;padding:0 20px}

/* ---------- Sonderposten / Restbestände ---------- */
.rb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rb-empty{grid-column:1/-1;padding:32px;border:1px dashed var(--border);border-radius:var(--radius-lg);text-align:center;color:var(--text-faint);font-size:15px;background:#fff}
.rb-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
.rb-img{position:relative;aspect-ratio:4/3;background:var(--paper)}
.rb-img img{width:100%;height:100%;object-fit:cover}
.rb-img-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--text-faint);font-size:13px}
.rb-img-ph .ic{font-size:26px;opacity:.6}
.rb-badge{position:absolute;top:10px;left:10px;background:var(--gold);color:var(--navy);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:5px 9px;border-radius:4px}
.rb-sold{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(11,37,69,.7);color:#fff;font-family:var(--font-display);font-size:26px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.rb-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:12px;flex:1}
.rb-name{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--navy)}
.rb-specs{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:14px}
.rb-specs li{display:flex;justify-content:space-between;gap:12px}
.rb-specs dt{color:var(--text-soft)}
.rb-specs dd{font-weight:600;text-align:right}
.rb-desc{font-size:14px;color:var(--text-mid);line-height:1.55}
.rb-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--border-soft);flex-wrap:wrap}
.rb-price-now{font-family:var(--font-display);font-size:20px;font-weight:800;color:var(--navy)}
.rb-price-old{margin-left:8px;font-size:13px;color:var(--text-faint);text-decoration:line-through}
.rb-btn{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:var(--radius);background:var(--navy);color:#fff;font-size:13.5px;font-weight:600}

/* ---------- Edelstahl- & Systemlösungen ---------- */
.es-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.es-card{display:flex;flex-direction:column;gap:12px;padding:26px 24px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg)}
.es-icon{font-size:24px;line-height:1}
.es-title{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--navy);letter-spacing:-.01em}
.es-desc{font-size:14.5px;line-height:1.6;color:var(--text-mid)}
.es-note{margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 32px;background:var(--navy);color:#fff;border-radius:var(--radius-lg);flex-wrap:wrap}
.es-note-txt{display:flex;flex-direction:column;gap:4px}
.es-note-txt strong{font-family:var(--font-display);font-size:19px;font-weight:700}
.es-note-txt span{color:#b8c4d6;font-size:15px}

/* ---------- Konfigurator ---------- */
.konfig-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start}
.konfig-form{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.konfig-form-header{padding:26px 32px;background:var(--navy);color:#fff}
.konfig-form-header h3{color:#fff;font-size:22px;font-weight:800;margin-bottom:4px}
.konfig-form-header p{color:#b8c4d6;font-size:14px}
.konfig-form-body{padding:8px 32px 32px;position:relative}
.fs{padding:28px 0;border-bottom:1px solid var(--border-soft)}
.fs:last-of-type{border-bottom:0}
.fs-title{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-size:19px;font-weight:800;color:var(--navy);margin-bottom:20px;letter-spacing:-.01em}
.fs-num{width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;flex-shrink:0}
.fr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.fr3{grid-template-columns:repeat(3,minmax(0,1fr))}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:13.5px;font-weight:600;color:var(--navy)}
.field input[type=text],.field input[type=number],.field input[type=email],.field input[type=tel],.field select,.field textarea{width:100%;height:46px;padding:0 14px;border:1px solid #d5d2ca;border-radius:var(--radius);background:#fff;font:inherit;font-size:15px;color:var(--text);transition:border-color .15s,box-shadow .15s}
.field textarea{height:auto;padding:12px 14px;resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(11,37,69,.12)}
.field input:read-only{background:var(--paper);color:var(--text-mid)}
.field input.err,.field select.err,.field textarea.err{border-color:var(--error);box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.helper{font-size:12.5px;color:var(--text-soft);line-height:1.5}
.errmsg{display:none;font-size:12.5px;color:var(--error);font-weight:600}
.errmsg.show{display:block}
/* Foto-Auswahl (bewertung.html): Dateifeld unsichtbar, aber per Tastatur erreichbar; Fokus am Button sichtbar */
.bew-foto-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.bew-foto-input:focus-visible ~ .bew-foto-btn{outline:2px solid var(--gold);outline-offset:3px}
.baureihe-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:10px}
.mbtn-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.mbtn{display:flex;flex-direction:column;gap:4px;padding:12px;border:1.5px solid var(--border);border-radius:var(--radius);background:#fff;text-align:left;transition:border-color .15s,background .15s}
.mbtn:hover{border-color:var(--navy)}
.mbtn.sel{border-color:var(--navy);background:var(--navy)}
.mbtn-name{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--navy)}
.mbtn.sel .mbtn-name{color:#fff}
.mbtn-info{font-size:11.5px;color:var(--text-soft);line-height:1.35}
.mbtn.sel .mbtn-info{color:#c8d2e0}
.tog-row{display:flex;gap:8px;flex-wrap:wrap}
.tog-opt{flex:1;min-width:120px;position:relative}
.tog-opt input{position:absolute;opacity:0;width:0;height:0}
.tog-btn{display:flex;align-items:center;justify-content:center;height:44px;padding:0 12px;border:1.5px solid var(--border);border-radius:var(--radius);font-size:13.5px;font-weight:600;color:var(--text-mid);cursor:pointer;text-align:center;background:#fff;transition:border-color .15s,background .15s,color .15s}
.tog-opt input:checked + .tog-btn{border-color:var(--navy);background:var(--navy);color:#fff}
.tog-opt input:focus-visible + .tog-btn{outline:2px solid var(--gold);outline-offset:2px}
.pal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.pal-opt{position:relative}
.pal-opt input{position:absolute;opacity:0;width:0;height:0}
.pal-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border:1.5px solid var(--border);border-radius:var(--radius);font-size:13px;font-weight:600;color:var(--text-mid);cursor:pointer;background:#fff;transition:border-color .15s,box-shadow .15s}
.pal-opt input:checked + .pal-btn{border-color:var(--navy);box-shadow:0 0 0 3px rgba(11,37,69,.12);color:var(--navy)}
.pal-opt input:focus-visible + .pal-btn{outline:2px solid var(--gold);outline-offset:2px}
.swatch{width:34px;height:34px;border-radius:50%;border:1px solid rgba(0,0,0,.12)}
.sw-es{background:linear-gradient(135deg,#e6e9ee,#b9c0c9)}
.sw-bk{background:#1c1c1f}
.sw-at{background:#3f4852}
.sw-wh{background:#f7f7f7}
.sw-so{background:conic-gradient(#c8972a,#c0392b,#163a6b,#2e7d4f,#c8972a)}
.cns-badge{margin-top:16px;display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--gold-light);border-left:3px solid var(--gold);border-radius:var(--radius);font-size:13.5px;color:var(--navy);line-height:1.5}
.info-box{padding:12px 14px;background:var(--gold-light);border-left:3px solid var(--gold);border-radius:var(--radius);font-size:13px;color:var(--navy);line-height:1.55}
.info-box-green{background:#e8f3ec;border-left-color:var(--success)}
.check-row{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-weight:600;color:var(--navy)}
.check-row input{width:20px;height:20px;margin-top:1px;flex-shrink:0;cursor:pointer;accent-color:var(--gold)}
.check-row small{display:block;font-weight:400;font-size:13px;color:var(--text-mid);line-height:1.5}
.form-actions{display:flex;gap:12px;flex-wrap:wrap;padding-top:26px}
.form-actions .btn{height:50px;padding:0 22px;font-size:14.5px}
.result-box{display:none;margin-top:24px;padding:22px 24px;background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-lg)}
.result-box h4{font-size:16px;margin-bottom:12px}
.result-box pre{font-family:var(--font-mono);font-size:12.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word;color:var(--text)}
.success-bar{display:none;margin-top:16px;padding:14px 18px;background:#e8f3ec;border-left:4px solid var(--success);border-radius:var(--radius);color:#1f5c38;font-size:14.5px;font-weight:600}
.error-bar{display:none;margin-top:16px;padding:14px 18px;background:#fbeae8;border-left:4px solid var(--error);border-radius:var(--radius);color:#8a2a1f;font-size:14.5px}
.error-bar.show{display:block}
.error-bar-fallback{display:inline-block;margin-top:6px;font-weight:700;color:var(--navy);text-decoration:underline}
.preview-sticky{position:sticky;top:calc(var(--nav-h) + 20px)}
.preview-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.pv-img{background:var(--paper);display:flex;align-items:center;justify-content:center}
.pv-img img{width:100%;height:auto;display:none}
.pv-body{padding:22px 24px 24px}
.pv-model{font-family:var(--font-display);font-size:28px;font-weight:800;color:var(--navy);line-height:1;letter-spacing:-.02em}
.pv-sub{font-size:12.5px;color:var(--text-faint);margin:6px 0 18px}
.pv-specs{display:flex;flex-direction:column;border-top:1px solid var(--border-soft)}
.pv-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border-soft);font-size:13.5px}
.pv-row dt{color:var(--text-soft)}
.pv-row dd{font-weight:600;color:var(--text);text-align:right}
.price-box{margin-top:18px;padding:16px 18px;background:var(--navy);border-radius:var(--radius);color:#fff}
.price-tag{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#c8d2e0;font-weight:600}
.price-val{font-family:var(--font-display);font-size:24px;font-weight:800;margin-top:4px;color:var(--gold)}
.price-hint{display:none;font-size:12.5px;color:var(--gold);font-weight:600;margin-top:6px;line-height:1.45}
.price-note{font-size:11.5px;color:#a9b7cb;line-height:1.5;margin-top:8px}

/* ---------- Branchen ---------- */
.branchen-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.branche-card{display:flex;flex-direction:column;gap:8px;padding:24px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg)}
.br-icon{font-size:22px;line-height:1;margin-bottom:6px}
.br-title{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--navy);letter-spacing:-.01em}
.br-desc{font-size:14px;line-height:1.6;color:var(--text-mid)}

/* ---------- Referenzen ---------- */
.ref-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ref-card{display:flex;flex-direction:column;gap:20px;padding:40px 44px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg)}
.ref-card svg{width:36px;height:28px;flex-shrink:0}
.ref-card blockquote{font-family:var(--font-display);font-size:21px;line-height:1.45;font-weight:600;color:var(--navy);letter-spacing:-.01em;flex:1}
.ref-by{font-size:14px;color:var(--text-soft);line-height:1.5;padding-top:18px;border-top:1px solid var(--border-soft)}
.ref-by strong{display:block;color:var(--text);font-weight:600}
.ref-note{margin-top:16px;font-size:13px;color:var(--text-faint)}

/* ---------- Ablauf ---------- */
.process-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ps{padding:26px 24px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:10px}
.ps-num{font-family:var(--font-display);font-size:34px;font-weight:800;color:var(--gold);line-height:1}
.ps-title{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--navy)}
.ps-desc{font-size:14px;line-height:1.6;color:var(--text-mid)}

/* ---------- Downloads ---------- */
.dl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.dl-card{display:flex;flex-direction:column;gap:10px;padding:26px 24px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg)}
.dl-icon{font-size:26px;line-height:1}
.dl-title{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--navy)}
.dl-desc{font-size:14px;line-height:1.6;color:var(--text-mid);flex:1}
.dl-btn{display:inline-flex;align-items:center;justify-content:center;height:44px;border-radius:var(--radius);background:var(--navy);color:#fff;font-weight:600;font-size:14px;margin-top:8px}
.dl-btn-disabled{background:var(--paper);color:var(--text-faint);cursor:not-allowed;border:1px dashed var(--border)}
.dl-meta{font-size:12px;color:var(--text-faint)}
.dl-qr-box{margin-top:16px;padding:24px 28px;background:var(--gold-light);border-left:4px solid var(--gold);border-radius:var(--radius-lg)}
.dl-qr-title{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--navy);margin-bottom:6px}
.dl-qr-desc{font-size:14.5px;line-height:1.6;color:var(--text-mid)}

/* ---------- Kontakt ---------- */
.kontakt-top{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-bottom:56px}
.kontakt-top .section-head{margin-bottom:0}
.kontakt-cta{display:flex;flex-direction:column;gap:14px}
.kontakt-cta .btn{width:100%;white-space:normal;height:auto;min-height:56px;padding-top:12px;padding-bottom:12px;line-height:1.3;text-align:center}
.kontakt-cta-note{font-size:13px;color:var(--text-faint);text-align:center}
.team-head{display:flex;flex-direction:column;gap:6px;margin-bottom:20px}
.team-head h3{font-size:24px;font-weight:800}
.team-head p{font-size:15px;color:var(--text-mid)}
.team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.team-card{display:flex;flex-direction:column;gap:6px;padding:26px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg)}
.team-name{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--navy)}
.team-role{font-size:13px;color:var(--text-faint)}
.team-desc{font-size:14px;line-height:1.55;color:var(--text-mid);margin:8px 0 14px}
.team-actions{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.team-btn{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:0 14px;border:1px solid var(--border);border-radius:var(--radius);font-size:14px;font-weight:500;color:var(--navy);background:#fff;transition:border-color .15s}
.team-btn:hover{border-color:var(--navy)}
.team-btn-wa{background:#e9f7ee;border-color:#cfe8d6;color:#1f5c38}
.team-ic{display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.team-ic svg{width:18px;height:18px}
.team-btn span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kontakt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.kontakt-card{display:flex;flex-direction:column;gap:8px;padding:24px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg)}
.kk-icon{font-size:20px}
.kk-title{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--navy)}
.kk-desc{font-size:14.5px;line-height:1.6;color:var(--text-mid)}
.kk-inline{font-weight:500}
.kk-link{margin-top:auto;padding-top:6px;font-size:14px;font-weight:600;color:var(--gold-dark)}

/* ---------- Fußzeile ---------- */
.site-footer{border-top:1px solid var(--border);padding:56px 0 28px;background:var(--bg)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:36px}
.footer-brand p{font-size:14px;line-height:1.65;color:var(--text-mid);margin:16px 0 18px;max-width:420px}
.footer-social{display:flex;gap:8px}
.fs-link{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:12.5px;font-weight:600;color:var(--text-mid);background:#fff}
.fs-link:hover{border-color:var(--navy);color:var(--navy)}
.fc h4{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);margin-bottom:14px;font-weight:600}
.fc ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.fc a{font-size:14.5px;color:var(--text-mid)}
.fc a:hover{color:var(--navy)}
.footer-b2b{font-size:12.5px;color:var(--text-faint);padding:16px 0;border-top:1px solid var(--border)}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--text-faint);padding-top:16px;border-top:1px solid var(--border)}

/* ---------- Nach oben · Cookie-Hinweis ---------- */
.to-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;font-size:20px;box-shadow:var(--shadow-sm);opacity:0;pointer-events:none;transition:opacity .2s;z-index:90}
.to-top.show{opacity:1;pointer-events:auto}
.cookie-bar{position:fixed;left:50%;bottom:20px;transform:translate(-50%,140%);width:min(920px,calc(100% - 32px));background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 20px 50px -20px rgba(11,37,69,.4);z-index:120;transition:transform .35s}
.cookie-bar.show{transform:translate(-50%,0)}
.cookie-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 22px;flex-wrap:wrap}
.cookie-text{font-size:13.5px;color:var(--text-mid);flex:1;min-width:260px}
.cookie-text a{text-decoration:underline}
.cookie-actions{display:flex;gap:8px}
.cookie-btn{height:40px;padding:0 16px;border-radius:var(--radius);font-size:13.5px;font-weight:600}
.cookie-btn-decline{border:1px solid var(--border);color:var(--text-mid)}
.cookie-btn-accept{background:var(--navy);color:#fff}

/* ---------- Umbrüche ---------- */
@media(max-width:1240px){
  .nav-links{gap:22px}
  .nav-tel{display:none}
}
@media(max-width:1180px){
  .models-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mbtn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1060px){
  .nav-links,.nav-cta{display:none}
  .hamburger{display:flex}
  .hero-grid,.tech-grid,.sonder-grid,.kontakt-top{grid-template-columns:1fr;gap:40px}
  .hero-figure img{height:400px}
  .konfig-layout{grid-template-columns:1fr}
  .preview-sticky,.tech-figure{position:static}
  .vorteile-grid,.es-grid,.process-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr}
  .tech-row{grid-template-columns:160px 1fr}
  .sonder-grid .mosaic{order:2}
}
@media(max-width:768px){
  .section{padding:72px 0 64px}
  .hero{padding:44px 0 40px}
  .hero h1{font-size:clamp(2rem,8vw,2.6rem)}
  .hero-sub{font-size:16.5px}
  .hero-figure img{height:280px}
  .hero-cap{flex-direction:column;align-items:flex-start;gap:6px}
  .hero-stats{gap:16px}
  .stat-n{font-size:26px}
  .trust-strip{padding:20px}
  .trust-items{gap:14px;flex-direction:column;align-items:flex-start}
  .models-grid,.rb-grid,.branchen-grid,.team-grid,.kontakt-grid,.dl-grid,.ref-grid{grid-template-columns:1fr}
  .mosaic figure:first-child img{height:220px}
  .mosaic img{height:160px}
  .tech-list{grid-template-columns:1fr}
  .tech-row{grid-template-columns:1fr;gap:6px;padding:16px 0}
  .tech-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .tech-stat{padding:12px}
  .tech-stat b{font-size:18px}
  .fr,.fr3{grid-template-columns:1fr}
  .baureihe-grid,.mbtn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pal{grid-template-columns:repeat(3,minmax(0,1fr))}
  .konfig-form-body{padding:4px 18px 22px}
  .konfig-form-header{padding:20px 18px}
  .form-actions .btn{width:100%}
  .sb-arrow{display:none}
  .sb-tile{flex-basis:78vw}
  .haccp-box{grid-template-columns:1fr;padding:22px}
  .es-note{padding:22px}
  .ref-card{padding:28px 24px}
  .ref-card blockquote{font-size:18px}
  .wm{font-size:18px}
  .wm-dots{padding-left:50px;gap:3px}
  .section-head-row{flex-direction:column;align-items:flex-start}
  .sh{font-size:clamp(1.7rem,6.4vw,2.2rem)}
}
@media(max-width:480px){
  .wrap{width:calc(100% - 32px)}
  .vorteile-grid,.es-grid,.process-steps,.footer-grid{grid-template-columns:1fr}
  .hero-stats{gap:10px}
  .stat-l{font-size:12px}
  .stat-n{font-size:22px}
  .hero-actions .btn{width:100%}
  .lang-switch button{padding:0 9px}
  .nav-inner{gap:10px}
  .mbtn-grid{grid-template-columns:1fr 1fr}
  .pal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-bottom{flex-direction:column}
}
@media(max-width:360px){
  .wm{font-size:18px}
  .wm-dots{padding-left:51px}
  .nav-right{gap:8px}
  .lang-switch button{padding:0 7px}
  .cookie-text{min-width:0}
  .cookie-inner{padding:14px 16px;gap:12px}
  .cookie-actions{flex-wrap:wrap}
}
@media(max-width:340px){
  .wm{font-size:16px}
  .wm-dots{padding-left:45px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}