*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --forest:#203928; --moss:#4A6B55; --sage:#203928;
  --gold:#B8965A; --gold-lt:#D4B07A; --gold-dk:#8A6B35;
  --cream:#EFEDE4; --off-white:#F7F5EE; --white:#FFFFFF;
  --text:#2A3D2E; --text-mute:#5C6E61;
  --border:rgba(59,92,69,0.15); --border-gold:rgba(184,150,90,0.3);
  --font-display:'Open Sans',Verdana,'Helvetica Neue',Arial,sans-serif;
  --font-body:Verdana,'Open Sans',Geneva,Arial,sans-serif;
  --slate-green:#203928;
}
html { scroll-behavior:smooth; }
html { overflow-x:hidden; }
    body { max-width:100vw; background:var(--white); color:var(--text); font-family:var(--font-body); font-weight:300; overflow-x:hidden; }

/* NAV */
nav { position:fixed; top:0; left:0; right:0; z-index:200; display:flex; align-items:center; justify-content:space-between; padding:1rem 4rem; background:rgba(255,255,255,0.97); backdrop-filter:blur(10px); border-bottom:0.5px solid var(--border); box-shadow:0 1px 20px rgba(59,92,69,0.10); }
.logo { font-family:var(--font-body); font-size:1.1rem; font-weight:700; color:#1A2B1C; letter-spacing:0.03em; text-decoration:none; }
.logo-script { font-family:var(--font-display); font-size:0.75rem; color:var(--gold); font-weight:400; display:inline; line-height:1; margin-left:3px; letter-spacing:0.06em; white-space:nowrap; }
.nav-links { display:flex; gap:1.8rem; list-style:none; }
.nav-links a { font-size:0.88rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-mute); text-decoration:none; transition:color 0.3s; }
.nav-links a:hover { color:var(--sage); }
.nav-cta { font-size:0.85rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--white); background:var(--forest); padding:0.7rem 1.4rem; text-decoration:none; transition:background 0.3s; }
.nav-cta:hover { background:var(--moss); }
#nav-overlay { display:none; }

/* HERO */
.hero { min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:9rem 4rem 5rem; position:relative; overflow:hidden; background:var(--off-white); }
.hero-media { position:absolute; inset:0; z-index:0; background:var(--off-white); }
#heroSlideGreen { object-fit:contain !important; object-position:center !important; }
.hero-media-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1rem; border:2px dashed var(--border-gold); color:var(--gold); font-size:0.78rem; font-weight:600; letter-spacing:0.15em; text-transform:uppercase; text-align:center; }
.hero-media-placeholder input[type="file"] { display:none; }
.hero-media-placeholder label { cursor:pointer; border:0.5px solid var(--gold); padding:0.5rem 1.2rem; font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; transition:all 0.3s; }
.hero-media-placeholder label:hover { background:var(--gold); color:var(--white); }
.hero-overlay { position:absolute; inset:0; z-index:1; background:linear-gradient(to right, rgba(250,250,247,0.95) 26%, rgba(250,250,247,0.4) 40%, rgba(250,250,247,0) 56%); }
.hero-content { position:relative; z-index:2; max-width:600px; }
.ai-badge-wrap { position:absolute; right:0.7rem; bottom:0.7rem; z-index:6; }
.ai-badge { display:block; width:40px; height:40px; border-radius:50%; border:none; padding:0; cursor:pointer; background-color:rgba(30,30,30,0.55); background-image:url(/wp-content/themes/bog/assets/img/48-grafik.png); background-size:64%; background-repeat:no-repeat; background-position:center; box-shadow:0 1px 5px rgba(0,0,0,0.4); transition:transform 0.2s,background-color 0.2s; }
.ai-badge:hover { transform:scale(1.08); background-color:rgba(30,30,30,0.75); }
.ai-badge-popup { display:none; position:absolute; right:0; bottom:calc(100% + 10px); width:260px; max-width:78vw; background:#fff; color:#2a2a2a; text-align:left; font-family:var(--font-body); font-size:0.72rem; line-height:1.55; padding:0.95rem 1.05rem; border-radius:8px; box-shadow:0 6px 22px rgba(0,0,0,0.28); pointer-events:auto; }
.ai-badge-popup.open { display:block; }
.ai-badge-popup strong { display:block; font-size:0.76rem; font-weight:700; margin-bottom:0.4rem; color:var(--forest,#1e3d2f); }
@media(max-width:480px){ .ai-badge-popup { width:220px; font-size:0.68rem; } }

.hero-badge { font-size:0.65rem; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:0.75rem; margin-bottom:1.5rem; }
.hero-badge::before { content:''; width:28px; height:0.5px; background:var(--gold); display:block; }
.hero-script { font-family:var(--font-display); font-size:1.9rem; color:#0F1A12; font-weight:700; line-height:1.2; margin-bottom:1.25rem; }
.hero-title { font-family:var(--font-body); font-size:1.25rem; font-weight:700; line-height:1.25; color:#0F1A12; margin-bottom:1.5rem; }
.hero-sub { font-size:0.95rem; line-height:1.85; color:#0F1A12; max-width:480px; margin-bottom:2.5rem; font-weight:400; }
.hero-actions { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.btn-primary { font-family:var(--font-body); font-size:0.85rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--white); background:var(--forest); border:none; padding:1.1rem 2.5rem; cursor:pointer; text-decoration:none; transition:background 0.3s; display:inline-block; }
.btn-primary:hover { background:var(--moss); }
.btn-ghost { font-size:0.85rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--sage); text-decoration:none; display:flex; align-items:center; gap:0.4rem; transition:gap 0.3s; padding:1.1rem 0; }
.btn-ghost:hover { gap:0.7rem; }
.btn-ghost::after { content:'→'; }
.hero-stats { display:flex; gap:3rem; margin-top:3rem; padding-top:2rem; border-top:0.5px solid var(--border); }
.hero-stat-num { font-family:var(--font-display); font-size:1.5rem; color:var(--gold); display:block; line-height:1; }
.hero-stat-label { font-size:0.62rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--text-mute); margin-top:0.3rem; display:block; }

/* SECTION BASE */
.section-eyebrow { font-size:0.82rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); margin-bottom:0.5rem; }
.section-title { font-family:var(--font-body); font-size:1.6rem; font-weight:700; color:var(--slate-green); line-height:1.25; }
.section-title .script { font-family:var(--font-display); font-size:1.6rem; color:var(--slate-green); font-weight:700; font-style:normal; display:block; }

/* NUTZEN BAND */
.nutzen-band { background:var(--forest); padding:2.5rem 4rem; display:flex; }
.nutzen-item { flex:1; padding:1.2rem 1.5rem; text-align:center; border-right:0.5px solid rgba(255,255,255,0.15); }
.nutzen-item:last-child { border-right:none; }
.nutzen-icon-svg { width:28px; height:28px; margin:0 auto 0.5rem; color:var(--gold-lt); display:block; }
.nutzen-label { font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:rgba(247,244,238,0.85); display:block; margin-bottom:0.25rem; }
.nutzen-desc { font-size:0.75rem; color:rgba(247,244,238,0.45); line-height:1.6; }

/* VORTEILE */
.vorteile { padding:5rem 4rem; background:var(--cream); }
.vorteile-grid { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem 4rem; margin-top:3rem; }
.vorteil-item { display:flex; gap:1rem; align-items:flex-start; }
.vorteil-dot { flex-shrink:0; margin-top:0.15rem; }
.vorteil-dot::before { content:'✦'; font-size:1.1rem; color:var(--gold); }
.vorteil-title { font-size:1rem; font-weight:700; color:var(--slate-green); margin-bottom:0.35rem; }
.vorteil-text { font-size:0.83rem; line-height:1.85; color:var(--text-mute); }

/* BRANCHEN */
.branchen { padding:5rem 4rem; }
.branchen-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); margin-top:3rem; }
.branche-card { background:var(--white); padding:1.5rem 1.25rem; transition:background 0.3s; }
.branche-card:hover { background:var(--off-white); }
.branche-icon-line { width:32px; height:32px; margin-bottom:0.6rem; color:var(--sage); }
.branche-name { font-size:1.1rem; font-weight:700; color:var(--slate-green); margin-bottom:0.35rem; }
.branche-desc { font-size:0.75rem; color:var(--text-mute); line-height:1.65; }

/* LEISTUNGEN */
.leistungen { padding:5rem 4rem; background:var(--off-white); }
.leistungen-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5px; background:var(--border); border:1px solid var(--border); margin-top:3rem; }
.leistung-card { background:var(--white); padding:2rem 1.75rem; position:relative; overflow:hidden; transition:background 0.3s; }
.leistung-card:hover { background:var(--cream); }
.leistung-num { position:absolute; top:1rem; right:1.25rem; font-family:var(--font-display); font-size:3rem; color:rgba(26,48,32,0.05); line-height:1; user-select:none; }
.leistung-icon { width:36px; height:36px; color:var(--sage); margin-bottom:1rem; }
.leistung-title { font-size:1.25rem; font-weight:700; color:var(--slate-green); margin-bottom:0.6rem; line-height:1.3; }
.leistung-text { font-size:0.8rem; line-height:1.85; color:var(--text-mute); margin-bottom:1.25rem; }
.leistung-link { font-size:0.65rem; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--sage); text-decoration:none; display:flex; align-items:center; gap:0.4rem; transition:gap 0.3s; }
.leistung-link:hover { gap:0.7rem; }
.leistung-link::after { content:'→'; }
.badge-new { display:inline-block; font-size:0.55rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; background:var(--sage); color:var(--white); padding:0.15rem 0.4rem; margin-left:0.4rem; vertical-align:middle; }

/* KONFIGURATOR */
.konfigurator { padding:5rem 4rem; background:var(--forest); }
.konfigurator .section-eyebrow { color:var(--gold-lt); }
.konfigurator .section-title { color:var(--cream); }
.config-container { background:var(--white); margin-top:3rem; padding:0; overflow:hidden; }
.config-steps { display:flex; border-bottom:1px solid var(--border); }
.config-step-tab { flex:1; padding:0.75rem 0.5rem; text-align:center; font-size:0.62rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-mute); border-right:0.5px solid var(--border); cursor:default; transition:all 0.3s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.config-step-tab:last-child { border-right:none; }
.config-step-tab.active { color:var(--white); background:var(--forest); }
.config-step-tab.done { color:var(--sage); background:rgba(92,122,101,0.08); }
.config-body { padding:2.5rem; min-height:320px; }
.config-panel { display:none; }
.config-panel.active { display:block; }
.config-question { font-size:1rem; font-weight:700; color:var(--forest); margin-bottom:0.5rem; }
.config-hint { font-size:0.8rem; color:var(--text-mute); margin-bottom:1.5rem; }
.config-options { display:flex; flex-wrap:wrap; gap:0.75rem; margin-bottom:1.5rem; }
.config-option { border:1px solid var(--border); padding:0.9rem 1.5rem; font-size:0.9rem; font-weight:600; color:var(--text-mute); cursor:pointer; transition:all 0.2s; background:var(--white); user-select:none; }
.config-option:hover { border-color:var(--sage); color:var(--sage); }
.config-option.selected { border-color:var(--forest); background:var(--forest); color:var(--white); }
.config-input-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.5rem; }
.config-input-group { display:flex; flex-direction:column; gap:0.3rem; }
.config-label { font-size:0.65rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-mute); }
.config-input,.config-select { border:none; border-bottom:0.5px solid rgba(26,48,32,0.25); padding:0.6rem 0; font-family:var(--font-body); font-size:0.88rem; color:var(--text); outline:none; background:transparent; transition:border-color 0.3s; }
.config-input:focus,.config-select:focus { border-bottom-color:var(--sage); }
.config-select { appearance:none; cursor:pointer; }
.config-price-box { background:var(--cream); border-left:3px solid var(--gold); padding:1rem 1.25rem; margin-bottom:1.5rem; font-size:0.83rem; color:var(--text-mute); line-height:1.7; }
.config-price-box strong { color:var(--forest); font-size:1rem; display:block; margin-bottom:0.25rem; }
.musterbox-card { border:1px solid var(--border-gold); padding:1.5rem; background:var(--off-white); margin-bottom:1.5rem; display:flex; gap:1.5rem; align-items:center; }
.musterbox-icon { width:48px; height:48px; color:var(--gold); flex-shrink:0; }
.musterbox-title { font-size:1rem; font-weight:700; color:var(--forest); margin-bottom:0.25rem; word-break:break-word; overflow-wrap:anywhere; }
.musterbox-text { font-size:0.8rem; color:var(--text-mute); line-height:1.65; }
.musterbox-price { font-size:0.78rem; color:var(--gold); font-weight:700; margin-top:0.25rem; }
.mb-layout { display:grid; grid-template-columns:minmax(0,640px); justify-content:center; gap:2.5rem; max-width:1500px; margin:0 auto; }
.bild-hinweis { font-size:0.68rem; line-height:1.5; color:var(--text-mute); margin:0.85rem 0 0; text-align:left; }
@media (max-width:1100px){ .mb-layout { grid-template-columns:1fr; gap:2rem; max-width:640px; } }
.config-summary { background:var(--cream); padding:1.25rem; margin-bottom:1.5rem; }
.config-summary-title { font-size:0.65rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); margin-bottom:0.75rem; }
.summary-row { display:flex; justify-content:space-between; font-size:0.82rem; padding:0.3rem 0; border-bottom:0.5px solid var(--border); color:var(--text-mute); }
.summary-row:last-child { border-bottom:none; }
.summary-row strong { color:var(--forest); }
.logo-upload-area { border:1.5px dashed var(--border-gold); padding:1.5rem; text-align:center; background:var(--off-white); margin-bottom:1.5rem; cursor:pointer; transition:border-color 0.3s; }
.logo-upload-area:hover { border-color:var(--gold); }
.logo-upload-area input[type="file"] { display:none; }
.logo-upload-label { font-size:0.72rem; font-weight:600; letter-spacing:0.13em; text-transform:uppercase; color:var(--gold); display:block; cursor:pointer; }
.logo-preview { max-height:60px; margin:0.75rem auto 0; display:none; }
.config-nav { display:flex; justify-content:space-between; align-items:center; padding-top:1rem; border-top:0.5px solid var(--border); }
.config-btn-back { font-size:0.68rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-mute); background:none; border:0.5px solid var(--border); padding:0.65rem 1.25rem; cursor:pointer; transition:all 0.2s; }
.config-btn-back:hover { color:var(--forest); border-color:var(--forest); }
.config-btn-next { font-size:0.68rem; font-weight:700; letter-spacing:0.13em; text-transform:uppercase; color:var(--white); background:var(--forest); border:none; padding:0.75rem 1.75rem; cursor:pointer; transition:background 0.2s; }
.config-btn-next:hover { background:var(--moss); }

/* MATERIAL GRID */
.material-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:0.75rem; margin-bottom:1rem; }
.material-card { cursor:pointer; border:2px solid transparent; transition:border-color 0.2s; border-radius:4px; overflow:hidden; }
.material-card.selected { border-color:var(--forest); }
.material-img-wrap { position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; cursor:pointer; }
.material-img-wrap img { position:absolute !important; top:0 !important; left:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
.material-img-wrap > div { position:absolute; top:0; left:0; width:100%; height:100%; }
.material-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.4rem; color:rgba(255,255,255,0.9); font-size:0.65rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; text-align:center; padding:0.5rem; }
.material-name { font-size:0.68rem; font-weight:600; color:var(--text); text-align:center; padding:0.4rem 0.25rem; line-height:1.3; }

/* PROZESS */
.prozess { padding:5rem 4rem; background:var(--cream); }
.prozess-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; margin-top:3rem; }
.prozess-step { position:relative; }
.prozess-num { font-family:var(--font-display); font-size:1.2rem; color:var(--gold); margin-bottom:1rem; display:flex; align-items:center; gap:0.75rem; }
.prozess-num::after { content:''; flex:1; height:1px; background:var(--gold); opacity:0.4; }
.prozess-title { font-size:0.95rem; font-weight:700; color:var(--slate-green); margin-bottom:0.5rem; }
.prozess-text { font-size:0.8rem; line-height:1.85; color:var(--text-mute); }

/* LEASING */
.leasing { padding:5rem 4rem; }
.leasing-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:3rem; }
.leasing-card { background:var(--off-white); border:0.5px solid var(--border); padding:2rem; position:relative; overflow:hidden; }
.leasing-accent { position:absolute; top:0; left:0; width:3px; height:100%; background:var(--gold); }
.leasing-icon-svg { width:36px; height:36px; color:var(--gold); margin-bottom:0.75rem; }
.leasing-title { font-size:1.1rem; font-weight:700; color:var(--slate-green); margin-bottom:0.6rem; }
.leasing-text { font-size:0.82rem; line-height:1.85; color:var(--text-mute); }
.leasing-list { list-style:none; margin-top:0.75rem; display:flex; flex-direction:column; gap:0.35rem; }
.leasing-list li { font-size:0.8rem; color:var(--text-mute); display:flex; gap:0.5rem; align-items:flex-start; }
.leasing-list li::before { content:'✓'; color:var(--sage); font-weight:700; flex-shrink:0; }

/* REFERENZEN */
.referenzen { padding:5rem 4rem; background:var(--off-white); }
.ref-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:3rem; }
.ref-card { background:var(--white); padding:2rem; border:0.5px solid var(--border); transition:background 0.3s; }
.ref-card:hover { background:var(--off-white); }
.ref-photo { width:100%; aspect-ratio:16/7; background:var(--cream); border:1.5px dashed var(--border-gold); display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; overflow:hidden; position:relative; cursor:pointer; transition:border-color 0.3s; }
.ref-photo:hover { border-color:var(--gold); }
#lb-link { display:none; font-size:0.72rem; letter-spacing:0.1em; color:rgba(255,255,255,0.82); text-decoration:underline; text-underline-offset:3px; }
#lb-link:hover { color:#fff; }
.ref-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.ref-photo-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.5rem; background:var(--cream); }
.ref-photo-placeholder p { font-size:0.65rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); text-align:center; }
.ref-photo-placeholder span { font-size:0.58rem; color:var(--text-mute); }
.ref-photo-placeholder::before { content:'↑'; font-size:1.5rem; color:var(--gold-lt); }
.ref-category { font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:0.6rem; }
.ref-title { font-size:1.15rem; font-weight:700; color:var(--slate-green); margin-bottom:0.6rem; line-height:1.25; }
.ref-text { font-size:0.8rem; line-height:1.85; color:var(--text-mute); margin-bottom:1rem; }
.ref-tags { display:flex; flex-wrap:wrap; gap:0.35rem; }
.ref-tag { font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--sage); border:0.5px solid rgba(61,102,71,0.3); padding:0.2rem 0.55rem; }


/* KONTAKT */
.kontakt { padding:5rem 4rem; display:grid; grid-template-columns:1fr 1fr; gap:4rem; }
.kontakt-label { font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); margin-bottom:0.15rem; font-weight:700; }
.kontakt-value { font-size:0.88rem; color:var(--forest); font-weight:400; }
.kontakt-detail { display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.25rem; }
.kontakt-line { width:1px; height:36px; background:rgba(184,150,90,0.4); flex-shrink:0; margin-top:2px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { display:flex; flex-direction:column; gap:0.3rem; margin-bottom:1rem; }
.form-label { font-size:0.62rem; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--text-mute); }
.form-input,.form-select,.form-textarea { background:transparent; border:none; border-bottom:0.5px solid rgba(59,92,69,0.3); color:var(--text); font-family:var(--font-body); font-size:0.88rem; font-weight:400; padding:0.6rem 0; outline:none; width:100%; transition:border-color 0.3s; }
.form-input:focus,.form-select:focus,.form-textarea:focus { border-bottom-color:var(--sage); }
.form-select { appearance:none; cursor:pointer; }
.form-textarea { resize:none; min-height:80px; }
.form-submit { font-family:var(--font-body); font-size:0.7rem; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--white); background:var(--forest); border:none; padding:0.9rem 2.25rem; cursor:pointer; margin-top:0.5rem; transition:background 0.3s; }
.form-submit:hover { background:var(--moss); }
.form-whatsapp { display:inline-flex; align-items:center; justify-content:center; gap:0.55rem; font-family:var(--font-body); font-size:0.7rem; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--white); background:#25D366; border:none; padding:0.9rem 2.25rem; cursor:pointer; text-decoration:none; transition:background 0.3s; }
.form-submit-row { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:0.75rem; align-items:center; margin-top:0.5rem; }
@media (max-width: 480px) { .form-submit-row { grid-auto-flow:row; } }
.form-whatsapp:hover { background:#1EA952; }
.form-whatsapp svg { width:1.15em; height:1.15em; flex-shrink:0; }

/* FOOTER */
footer { border-top:0.5px solid var(--border); padding:3rem 4rem 2rem; background:var(--white); }
.footer-spalten { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:2.5rem; }
.footer-spalte h3 { font-size:0.95rem; font-weight:700; color:#1A2B1C; margin-bottom:0.9rem; }
.footer-marke { font-size:0.88rem; color:var(--text); margin-bottom:0.35rem; }
.footer-spalte address { font-style:normal; font-size:0.88rem; line-height:1.7; color:var(--text-mute); }
.footer-kontakt { font-size:0.88rem; line-height:1.7; margin-top:0.8rem; }
.footer-kontakt a { color:var(--text-mute); text-decoration:none; }
.footer-kontakt a:hover { color:var(--sage); }
.footer-links { list-style:none; display:grid; gap:0.5rem; }
.footer-links a { font-size:0.88rem; color:var(--text-mute); text-decoration:none; }
.footer-links a:hover { color:var(--sage); }
.footer-copy { font-size:0.72rem; color:var(--text-mute); margin-top:2.5rem;
  padding-top:1.25rem; border-top:0.5px solid var(--border); }
@media (max-width:860px) {
  footer { padding:2.5rem 1.5rem 1.75rem; }
  .footer-spalten { grid-template-columns:1fr; gap:2rem; }
  .footer-copy { margin-top:2rem; }
}

/* CHATBOT */
#chatbot-toggle { position:fixed; bottom:calc(2rem + 1cm); right:2rem; z-index:400; width:64px; height:64px; border-radius:16px; background:var(--forest); border:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(59,92,69,0.35); transition:background 0.3s, transform 0.2s; padding:6px 4px; }
#chatbot-toggle:hover { background:var(--moss); transform:scale(1.05); }
#chatbot-toggle svg { color:var(--white); }
#chatbot-toggle span { color:var(--white); }
#chatbot-window { position:fixed; bottom:calc(5.5rem + 1cm); right:2rem; z-index:400; width:340px; max-height:480px; background:var(--white); box-shadow:0 8px 40px rgba(59,92,69,0.2); display:none; flex-direction:column; border:0.5px solid var(--border); }
#chatbot-window.open { display:flex; }
.chatbot-header { background:var(--forest); padding:1rem 1.25rem; display:flex; align-items:center; justify-content:space-between; }
.chatbot-header-info { display:flex; align-items:center; gap:0.75rem; }
.chatbot-avatar { width:32px; height:32px; border-radius:50%; background:var(--sage); display:flex; align-items:center; justify-content:center; }
.chatbot-avatar svg { width:16px; height:16px; color:var(--white); }
.chatbot-name { font-size:0.85rem; font-weight:700; color:var(--white); }
.chatbot-status { font-size:0.65rem; color:rgba(255,255,255,0.55); display:flex; align-items:center; gap:0.3rem; }
.chatbot-status::before { content:''; width:6px; height:6px; border-radius:50%; background:#7FB87A; display:block; }
.chatbot-close { background:none; border:none; cursor:pointer; color:rgba(255,255,255,0.6); font-size:1.1rem; padding:0; }
.chatbot-messages { flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:0.75rem; max-height:310px; }
.chat-msg { max-width:82%; padding:0.65rem 0.9rem; font-size:0.82rem; line-height:1.65; }
.chat-msg.bot { background:var(--off-white); color:var(--text); align-self:flex-start; }
.chat-msg.user { background:var(--forest); color:var(--white); align-self:flex-end; }
.chat-suggestions { display:flex; flex-direction:column; gap:0.4rem; margin-top:0.5rem; }
.chat-suggestion { font-size:0.73rem; font-weight:600; color:var(--sage); border:0.5px solid rgba(61,102,71,0.3); padding:0.4rem 0.75rem; cursor:pointer; background:var(--white); text-align:left; transition:all 0.2s; }
.chat-suggestion:hover { background:var(--sage); color:var(--white); }
.chatbot-input-row { display:flex; border-top:0.5px solid var(--border); padding:0.75rem; }
#chatbot-input { flex:1; border:none; outline:none; font-family:var(--font-body); font-size:0.82rem; color:var(--text); background:transparent; padding:0.3rem 0; }
#chatbot-input::placeholder { color:var(--text-mute); }
#chatbot-send { background:var(--forest); border:none; cursor:pointer; padding:0.4rem 0.75rem; color:var(--white); font-size:0.9rem; transition:background 0.2s; }
#chatbot-send:hover { background:var(--moss); }

/* LIGHTBOX */
#lightbox { display:none; position:fixed; inset:0; z-index:600; background:rgba(26,48,32,0.92); align-items:center; justify-content:center; flex-direction:column; gap:1.25rem; }
#lightbox.open { display:flex; }
#lightbox-img { max-width:88vw; max-height:74vh; object-fit:contain; box-shadow:0 24px 64px rgba(0,0,0,0.5); }
#lb-close { position:absolute; top:1.25rem; right:1.75rem; background:none; border:none; color:rgba(255,255,255,0.8); font-size:2rem; cursor:pointer; z-index:2; line-height:1; }
#lb-caption { font-size:0.75rem; color:rgba(255,255,255,0.5); letter-spacing:0.14em; text-align:center; text-transform:uppercase; }
.lb-nav { display:flex; align-items:center; gap:2rem; }
.lb-btn { width:46px; height:46px; border-radius:50%; background:none; border:1.5px solid rgba(255,255,255,0.35); color:#fff; font-size:1.3rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
.lb-btn:hover { background:rgba(255,255,255,0.15); }
.lb-btn:disabled { opacity:0.2; cursor:default; }
#lb-counter { font-size:0.7rem; color:rgba(255,255,255,0.5); letter-spacing:0.2em; min-width:50px; text-align:center; }

/* SCROLL REVEAL */
.reveal { opacity:0; transform:translateY(18px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.s1{transition-delay:.05s} .s2{transition-delay:.15s} .s3{transition-delay:.25s} .s4{transition-delay:.35s}

/* COOKIE BANNER – DSGVO-konform */
#cookie-banner {
  position:fixed; bottom:0; left:0; right:0; z-index:9999;
  background:var(--white); color:var(--text);
  padding:1.75rem 3rem; display:flex; align-items:flex-start;
  justify-content:space-between; gap:2rem; flex-wrap:wrap;
  box-shadow:0 -4px 40px rgba(59,92,69,0.18);
  border-top:3px solid var(--forest);
  font-family:var(--font-body); font-size:0.82rem; line-height:1.7;
}
#cookie-banner h3 { font-size:0.95rem; font-weight:700; color:var(--forest); margin-bottom:0.4rem; }
#cookie-banner p { color:var(--text-mute); max-width:620px; }
#cookie-banner a { color:var(--sage); text-decoration:underline; cursor:pointer; }
.cookie-detail-toggle { font-size:0.72rem; font-weight:600; color:var(--sage); cursor:pointer; letter-spacing:0.08em; margin-top:0.5rem; display:inline-block; }
.cookie-categories { display:none; margin-top:0.75rem; border:0.5px solid var(--border); padding:1rem; background:var(--off-white); font-size:0.78rem; }
.cookie-categories.open { display:block; }
.cookie-cat { display:flex; align-items:flex-start; gap:0.75rem; margin-bottom:0.75rem; }
.cookie-cat:last-child { margin-bottom:0; }
.cookie-cat input[type="checkbox"] { margin-top:3px; accent-color:var(--forest); width:16px; height:16px; flex-shrink:0; cursor:pointer; }
.cookie-cat label { cursor:pointer; }
.cookie-cat label strong { color:var(--forest); display:block; margin-bottom:0.15rem; }
.cookie-cat label span { color:var(--text-mute); font-size:0.72rem; }
.cookie-actions-wrap { display:flex; flex-direction:column; gap:0.6rem; flex-shrink:0; min-width:200px; justify-content:flex-start; padding-top:0.25rem; }
.cookie-btn { font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; border:none; padding:0.75rem 1.5rem; cursor:pointer; transition:all 0.2s; white-space:nowrap; text-align:center; }
.cookie-btn-accept-all { background:var(--forest); color:var(--white); }
.cookie-btn-accept-all:hover { background:var(--moss); }
.cookie-btn-accept-sel { background:transparent; color:var(--forest); border:1.5px solid var(--forest); }
.cookie-btn-accept-sel:hover { background:var(--cream); }
.cookie-btn-reject { background:transparent; color:var(--text-mute); border:1.5px solid var(--border); font-size:0.68rem; }
.cookie-btn-reject:hover { border-color:var(--text-mute); color:var(--text); }

/* ===== MOBILE OPTIMIERUNG ===== */
@media (max-width: 860px) {
  nav { padding:0.85rem 1.25rem; }
  body.nav-open nav { z-index:10002; }
  body.nav-open #nav-toggle { position:relative; z-index:10005; }
  #nav-toggle { display:flex !important; }
  .nav-cta { display:none; }
  .nav-links {
    position:fixed; top:0; right:0; height:100vh; width:78%; max-width:320px;
    background:var(--white); flex-direction:column; align-items:flex-start; gap:0;
    padding:5rem 1.75rem 2rem; box-shadow:-8px 0 40px rgba(0,0,0,0.12);
    transform:translateX(100%); transition:transform 0.3s ease; z-index:10001;
  }
  body.nav-open .nav-links { transform:translateX(0); }
  .nav-links li { width:100%; border-bottom:0.5px solid var(--border); }
  .nav-links a { display:block; padding:1rem 0; font-size:1rem; }
  .hat-menue > a::after { display:none; }
  .untermenue { position:static; opacity:1; visibility:visible; transform:none;
    border:none; box-shadow:none; padding:0 0 0.5rem; min-width:0; background:transparent; }
  .untermenue li { border:none; }
  .untermenue a { padding:0.5rem 0 0.5rem 1rem; font-size:0.9rem; color:var(--text-mute); }
  #nav-overlay {
    display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:10000;
  }
  body.nav-open #nav-overlay { display:block; }

  /* Sektions-Innenabstände reduzieren */
  .hero { padding:0 !important; min-height:auto !important; display:block !important; }
  /* Bildbereich: an Greenovation-Bildformat (4:3) angepasst -> füllt ohne Balken */
  .hero-media { position:relative !important; inset:auto !important; height:auto !important; aspect-ratio:1920/1442; max-height:70vh; width:100%; background:transparent !important; }
  .hero-slide { object-fit:cover !important; object-position:center center !important; filter:brightness(1) saturate(1.05) !important; }
  .hero-overlay { display:none !important; }
  /* Textblock unter dem Bild auf hellem Grund -> dunkle Schrift, gut lesbar */
  .hero-content { position:relative !important; z-index:2; max-width:100% !important; padding:2rem 1.5rem 3rem !important; background:var(--off-white); }
  .hero-content .hero-script, .hero-content .hero-title, .hero-content .hero-sub { color:#0F1A12 !important; text-shadow:none !important; }
  .hero-content .hero-stat-label { color:var(--text-mute) !important; text-shadow:none !important; }
  .hero-content .hero-stat-num { text-shadow:none !important; }
  .vorteile, .branchen, .leistungen, .konfigurator, .prozess, .leasing, .referenzen,
  #visualizer, .fassade, .kontakt, section[style*="padding:5rem 4rem"] {
    padding-left:1.5rem !important; padding-right:1.5rem !important;
    padding-top:3rem !important; padding-bottom:3rem !important;
  }

  /* Überschriften etwas kleiner */
  .section-title { font-size:1.3rem; }
  .hero-script { font-size:1.5rem; }
  .hero-title { font-size:1.1rem; }
  .hero-sub { font-size:0.9rem; }

  /* Alle mehrspaltigen Raster -> einspaltig */
  .kontakt { grid-template-columns:1fr !important; gap:2.5rem !important; }
  .leasing-grid, .vorteile-grid, .prozess-grid { grid-template-columns:1fr !important; }
  .branchen-grid { grid-template-columns:repeat(2,1fr) !important; }
  .leistungen-grid { grid-template-columns:1fr !important; }
  .material-grid { grid-template-columns:repeat(2,1fr) !important; }

  /* Inline-Grids responsiv machen */
  [style*="grid-template-columns:280px 1fr"] { grid-template-columns:1fr !important; }
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns:repeat(2,1fr) !important; }
  [style*="grid-template-columns:repeat(5,1fr)"] { grid-template-columns:repeat(2,1fr) !important; }
  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns:1fr !important; }
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns:1fr !important; }

  /* Visualizer: Steuerung über Vorschau stapeln */
  #visualizer > div[style*="grid"] { grid-template-columns:1fr !important; }

  /* Lightbox-Bild größer nutzbar */
  #lightbox-img, #lb-img { max-width:94vw !important; max-height:70vh !important; }

  /* Konfigurator-Tabs umbrechen */
  .config-steps, .config-step-tabs { flex-wrap:wrap !important; }
}

@media (max-width: 480px) {
  .branchen-grid, .material-grid { grid-template-columns:1fr !important; }
  .section-title { font-size:1.15rem; }
  .hero-script { font-size:1.3rem; }
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"] { grid-template-columns:1fr !important; }
}


/* ===== MOBILE FEINSCHLIFF ===== */
@media (max-width: 860px) {
  /* Inline-gepaddete Sektionen (Fassade etc.) ebenfalls schmaler */
  section[style*="padding:5rem 4rem"] {
    padding-left:1.5rem !important; padding-right:1.5rem !important;
    padding-top:3rem !important; padding-bottom:3rem !important;
  }
  /* Überschriften nicht erzwungen einzeilig -> kein Überlauf */
  .section-title[style*="nowrap"], .section-title { white-space:normal !important; }
  /* min-width-Container dürfen schrumpfen */
  [style*="min-width:200px"] { min-width:0 !important; }
  [style*="min-width:280px"] { min-width:0 !important; flex-basis:100% !important; }
  /* Konfigurator: Schrittleiste & Navigation umbrechen, Buttons voll nutzbar */
  .config-steps { flex-wrap:wrap !important; gap:0.4rem !important; }
  .config-step-tab { white-space:normal !important; font-size:0.7rem !important; padding:0.5rem 0.7rem !important; }
  .config-nav { flex-wrap:wrap !important; gap:0.6rem !important; }
  .config-options { grid-template-columns:1fr 1fr !important; }
  .config-input-row { flex-wrap:wrap !important; }
  .config-container { padding:1.5rem !important; }
  /* Preis-/Summary-Boxen volle Breite */
  .config-price-box, .config-summary { width:100% !important; }
  /* Visualizer-Canvas/Steuerung sauber stapeln */
  #visualizer canvas { max-width:100% !important; height:auto !important; }
  /* Bilder generell nie breiter als Viewport */
  img { max-width:100%; }
  /* Logo-Zusatz nicht erzwungen einzeilig */
  .logo-script { white-space:normal !important; }
}
@media (max-width: 480px) {
  .config-options { grid-template-columns:1fr !important; }
  .hero-badge { font-size:0.58rem !important; flex-wrap:wrap; }
  .nav-cta { display:none; }
}


/* ===== MOBILE KORREKTUREN (Hero, Referenzen, Konfigurator) ===== */
@media (max-width: 860px) {
  /* 1) Hero-Texte nicht breiter als der Bildschirm */
  .hero-content { max-width:100% !important; }
  .hero-sub { max-width:100% !important; }

  /* 2) Referenzen: eine Karte pro Reihe statt halb abgeschnitten */
  .ref-grid { grid-template-columns:1fr !important; gap:1.25rem !important; }
  .ref-card { padding:1.5rem !important; }

  /* 3+4) Konfigurator-Eingaben (Maße / Musterbox) einspaltig */
  .config-input-row { grid-template-columns:1fr !important; gap:1rem !important; }
  /* Kontaktfelder (Name/Firma/E-Mail/Telefon) im Konfigurator & Kontaktformular einspaltig */
  .form-row { grid-template-columns:1fr !important; gap:1rem !important; }
  .config-input-group, .form-group { min-width:0 !important; }
  .config-input, .config-select, .form-input, .form-select, .form-textarea { width:100% !important; max-width:100% !important; }
  .config-option { padding:0.8rem 1.1rem !important; font-size:0.85rem !important; flex:1 1 auto; text-align:center; }
  .config-options { gap:0.6rem !important; }
}


/* ===== MOBILE: Material-Auswahl & Musterbox ===== */
@media (max-width: 860px) {
  .material-grid { grid-template-columns:repeat(3,1fr) !important; gap:0.5rem !important; }
  .musterbox-card { flex-direction:column !important; align-items:flex-start !important; gap:1rem !important; padding:1.25rem !important; }
  .musterbox-card svg.musterbox-icon { width:36px; height:36px; }
  .musterbox-title { font-size:0.95rem !important; }
}
@media (max-width: 480px) {
  .material-grid { grid-template-columns:repeat(2,1fr) !important; }
}


/* ===== MOBILE: Vorteils-Band & Prozess ===== */
@media (max-width: 860px) {
  /* Vorteils-Band (Akustik, Wartungsfrei, ...) untereinander statt 5 nebeneinander */
  .nutzen-band { flex-direction:column !important; padding:1.5rem 1.25rem !important; gap:0.25rem; }
  .nutzen-item { flex:none !important; width:100%; border-right:none !important; border-bottom:0.5px solid rgba(255,255,255,0.15) !important; padding:1rem !important; }
  .nutzen-item:last-child { border-bottom:none !important; }

  /* Prozess 'Vom Konzept zur Vollendung' einspaltig + schmalere Abstände */
  .prozess { padding:3rem 1.5rem !important; }
  .prozess-steps { grid-template-columns:1fr !important; gap:1.5rem !important; margin-top:2rem !important; }
}
@media (max-width: 480px) {
  .nutzen-item { padding:0.85rem !important; }
}


/* ===== MOBILE: Hero-Texte gut lesbar auf den Bildern ===== */
@media (max-width: 860px) {
  .hero-script, .hero-title, .hero-sub {
    color:#FFFFFF !important;
    text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 0 18px rgba(0,0,0,0.35) !important;
  }
}


/* ===== MOBILE: Hero-Statistiken (Erfahrung / Wartungsfrei / Individuelle Anfertigungen) ===== */
@media (max-width: 860px) {
  .hero-stats {
    gap:1.25rem !important; margin-top:2rem !important; padding-top:1.5rem !important;
    flex-wrap:wrap; justify-content:space-between;
  }
  .hero-stats > div { flex:1 1 30%; min-width:90px; text-align:center; }
  .hero-stat-num { font-size:1.3rem !important; }
  .hero-stat-label { color:#FFFFFF !important; text-shadow:0 1px 3px rgba(0,0,0,0.55) !important; font-size:0.6rem !important; }
  .hero-stat-num { text-shadow:0 1px 3px rgba(0,0,0,0.45) !important; }
}
@media (max-width: 380px) {
  .hero-stats > div { flex:1 1 45%; }
}


/* ============================================================
   MERGE-LAYER · Typografie, Shop, FAQ, Workshops, Warenkorb
   ============================================================ */

/* — Typografie: Grotesk für Titel & Bedienelemente, Serif für Fließtext — */
h1,h2,h3,h4,
.logo,.nav-links a,.nav-cta,.section-title,.section-eyebrow,
.hero-script,.hero-title,.hero-stat-num,.hero-stat-label,.hero-badge,
.nutzen-label,.vorteil-title,.branche-name,.leistung-title,.leistung-num,
.leistung-link,.ref-title,.ref-category,.ref-tag,.badge-new,
.prozess-num,.prozess-title,.leasing-title,.musterbox-title,.musterbox-price,
.config-question,.config-label,.config-option,.config-step-tab,.config-summary-title,
.form-label,.form-submit,.form-whatsapp,.btn-primary,.btn-ghost,.footer-logo,
.footer-links a,.chatbot-name,button,select { font-family:var(--font-display); }

body,p,li,td,
.hero-sub,.nutzen-desc,.vorteil-text,.branche-desc,.leistung-text,.ref-text,
.prozess-text,.leasing-text,.leasing-list li,.musterbox-text,.config-hint,
.form-input,.form-select,.form-textarea,.config-input,.config-select,
.bild-hinweis { font-family:var(--font-body); }

body { font-size:1rem; line-height:1.72; font-weight:300; }
.hero-sub,.vorteil-text,.branche-desc,.leistung-text,.ref-text,
.prozess-text,.leasing-text { font-size:0.95rem; line-height:1.75; }

.section-title { font-size:clamp(1.75rem,3vw,2.2rem) !important; line-height:1.08;
  letter-spacing:-0.025em; font-weight:700; white-space:normal !important; }
.section-title .script { font-family:var(--font-display); font-size:inherit;
  font-weight:500; letter-spacing:-0.015em; color:var(--moss); }
.konfigurator .section-title .script,.konfigurator .section-title span { color:var(--gold-lt) !important; }
.section-eyebrow { font-size:0.82rem; font-weight:500; letter-spacing:0.04em;
  text-transform:none; color:var(--gold-dk); margin-bottom:0.35rem; }

.hero-script { font-size:clamp(2rem,4.2vw,3.2rem) !important; letter-spacing:-0.035em; line-height:1.02; }
.hero-title { font-size:clamp(1.05rem,1.5vw,1.3rem) !important; font-weight:500; letter-spacing:-0.01em; }
.hero-badge { text-transform:none; letter-spacing:0.05em; font-size:0.8rem; font-weight:500; }
.hero-stat-num { font-size:1.6rem; font-weight:700; letter-spacing:-0.02em; }
.hero-stat-label,.nutzen-label,.form-label,.config-label,.ref-category,
.config-step-tab,.config-summary-title { text-transform:none; letter-spacing:0.03em; font-weight:500; }
.hero-stat-label { font-size:0.72rem; }
.nutzen-label { font-size:0.82rem; }
.form-label,.config-label { font-size:0.75rem; }
.form-submit,.btn-primary,.form-whatsapp,.leistung-link,.btn-ghost,.nav-cta,.nav-links a
  { text-transform:none; letter-spacing:0.01em; font-weight:500; }
.nav-links a { font-size:0.92rem; }
.form-submit,.btn-primary { font-size:0.9rem; }
.leistung-link::after,.btn-ghost::after { content:''; }
.leistung-link,.btn-ghost { border-bottom:1px solid var(--gold); align-self:flex-start; }
.leistung-link { font-size:0.85rem; padding-bottom:1px; }

/* — Moosoberflächen aus CSS, ohne Bilddatei — */
.flaeche--kugel{background-color:#40702f;background-image:
  radial-gradient(circle at 34% 32%,#86b45e 0 16%,rgba(134,180,94,0) 17%),
  radial-gradient(circle at 66% 70%,#5b8c3c 0 21%,rgba(91,140,60,0) 22%),
  radial-gradient(circle at 20% 78%,#2c5324 0 24%,rgba(44,83,36,0) 25%),
  radial-gradient(circle at 80% 20%,#6f9d4a 0 13%,rgba(111,157,74,0) 14%);
  background-size:23px 23px,37px 37px,53px 53px,17px 17px;}
.flaeche--island{background-color:#8fa287;background-image:
  radial-gradient(circle at 40% 38%,#cfd6c2 0 15%,rgba(207,214,194,0) 16%),
  radial-gradient(circle at 70% 65%,#7c9074 0 22%,rgba(124,144,116,0) 23%),
  radial-gradient(circle at 12% 82%,#61775c 0 18%,rgba(97,119,92,0) 19%),
  radial-gradient(circle at 88% 12%,#b6c0a8 0 11%,rgba(182,192,168,0) 12%);
  background-size:19px 19px,31px 31px,43px 43px,13px 13px;}
.flaeche--wald{background-color:#274d26;background-image:
  radial-gradient(circle at 30% 30%,#3f7136 0 26%,rgba(63,113,54,0) 27%),
  radial-gradient(circle at 72% 62%,#1b3a1c 0 30%,rgba(27,58,28,0) 31%),
  radial-gradient(circle at 50% 88%,#55884a 0 12%,rgba(85,136,74,0) 13%),
  radial-gradient(circle at 90% 18%,#12280f 0 20%,rgba(18,40,15,0) 21%);
  background-size:41px 41px,59px 59px,23px 23px,29px 29px;}
.flaeche--farn{background-color:#4b6b3f;background-image:
  linear-gradient(115deg,rgba(163,196,133,.85) 0 2px,rgba(163,196,133,0) 3px 11px),
  linear-gradient(-115deg,rgba(120,158,95,.75) 0 2px,rgba(120,158,95,0) 3px 14px),
  radial-gradient(circle at 60% 40%,#35502d 0 28%,rgba(53,80,45,0) 29%);
  background-size:22px 22px,26px 26px,47px 47px;}

/* — Shop — */
.shop { padding:5rem 4rem; background:var(--white); }
.shop-kopf { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; }
.shop-kopf p.shop-intro { font-size:0.92rem; color:var(--text-mute); max-width:44ch; margin:0; }
.shop-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem; }
.produkt { display:flex; flex-direction:column; background:var(--off-white);
  border:0.5px solid var(--border); transition:border-color .3s; }
.produkt:hover { border-color:var(--border-gold); }
.produkt__bild { height:200px; border-bottom:0.5px solid var(--border); position:relative;
  overflow:hidden; background:#fff; }
.produkt__bild img { width:100%; height:100%; object-fit:contain; display:block; padding:0.5rem; }
.produkt__bild--zwei { display:flex; gap:2px; }
.produkt__bild--zwei img { width:50%; padding:0.35rem; }
.produkt__tag { position:absolute; top:0.9rem; left:0; background:var(--forest); color:var(--cream);
  font-family:var(--font-display); font-weight:500; font-size:0.72rem; padding:0.25rem 0.7rem; }
.produkt__inhalt { padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:0.45rem; flex:1; }
.produkt h3 { font-size:1.12rem; color:var(--slate-green); letter-spacing:-0.015em; }
.produkt p { font-size:0.9rem; color:var(--text-mute); margin:0; line-height:1.7; }
.produkt__detail { font-size:0.82rem; color:var(--text-mute); }
.produkt__aktionen { display:flex; gap:0.6rem; flex-wrap:wrap; margin-top:auto; padding-top:1rem; }
.btn-kauf { font-size:0.86rem; font-weight:500; color:var(--white); background:var(--forest);
  border:none; padding:0.72rem 1.25rem; cursor:pointer; transition:background .3s; }
a.btn-kauf { display:inline-flex; align-items:center; text-decoration:none; }
.btn-kauf:hover { background:var(--moss); }
.btn-zweit { font-size:0.86rem; font-weight:500; color:var(--text); background:none;
  border:0.5px solid var(--border); padding:0.72rem 1.25rem; cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; transition:all .3s; }
.btn-zweit:hover { border-color:var(--forest); color:var(--forest); }

/* — Navigations-Button — */
.nav-cta { border-radius:0; padding:0.8rem 1.7rem; font-size:0.92rem; }
.btn-gross { font-size:0.95rem; padding:0.85rem 2rem; }

/* — Warenkorb — */
.warenkorb-btn { position:relative; font-size:0.86rem; font-weight:500; color:var(--forest);
  background:none; border:0.5px solid rgba(59,92,69,0.35); padding:0.65rem 1.1rem;
  cursor:pointer; margin-right:0.6rem; }
.warenkorb-btn:hover { border-color:var(--forest); }
.warenkorb-zahl { display:inline-block; min-width:1.35em; margin-left:0.35rem; padding:0 0.3em;
  background:var(--gold); color:#fff; font-size:0.75rem; border-radius:999px; text-align:center; }
#warenkorb-panel { position:fixed; top:0; right:0; height:100%; width:min(400px,92vw);
  background:var(--white); z-index:701; transform:translateX(103%); transition:transform .35s ease;
  display:flex; flex-direction:column; box-shadow:-12px 0 44px rgba(26,48,32,0.2); }
#warenkorb-panel.offen { transform:none; }
#warenkorb-backdrop { display:none; position:fixed; inset:0; background:rgba(26,48,32,0.45); z-index:700; }
#warenkorb-backdrop.offen { display:block; }
.wk-kopf { display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem; border-bottom:0.5px solid var(--border); }
.wk-kopf h3 { font-size:1.1rem; color:var(--forest); }
.wk-schliessen { background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--text-mute); }
.wk-liste { flex:1; overflow-y:auto; padding:1rem 1.5rem; }
.wk-leer { font-size:0.9rem; color:var(--text-mute); padding:2rem 0; }
.wk-zeile { display:flex; gap:0.9rem; align-items:flex-start; padding:0.9rem 0;
  border-bottom:0.5px solid var(--border); }
.wk-mini { width:46px; height:46px; flex-shrink:0; border:0.5px solid var(--border); }
.wk-zeile-text { flex:1; min-width:0; }
.wk-zeile-text strong { font-family:var(--font-display); font-weight:500; font-size:0.92rem;
  color:var(--slate-green); display:block; }
.wk-zeile-text span { font-size:0.82rem; color:var(--text-mute); }
.wk-weg { background:none; border:none; color:var(--text-mute); cursor:pointer; font-size:1rem; padding:0 0.2rem; }
.wk-weg:hover { color:#a33; }
.wk-fuss { border-top:0.5px solid var(--border); padding:1.25rem 1.5rem 1.75rem; background:var(--off-white); }
.wk-summe { display:flex; justify-content:space-between; font-family:var(--font-display);
  font-weight:500; font-size:1rem; color:var(--forest); margin-bottom:0.4rem; }
.wk-note { font-size:0.78rem; color:var(--text-mute); line-height:1.6; margin-bottom:1rem; }
.wk-weiter { width:100%; font-size:0.9rem; font-weight:500; color:#fff; background:var(--forest);
  border:none; padding:0.9rem; cursor:pointer; }
.wk-weiter:hover { background:var(--moss); }

/* — FAQ — */
.faq { padding:5rem 4rem; background:var(--off-white); }
.faq-liste { margin-top:2rem; max-width:860px; }
.faq details { border-top:0.5px solid var(--border); padding:1.1rem 0; }
.faq details:last-child { border-bottom:0.5px solid var(--border); }
.faq summary { cursor:pointer; list-style:none; font-family:var(--font-display); font-weight:500;
  font-size:1.02rem; color:var(--slate-green); display:flex; justify-content:space-between;
  gap:1.5rem; align-items:baseline; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; color:var(--gold); font-size:1.15rem; }
.faq details[open] summary::after { content:'–'; }
.faq details p { margin-top:0.7rem; font-size:0.93rem; color:var(--text-mute); max-width:72ch; }

/* — Workshops — */
.workshop-sec { padding:5rem 4rem; background:var(--cream); }
.workshop-grid { display:grid; grid-template-columns:1.05fr 0.95fr; gap:3rem;
  align-items:center; margin-top:2rem; }
.workshop-bild { display:flex; justify-content:center; align-items:flex-start; }
.workshop-bild img { width:100%; max-width:340px; height:auto; display:block;
  object-fit:contain; border:0.5px solid var(--border); }
.workshop-liste { list-style:none; display:grid; gap:0.5rem; margin:1.25rem 0 1.75rem; padding:0; }
.workshop-liste li { font-size:0.92rem; color:var(--text-mute); display:flex; gap:0.6rem; align-items:flex-start; }
.workshop-liste li::before { content:'✦'; color:var(--gold); flex-shrink:0; }

/* — Untermenüs in der Navigation — */
.hat-menue { position:relative; }
.hat-menue > a::after { content:'⌄'; margin-left:0.35rem; font-size:0.8em; opacity:0.65; }
.untermenue { position:absolute; top:100%; left:-1rem; min-width:230px; list-style:none;
  background:var(--white); border:0.5px solid var(--border); box-shadow:0 12px 32px rgba(26,48,32,0.12);
  padding:0.4rem 0; margin:0; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .2s, transform .2s, visibility .2s; z-index:210; }
.hat-menue:hover .untermenue, .hat-menue:focus-within .untermenue {
  opacity:1; visibility:visible; transform:translateY(0); }
.untermenue a { display:block; padding:0.6rem 1.25rem; font-size:0.86rem;
  color:var(--text); white-space:nowrap; }
.untermenue a:hover { background:var(--off-white); color:var(--forest); }

/* — Kursive Zeile über der Hauptüberschrift — */
.hero-kursiv { font-family:var(--font-body); font-style:italic; font-weight:300;
  font-size:1.05rem; color:var(--slate-green); margin:0 0 0.6rem; letter-spacing:0; }

/* — Schriftschnitte: Grotesk 500/700, Serif 300/400 — */
h1,h2,h3,h4,.section-title,.hero-script,.hero-stat-num,.logo,.footer-logo,
.leistung-title,.ref-title,.branche-name,.leasing-title,.vorteil-title,
.prozess-title,.musterbox-title,.config-question,.produkt h3,.wk-kopf h3
  { font-weight:700; letter-spacing:-0.02em; }
.nav-links a,.nav-cta,.section-eyebrow,.hero-badge,.hero-title,.hero-stat-label,
.nutzen-label,.form-label,.config-label,.config-option,.config-step-tab,
.btn-kauf,.btn-zweit,.btn-primary,.btn-ghost,.form-submit,.leistung-link,
.ref-category,.ref-tag,.footer-links a,.produkt__detail,.wk-weiter
  { font-weight:500; letter-spacing:-0.02em; }
body,p,li,.hero-sub,.leistung-text,.ref-text,.branche-desc,.vorteil-text,
.prozess-text,.leasing-text,.produkt p { font-weight:300; letter-spacing:0; }
strong,b { font-weight:400; }

/* — Branchen kompakter — */
.branchen { padding:3.25rem 4rem; }
.branchen-grid { margin-top:1.9rem; }
.branchen .section-title { font-size:clamp(1.35rem,2.2vw,1.7rem) !important; }
.branchen .section-eyebrow { font-size:0.76rem; }
.branche-card { padding:1.05rem 0.95rem; }
.branche-icon-line { width:24px; height:24px; margin-bottom:0.45rem; }
.branche-name { font-size:0.94rem; margin-bottom:0.2rem; }
.branche-desc { font-size:0.72rem; line-height:1.55; }
@media (max-width:860px){ .branchen { padding:2.5rem 1.5rem; } .branchen-grid { grid-template-columns:repeat(2,1fr); } }

/* — Vorteile kompakter — */
.vorteile { padding:2.75rem 4rem; }
.vorteile-grid { grid-template-columns:repeat(3,1fr); gap:1.1rem 2.25rem; margin-top:1.6rem; }
.vorteile .section-title { font-size:clamp(1.3rem,2.1vw,1.6rem) !important; }
.vorteile .section-eyebrow { font-size:0.76rem; }
.vorteil-item { gap:0.7rem; }
.vorteil-title { font-size:0.88rem; margin-bottom:0.2rem; }
.vorteile .vorteil-text { font-size:0.82rem; line-height:1.58; }
.vorteil-dot::before { font-size:0.85rem; }
@media (max-width:1100px){ .vorteile-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:860px){ .vorteile { padding:2.25rem 1.5rem; } }

/* — Mobil — */
@media (max-width:1100px){ .shop-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:860px){
  .shop,.faq,.workshop-sec { padding:3rem 1.5rem; }
  .shop-grid { grid-template-columns:1fr; }
  .workshop-grid { grid-template-columns:1fr; gap:2rem; }
  .workshop-bild img { max-width:280px; }
  .warenkorb-btn { padding:0.5rem 0.8rem; font-size:0.8rem; margin-right:0.3rem; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* — WooCommerce: Warenkorb und Mein Konto in der Kopfzeile — */
.shop-icons { display:flex; align-items:center; gap:0.35rem; margin-right:0.9rem; }
.shop-icon { position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; color:var(--forest); text-decoration:none; transition:color .25s; }
.shop-icon:hover { color:var(--sage); }
.shop-icon svg { width:21px; height:21px; }
@media (max-width:860px) {
  .shop-icons { margin-right:0.4rem; }
  .shop-icon { width:36px; height:36px; }
}


/* ==================================================================
   ÜBERSCHREIBUNGEN gegen Astra, Elementor und bog/style.css
   Alles hier ist auf die Seitenvorlage beschränkt und wirkt sich
   nicht auf andere Seiten der Website aus.
   ================================================================== */

/* — Fließtext: Newsreader — */
.page-template-page-startseite,
.page-template-page-startseite p,
.page-template-page-startseite li,
.page-template-page-startseite td,
.page-template-page-startseite address,
.page-template-page-startseite input,
.page-template-page-startseite textarea,
.page-template-page-startseite select,
.page-template-page-startseite .hero-sub,
.page-template-page-startseite .leistung-text,
.page-template-page-startseite .ref-text,
.page-template-page-startseite .branche-desc,
.page-template-page-startseite .vorteil-text,
.page-template-page-startseite .prozess-text,
.page-template-page-startseite .leasing-text,
.page-template-page-startseite .produkt p {
  font-family:var(--font-body) !important;
  text-transform:none !important;
}

/* — Titel und Bedienelemente: Bricolage Grotesque — */
.page-template-page-startseite h1,
.page-template-page-startseite h2,
.page-template-page-startseite h3,
.page-template-page-startseite h4,
.page-template-page-startseite .section-title,
.page-template-page-startseite .hero-script,
.page-template-page-startseite .hero-title,
.page-template-page-startseite .hero-badge,
.page-template-page-startseite .hero-stat-num,
.page-template-page-startseite .hero-stat-label,
.page-template-page-startseite .section-eyebrow,
.page-template-page-startseite .logo,
.page-template-page-startseite .nav-links a,
.page-template-page-startseite .nav-cta,
.page-template-page-startseite .leistung-title,
.page-template-page-startseite .leistung-link,
.page-template-page-startseite .ref-title,
.page-template-page-startseite .branche-name,
.page-template-page-startseite .vorteil-title,
.page-template-page-startseite .prozess-title,
.page-template-page-startseite .leasing-title,
.page-template-page-startseite .musterbox-title,
.page-template-page-startseite .config-question,
.page-template-page-startseite .config-label,
.page-template-page-startseite .form-label,
.page-template-page-startseite .produkt h3,
.page-template-page-startseite .produkt__detail,
.page-template-page-startseite .footer-spalte h3,
.page-template-page-startseite button,
.page-template-page-startseite .btn-kauf,
.page-template-page-startseite .btn-zweit,
.page-template-page-startseite .btn-primary,
.page-template-page-startseite .btn-ghost,
.page-template-page-startseite .form-submit {
  font-family:var(--font-display) !important;
  text-transform:none !important;
}

/* — Kursive Zeile über der Hauptüberschrift — */
.page-template-page-startseite .hero-kursiv {
  font-family:var(--font-body) !important;
  font-style:italic !important;
  font-weight:300 !important;
}

/* — Formularbeschriftungen: Größe und Gewicht zurückholen — */
.page-template-page-startseite .form-label,
.page-template-page-startseite .config-label {
  font-size:0.78rem !important;
  font-weight:500 !important;
  letter-spacing:0.02em !important;
  line-height:1.4 !important;
  color:var(--text-mute) !important;
  margin-bottom:0.35rem !important;
  display:block !important;
}
.page-template-page-startseite .form-input,
.page-template-page-startseite .form-select,
.page-template-page-startseite .form-textarea,
.page-template-page-startseite .config-input,
.page-template-page-startseite .config-select {
  font-size:0.95rem !important;
  line-height:1.5 !important;
}

/* — Leistungskacheln: „Anfragen" wieder sauber unter den Text — */
.page-template-page-startseite .leistung-card {
  display:flex !important;
  flex-direction:column !important;
}
.page-template-page-startseite .leistung-text {
  margin-bottom:1.25rem !important;
}
.page-template-page-startseite .leistung-link {
  display:inline-block !important;
  align-self:flex-start !important;
  margin-top:auto !important;
  position:static !important;
  float:none !important;
  line-height:1.5 !important;
  width:auto !important;
}
.page-template-page-startseite .leistung-link::after,
.page-template-page-startseite .btn-ghost::after {
  content:'' !important;
}

/* — Abstände, die Themes gern plattmachen — */
.page-template-page-startseite p { margin-top:0; }
.page-template-page-startseite ul { list-style:none; }

/* — Footer: Telefon und E-Mail wie die Anschrift darueber — */
.page-template-page-startseite .footer-kontakt,
.page-template-page-startseite .footer-kontakt a,
.page-template-page-startseite .footer-spalte address {
  font-family:var(--font-body) !important;
  font-size:0.88rem !important;
  font-weight:300 !important;
  line-height:1.7 !important;
  letter-spacing:0 !important;
}

/* — Markenschriften Manrope und Inter: Gewichte nachziehen — */
.page-template-page-startseite h1,
.page-template-page-startseite h2,
.page-template-page-startseite h3,
.page-template-page-startseite .section-title,
.page-template-page-startseite .hero-script,
.page-template-page-startseite .hero-stat-num,
.page-template-page-startseite .logo,
.page-template-page-startseite .leistung-title,
.page-template-page-startseite .ref-title,
.page-template-page-startseite .produkt h3,
.page-template-page-startseite .footer-spalte h3 {
  font-weight:700 !important;
  letter-spacing:-0.015em !important;
}
.page-template-page-startseite .nav-links a,
.page-template-page-startseite .nav-cta,
.page-template-page-startseite .hero-title,
.page-template-page-startseite .section-eyebrow,
.page-template-page-startseite .form-label,
.page-template-page-startseite .config-label,
.page-template-page-startseite .btn-kauf,
.page-template-page-startseite .btn-zweit,
.page-template-page-startseite .form-submit,
.page-template-page-startseite .leistung-link {
  font-weight:600 !important;
  letter-spacing:0 !important;
}
.page-template-page-startseite,
.page-template-page-startseite p,
.page-template-page-startseite li,
.page-template-page-startseite address,
.page-template-page-startseite .footer-kontakt,
.page-template-page-startseite .footer-kontakt a {
  font-weight:400 !important;
}
.page-template-page-startseite .hero-kursiv {
  font-style:italic !important;
  font-weight:400 !important;
}

/* — Verdana laeuft breit und hat eine grosse x-Hoehe: Fliesstext etwas kleiner — */
.page-template-page-startseite p,
.page-template-page-startseite li,
.page-template-page-startseite address,
.page-template-page-startseite .hero-sub,
.page-template-page-startseite .leistung-text,
.page-template-page-startseite .ref-text,
.page-template-page-startseite .branche-desc,
.page-template-page-startseite .vorteil-text,
.page-template-page-startseite .prozess-text,
.page-template-page-startseite .leasing-text,
.page-template-page-startseite .produkt p {
  font-size:0.9rem !important;
  line-height:1.7 !important;
  letter-spacing:0 !important;
}
.page-template-page-startseite .hero-kursiv {
  font-style:italic !important;
  font-weight:400 !important;
  font-size:1rem !important;
}

/* ==================================================================
   Footer-Listen buendig und Formulare in der urspruenglichen Optik
   ================================================================== */

/* — Aufzaehlungen ohne Einzug, buendig unter der Ueberschrift — */
.page-template-page-startseite .footer-links,
.page-template-page-startseite .footer-spalte ul {
  padding-left:0 !important;
  margin-left:0 !important;
  list-style:none !important;
}
.page-template-page-startseite .footer-links li { margin-left:0 !important; }

/* — Formularbeschriftungen: Versalien, gesperrt, klein — */
.page-template-page-startseite .form-label,
.page-template-page-startseite .config-label {
  font-size:0.62rem !important;
  font-weight:700 !important;
  letter-spacing:0.15em !important;
  text-transform:uppercase !important;
  color:var(--text-mute) !important;
  margin-bottom:0.5rem !important;
  display:block !important;
}

/* — Eingabefelder: nur Unterstrich statt Kasten — */
.page-template-page-startseite .form-input,
.page-template-page-startseite .form-select,
.page-template-page-startseite .form-textarea {
  border:none !important;
  border-bottom:1px solid var(--border) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0.55rem 0 !important;
  font-size:0.95rem !important;
  color:var(--text) !important;
}
.page-template-page-startseite .form-input:focus,
.page-template-page-startseite .form-select:focus,
.page-template-page-startseite .form-textarea:focus {
  border-bottom-color:var(--gold) !important;
  outline:none !important;
  box-shadow:none !important;
}

/* — Buttons: dunkel, Versalien, volle Breite — */
.page-template-page-startseite .form-submit,
.page-template-page-startseite .form-whatsapp {
  width:100% !important;
  padding:1rem 1.5rem !important;
  border-radius:0 !important;
  border:none !important;
  font-size:0.72rem !important;
  font-weight:700 !important;
  letter-spacing:0.12em !important;
  text-transform:uppercase !important;
}
.page-template-page-startseite .form-submit {
  background:var(--forest) !important;
  color:#fff !important;
}

/* — Shop- und Workshop-Buttons in derselben Sprache — */
.page-template-page-startseite .btn-kauf,
.page-template-page-startseite .btn-zweit {
  border-radius:0 !important;
  padding:0.95rem 1.6rem !important;
  font-size:0.72rem !important;
  font-weight:700 !important;
  letter-spacing:0.12em !important;
  text-transform:uppercase !important;
}
.page-template-page-startseite .btn-kauf {
  background:var(--forest) !important;
  color:#fff !important;
  border:none !important;
}
.page-template-page-startseite .btn-zweit {
  background:transparent !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
}
.page-template-page-startseite .btn-zweit:hover {
  border-color:var(--forest) !important;
  color:var(--forest) !important;
}

/* — Cookie-Banner: Groessen an Verdana angepasst, Versalien zurueck — */
.page-template-page-startseite #cookie-banner { font-size:0.78rem !important; }
.page-template-page-startseite #cookie-banner h3 { font-size:0.86rem !important; }
.page-template-page-startseite #cookie-banner p { font-size:0.78rem !important; line-height:1.65 !important; }
.page-template-page-startseite #cookie-banner a {
  font-size:0.75rem !important;
  font-weight:400 !important;
}
.page-template-page-startseite .cookie-btn {
  font-size:0.64rem !important;
  font-weight:700 !important;
  letter-spacing:0.1em !important;
  text-transform:uppercase !important;
  padding:0.7rem 1.3rem !important;
}
.page-template-page-startseite .cookie-btn-reject { font-size:0.62rem !important; }
.page-template-page-startseite .cookie-detail-toggle {
  font-size:0.68rem !important;
  font-weight:600 !important;
  letter-spacing:0.06em !important;
}
.page-template-page-startseite .cookie-actions-wrap { min-width:190px !important; }

/* — Untermenues: dunkelgruen, mit mehr Luft zwischen den Eintraegen — */
.page-template-page-startseite .untermenue {
  background:var(--forest) !important;
  border:none !important;
  border-top:2px solid var(--gold) !important;
  box-shadow:0 16px 40px rgba(26,48,32,0.28) !important;
  padding:0.6rem 0 !important;
  min-width:250px !important;
}
.page-template-page-startseite .untermenue li + li {
  border-top:1px solid rgba(255,255,255,0.09) !important;
}
.page-template-page-startseite .untermenue a {
  color:rgba(255,255,255,0.88) !important;
  padding:0.8rem 1.5rem !important;
  font-size:0.84rem !important;
  font-weight:600 !important;
  letter-spacing:0.01em !important;
  line-height:1.4 !important;
}
.page-template-page-startseite .untermenue a:hover {
  background:rgba(255,255,255,0.09) !important;
  color:#fff !important;
}

/* Mobil bleibt das Untermenue offen und hell */
@media (max-width:860px) {
  .page-template-page-startseite .untermenue {
    background:transparent !important;
    border-top:none !important;
    box-shadow:none !important;
    padding:0 0 0.5rem !important;
  }
  .page-template-page-startseite .untermenue li + li { border-top:none !important; }
  .page-template-page-startseite .untermenue a {
    color:var(--text-mute) !important;
    padding:0.55rem 0 0.55rem 1rem !important;
  }
  .page-template-page-startseite .untermenue a:hover {
    background:transparent !important;
    color:var(--forest) !important;
  }
}

/* — Buttons: keine Versalien, damit aus "Maß" kein "MASS" wird — */
.page-template-page-startseite .btn-kauf,
.page-template-page-startseite .btn-zweit {
  text-transform:none !important;
  letter-spacing:0.01em !important;
  font-size:0.85rem !important;
  font-weight:600 !important;
}
.page-template-page-startseite .form-submit,
.page-template-page-startseite .form-whatsapp {
  text-transform:none !important;
  letter-spacing:0.01em !important;
  font-size:0.9rem !important;
  font-weight:600 !important;
}

/* — Reiter im Kontaktbereich groesser — */
.page-template-page-startseite .kontakt-tab {
  font-family:var(--font-display) !important;
  font-size:0.95rem !important;
  font-weight:600 !important;
  letter-spacing:0.01em !important;
  text-transform:none !important;
  padding-bottom:0.9rem !important;
}

/* — Kontaktangaben links einheitlich setzen — */
.page-template-page-startseite .kontakt-label {
  font-family:var(--font-display) !important;
  font-size:0.62rem !important;
  font-weight:700 !important;
  letter-spacing:0.15em !important;
  text-transform:uppercase !important;
  color:var(--gold-dk) !important;
  margin-bottom:0.3rem !important;
  line-height:1.4 !important;
}
.page-template-page-startseite .kontakt-value {
  font-family:var(--font-body) !important;
  font-size:0.9rem !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  color:var(--text) !important;
  line-height:1.6 !important;
  margin:0 !important;
}
.page-template-page-startseite .kontakt-detail { margin-bottom:1.4rem !important; }

/* — Formularbeschriftungen und Kontaktlabels in gleicher Groesse — */
.page-template-page-startseite .form-label {
  font-size:0.62rem !important;
  letter-spacing:0.15em !important;
}

/* — KI-Hinweis: ohne farbigen Kreis, nur das Zeichen — */
.page-template-page-startseite .ai-badge,
.page-template-page-startseite .ai-badge:hover {
  background-color:transparent !important;
  box-shadow:none !important;
}

/* — Reiter im Kontaktbereich fett — */
.page-template-page-startseite .kontakt-tab { font-weight:700 !important; }

/* — Newsletter — */
.newsletter { padding:4.5rem 4rem; background:var(--cream); text-align:center;
  border-top:0.5px solid var(--border); }
.newsletter .section-eyebrow { margin-bottom:0.5rem; }
.newsletter .section-title { margin-bottom:0.9rem; }
.newsletter-text { max-width:52ch; margin:0 auto 2rem; font-size:0.9rem;
  line-height:1.7; color:var(--text-mute); }
.newsletter-form { max-width:520px; margin:0 auto; }
.newsletter-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.newsletter-zeile { display:flex; gap:0; }
.newsletter-input { flex:1; min-width:0; font-family:var(--font-body); font-size:0.92rem;
  padding:0.95rem 1.1rem; border:1px solid var(--border-gold); border-right:none;
  background:var(--white); color:var(--text); border-radius:0; }
.newsletter-input:focus { outline:none; border-color:var(--gold); }
.newsletter-btn { font-family:var(--font-display); font-size:0.8rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; color:#fff; background:#1A2B1C;
  border:none; padding:0.95rem 1.9rem; cursor:pointer; transition:background .3s; }
.newsletter-btn:hover { background:var(--moss); }
.newsletter-check { display:flex; gap:0.6rem; align-items:flex-start; text-align:left;
  margin-top:1.1rem; font-size:0.8rem; line-height:1.6; color:var(--text-mute); }
.newsletter-check input { margin-top:0.2rem; width:16px; height:16px; flex-shrink:0;
  accent-color:var(--forest); }
.newsletter-check a { color:var(--text-mute); }
.newsletter-meta { margin-top:1rem; font-size:0.75rem; line-height:1.6; color:var(--text-mute); }
@media (max-width:860px) {
  .newsletter { padding:3rem 1.5rem; }
  .newsletter-zeile { flex-direction:column; gap:0.6rem; }
  .newsletter-input { border-right:1px solid var(--border-gold); }
  .newsletter-btn { padding:0.9rem 1.5rem; }
}

/* — Untere Footer-Leiste: Copyright, Partnerlogo, Profile — */
.footer-unten { display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:1.5rem; margin-top:2.5rem; padding-top:1.5rem; border-top:0.5px solid var(--border); }
.page-template-page-startseite .footer-unten .footer-copy {
  margin:0 !important; padding:0 !important; border:none !important; text-align:left; }
.footer-partner { justify-self:center; display:block; opacity:0.9; transition:opacity .3s; }
.footer-partner:hover { opacity:1; }
.footer-partner img { display:block; width:122px; height:auto; }
.footer-social { justify-self:end; display:flex; gap:0.35rem; }
.footer-social a { display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; color:var(--text-mute); transition:color .25s; }
.footer-social a:hover { color:var(--forest); }
.footer-social svg { width:19px; height:19px; }
@media (max-width:860px) {
  .footer-unten { grid-template-columns:1fr; justify-items:center; text-align:center; gap:1.25rem; }
  .page-template-page-startseite .footer-unten .footer-copy { text-align:center; }
  .footer-social { justify-self:center; }
}

/* — Button "Vertrag widerrufen" in der unteren Footer-Leiste — */
.footer-unten-links { display:flex; flex-direction:column; align-items:flex-start; gap:0.85rem; }
.footer-widerruf { display:inline-block; font-family:var(--font-display); font-size:0.8rem;
  font-weight:600; color:var(--text); text-decoration:none; padding:0.6rem 1.2rem;
  border:1px solid var(--border); background:var(--white); transition:all .25s; }
.footer-widerruf:hover { border-color:var(--forest); color:var(--forest); }
@media (max-width:860px) {
  .footer-unten-links { align-items:center; }
}

/* ==================================================================
   Nachbesserungen: Buttons, KI-Zeichen, Newsletter, Footer-Symbole
   ================================================================== */

/* — Alle Buttons in Dunkelgruen — */
.page-template-page-startseite .btn-kauf,
.page-template-page-startseite .btn-zweit,
.page-template-page-startseite .form-submit,
.page-template-page-startseite .newsletter-btn,
.page-template-page-startseite .footer-widerruf,
.page-template-page-startseite .cookie-btn,
.page-template-page-startseite .cookie-btn-reject,
.page-template-page-startseite .mb-submit,
.page-template-page-startseite .config-nav-btn {
  background:var(--forest) !important;
  color:#fff !important;
  border:1px solid var(--forest) !important;
}
.page-template-page-startseite .btn-kauf:hover,
.page-template-page-startseite .btn-zweit:hover,
.page-template-page-startseite .form-submit:hover,
.page-template-page-startseite .newsletter-btn:hover,
.page-template-page-startseite .footer-widerruf:hover,
.page-template-page-startseite .cookie-btn:hover {
  background:var(--moss) !important;
  border-color:var(--moss) !important;
  color:#fff !important;
}

/* — KI-Wasserzeichen ohne farbige Flaeche — */
.page-template-page-startseite .ai-badge,
.page-template-page-startseite .ai-badge:hover,
.page-template-page-startseite .ai-badge-wrap {
  background:none !important;
  background-color:transparent !important;
  box-shadow:none !important;
  border:none !important;
}

/* — Newsletter: Ueberschrift deutlich kleiner — */
.page-template-page-startseite .newsletter-titel {
  font-size:1.35rem !important;
  margin-bottom:0.7rem !important;
}
.page-template-page-startseite .newsletter .section-eyebrow { font-size:0.7rem !important; }
.page-template-page-startseite .newsletter-check span { font-size:0.78rem !important; font-weight:400 !important; }
.page-template-page-startseite .newsletter-check a { text-decoration:underline !important; }

/* — Profil-Symbole deutlich kleiner — */
.page-template-page-startseite .footer-social { gap:0.15rem !important; }
.page-template-page-startseite .footer-social a {
  width:26px !important;
  height:26px !important;
}
.page-template-page-startseite .footer-social svg {
  width:15px !important;
  height:15px !important;
}

/* — Profil-Symbole auf Groesse des KI-Zeichens — */
.page-template-page-startseite .footer-social {
  gap:0.5rem !important;
  align-items:center !important;
  line-height:0 !important;
}
.page-template-page-startseite .footer-social a {
  width:22px !important;
  height:22px !important;
  padding:0 !important;
}
.page-template-page-startseite .footer-social svg {
  width:100% !important;
  height:100% !important;
  display:block !important;
}

/* — Konfigurator-Buttons in Dunkelgruen — */
.page-template-page-startseite .config-btn-back,
.page-template-page-startseite .config-btn-next,
.page-template-page-startseite .btn-primary,
.page-template-page-startseite .btn-ghost,
.page-template-page-startseite .form-whatsapp,
.page-template-page-startseite #mb-submit-btn {
  background:var(--forest) !important;
  color:#fff !important;
  border:1px solid var(--forest) !important;
  border-radius:0 !important;
}
.page-template-page-startseite .config-btn-back:hover,
.page-template-page-startseite .config-btn-next:hover,
.page-template-page-startseite .btn-primary:hover,
.page-template-page-startseite .btn-ghost:hover,
.page-template-page-startseite #mb-submit-btn:hover {
  background:var(--moss) !important;
  border-color:var(--moss) !important;
}

/* — Dankeseite nach dem Absenden — */
.danke-overlay { position:fixed; inset:0; z-index:900; background:var(--cream);
  display:flex; align-items:center; justify-content:center; padding:2rem 1.5rem;
  overflow-y:auto; }
.danke-overlay[hidden] { display:none; }
.danke-box { max-width:620px; text-align:center; }
.danke-haken { width:78px; height:78px; margin:0 auto 2rem; border-radius:50%;
  border:1px solid var(--border-gold); color:var(--gold-dk);
  display:flex; align-items:center; justify-content:center; }
.danke-haken svg { width:34px; height:34px; }
.danke-titel { font-family:var(--font-display); font-size:clamp(1.6rem,3.4vw,2.4rem);
  font-weight:700; letter-spacing:-0.02em; color:#1A2B1C; margin-bottom:1.4rem; }
.danke-text { font-family:var(--font-body); font-size:0.92rem; line-height:1.8;
  color:var(--text-mute); margin:0 auto 1.1rem; max-width:46ch; }
.danke-aktionen { display:flex; gap:0.8rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }
.danke-btn { font-family:var(--font-display); font-size:0.72rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; text-decoration:none;
  padding:1rem 1.7rem; background:var(--forest); color:#fff;
  border:1px solid var(--forest); transition:all .25s; }
.danke-btn:hover { background:var(--moss); border-color:var(--moss); }
.danke-btn-hell { background:transparent; color:var(--text); border-color:var(--border); }
.danke-btn-hell:hover { background:transparent; border-color:var(--forest); color:var(--forest); }

/* — "Vertrag widerrufen" in der Kontaktspalte — */
.page-template-page-startseite .footer-spalte .footer-widerruf {
  margin-top:1.4rem;
  font-size:0.78rem !important;
}

/* — Profil-Symbole etwas weiter nach rechts — */
.page-template-page-startseite .footer-social { margin-right:-0.5rem !important; }

/* — "Maß ändern" wieder hell mit feiner Linie — */
.page-template-page-startseite .btn-zweit {
  background:transparent !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
}
.page-template-page-startseite .btn-zweit:hover {
  background:transparent !important;
  border-color:var(--forest) !important;
  color:var(--forest) !important;
}

/* — Schnellantworten im Chat: weiss mit feiner Linie — */
.page-template-page-startseite .chat-suggestion {
  background:var(--white) !important;
  color:var(--slate-green) !important;
  border:1px solid rgba(61,102,71,0.28) !important;
  border-radius:4px !important;
  font-size:0.78rem !important;
  font-weight:400 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  padding:0.6rem 0.85rem !important;
  text-align:left !important;
  line-height:1.45 !important;
}
.page-template-page-startseite .chat-suggestion:hover {
  background:var(--off-white) !important;
  border-color:var(--forest) !important;
  color:var(--forest) !important;
}
.page-template-page-startseite .chat-suggestions { gap:0.5rem !important; }

/* — Newsletter: schmaleres, kleineres Eingabefeld — */
.page-template-page-startseite .newsletter-form { max-width:400px !important; }
.page-template-page-startseite .newsletter-input {
  font-size:0.78rem !important;
  padding:0.7rem 0.85rem !important;
}
.page-template-page-startseite .newsletter-btn {
  font-size:0.68rem !important;
  padding:0.7rem 1.3rem !important;
}
.page-template-page-startseite .newsletter-status {
  font-size:0.8rem !important;
  line-height:1.6 !important;
  margin-top:0.9rem !important;
}
.page-template-page-startseite .newsletter-status[hidden] { display:none !important; }

/* — "Vertrag widerrufen" weiter nach unten — */
.page-template-page-startseite .footer-spalte .footer-widerruf { margin-top:3.5rem !important; }

/* — Dankeseite: Hauptbutton in Gold wie im Entwurf — */
.page-template-page-startseite .danke-btn {
  background:var(--gold) !important;
  color:#1A2B1C !important;
  border-color:var(--gold) !important;
}
.page-template-page-startseite .danke-btn:hover {
  background:#a5834b !important;
  border-color:#a5834b !important;
}
.page-template-page-startseite .danke-btn-hell {
  background:transparent !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

/* — KI-Zeichen: dunkler Kreis wie im Original, damit es sichtbar bleibt — */
.page-template-page-startseite .ai-badge {
  width:40px !important;
  height:40px !important;
  border-radius:50% !important;
  background-color:rgba(30,30,30,0.55) !important;
  background-image:url(/wp-content/themes/bog/assets/img/48-grafik.png) !important;
  background-size:64% !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  box-shadow:0 1px 5px rgba(0,0,0,0.4) !important;
  border:none !important;
}
.page-template-page-startseite .ai-badge:hover {
  background-color:rgba(30,30,30,0.75) !important;
  transform:scale(1.08);
}

/* ==================================================================
   Kontaktabschnitt im Stil des Entwurfs
   ================================================================== */
.page-template-page-startseite .kontakt {
  grid-template-columns:1fr 1fr !important;
  gap:2.5rem !important;
  align-items:start !important;
  background:var(--cream) !important;
}
.kontakt-panel { background:var(--forest); color:#fff; padding:3rem 2.5rem; }
.kontakt-titel { font-family:var(--font-display); font-size:clamp(1.5rem,2.6vw,2rem);
  font-weight:700; letter-spacing:-0.02em; color:#fff; line-height:1.15; margin-bottom:0.9rem; }
.kontakt-sub { font-size:0.85rem; color:rgba(255,255,255,0.78); margin-bottom:2.2rem; }
.page-template-page-startseite .kontakt-panel .kontakt-label { color:var(--gold-lt) !important; }
.page-template-page-startseite .kontakt-panel .kontakt-value { color:#fff !important; font-weight:600 !important; }
.page-template-page-startseite .kontakt-panel .kontakt-line { background:rgba(184,150,90,0.55) !important; }
.kontakt-panel-aktionen { display:flex; flex-direction:column; align-items:flex-start;
  gap:0.7rem; margin-top:2rem; }
.kp-btn { display:inline-flex; align-items:center; justify-content:center; gap:0.55rem;
  font-family:var(--font-display); font-size:0.7rem; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; text-decoration:none; padding:0.95rem 1.6rem; transition:all .25s; }
.kp-btn svg { width:1.15em; height:1.15em; flex-shrink:0; }
.kp-btn-linie { color:#fff; background:transparent; border:1px solid rgba(255,255,255,0.55); }
.kp-btn-linie:hover { border-color:#fff; background:rgba(255,255,255,0.08); }
.kp-btn-gold { color:#1A2B1C; background:var(--gold); border:1px solid var(--gold); }
.kp-btn-gold:hover { background:#a5834b; border-color:#a5834b; }
.kontakt-panel-trenner { height:1px; background:rgba(255,255,255,0.2); margin:2.2rem 0 1.6rem; }
.kontakt-panel-frage { font-family:var(--font-display); font-weight:700; font-size:0.95rem;
  color:#fff; margin-bottom:0.5rem; }
.kontakt-panel-text { font-size:0.84rem; line-height:1.75; color:rgba(255,255,255,0.78);
  margin-bottom:1.5rem; }

/* — Rechte Karte — */
.kontakt-karte { background:var(--white); border:1px solid var(--border); padding:2.5rem 2.25rem; }
.page-template-page-startseite .kontakt-mode-switch {
  display:flex !important; gap:0 !important; border:none !important; margin-bottom:2rem !important; }
.page-template-page-startseite .kontakt-tab {
  flex:1 !important; padding:1rem 0.75rem !important; cursor:pointer !important;
  font-family:var(--font-display) !important; font-size:0.7rem !important; font-weight:700 !important;
  letter-spacing:0.12em !important; text-transform:uppercase !important;
  background:var(--white) !important; color:var(--text) !important;
  border:1px solid var(--border) !important; }
.page-template-page-startseite .kontakt-tab-active {
  background:var(--forest) !important; color:#fff !important; border-color:var(--forest) !important; }

/* — Eingabefelder wieder als Kasten — */
.page-template-page-startseite .kontakt-karte .form-input,
.page-template-page-startseite .kontakt-karte .form-select,
.page-template-page-startseite .kontakt-karte .form-textarea {
  border:1px solid rgba(184,150,90,0.35) !important;
  background:var(--off-white) !important;
  padding:0.75rem 0.9rem !important;
  border-radius:0 !important;
  width:100% !important;
}
.page-template-page-startseite .kontakt-karte .form-input:focus,
.page-template-page-startseite .kontakt-karte .form-select:focus,
.page-template-page-startseite .kontakt-karte .form-textarea:focus {
  border-color:var(--gold) !important; }
.page-template-page-startseite .kontakt-karte .form-textarea { min-height:120px !important; }
.page-template-page-startseite .kontakt-karte .form-row {
  display:grid !important; grid-template-columns:1fr 1fr !important; gap:1.25rem !important; }
.page-template-page-startseite .kontakt-karte .form-group { margin-bottom:1.25rem !important; }

/* — Buttons unter dem Formular — */
.page-template-page-startseite .kontakt-karte .form-submit-row {
  display:grid !important; grid-template-columns:1fr 1fr !important; gap:1rem !important;
  margin-top:0.5rem !important; }
.page-template-page-startseite .kontakt-karte .form-submit {
  width:100% !important; background:var(--forest) !important; color:#fff !important;
  border:1px solid var(--forest) !important; }
.page-template-page-startseite .kontakt-karte .form-whatsapp {
  width:100% !important; background:var(--white) !important; color:var(--text) !important;
  border:1px solid var(--border) !important; padding:1rem !important;
  font-size:0.7rem !important; }
.page-template-page-startseite .kontakt-karte .form-whatsapp:hover {
  border-color:var(--forest) !important; color:var(--forest) !important; }
.page-template-page-startseite #k-status { margin-top:1rem !important; font-size:0.8rem !important;
  line-height:1.6 !important; font-weight:600 !important; }
.kontakt-termin-text { font-size:0.88rem; line-height:1.8; color:var(--text-mute); margin-bottom:1.75rem; }

/* — "Leistungen entdecken" wieder als Textlink — */
.page-template-page-startseite .btn-ghost {
  background:transparent !important; border:none !important;
  color:var(--sage) !important; padding:1.1rem 0 !important;
  border-bottom:1px solid var(--gold) !important; }
.page-template-page-startseite .btn-ghost:hover {
  background:transparent !important; color:var(--forest) !important; }

@media (max-width:900px) {
  .page-template-page-startseite .kontakt { grid-template-columns:1fr !important; }
  .kontakt-panel, .kontakt-karte { padding:2rem 1.5rem; }
  .page-template-page-startseite .kontakt-karte .form-row,
  .page-template-page-startseite .kontakt-karte .form-submit-row {
    grid-template-columns:1fr !important; }
}

/* — Beide goldenen Buttons im Panel gleich breit und gleich gesetzt — */
.page-template-page-startseite .kontakt-panel .kp-btn {
  min-width:260px !important;
  padding:0.95rem 1.6rem !important;
  font-size:0.7rem !important;
  font-weight:700 !important;
  letter-spacing:0.12em !important;
  text-transform:uppercase !important;
  justify-content:center !important;
}