/*
Theme Name: Weiss Montage
Theme URI: https://betonbohren.net
Author: Weiss Montage
Description: Individuelles One-Page-Theme für Weiss Montage – Fenster, Wintergärten, Markisen & Montage in Frechen.
Version: 2.23.2
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: weiss-montage
*/

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --blue:       #C5A922;
      --gold:       #C5A922;
      --gold-ink:   #8A7412;
      --blue-dark:  #0a0f1e;
      --blue-mid:   #C5A922;
      --blue-light: #d9c560;
      --blue-pale:  #faf6e3;
      --navy:       #0f172a;
      --white:      #ffffff;
      --gray:       #64748b;
      --gray-light: #f1f5f9;
      --border:     #e2e8f0;
      --red:        #c0392b;
    }
    html { scroll-behavior: smooth; }
    [id] { scroll-margin-top: 90px; }
    body { font-family: 'Barlow', sans-serif; background: var(--white); color: var(--navy); overflow-x: hidden; }
    a { text-decoration: none; color: inherit; }

    /* ── NAV ── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 200;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 3rem; height: 70px;
      background: #0a0f1e;
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 2px 12px rgba(0,0,0,0.4);
    }
    .nav-logo img { height: 46px; width: auto; object-fit: contain; display: block; }
    .nav-center { display: flex; gap: 2.5rem; align-items: center; }
    .nav-center a { font-size: 0.88rem; font-weight: 600; letter-spacing: 0.02em; color: rgba(255,255,255,0.92); transition: color 0.2s; display: flex; align-items: center; gap: 0.25rem; }
    .nav-center a:hover { color: #C5A922; }
    .nav-center a .arr { font-size: 0.7rem; color: var(--gray); }
    .nav-right { display: flex; gap: 0.8rem; align-items: center; }
    .btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1.4rem; border-radius: 4px; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all 0.2s; border: none; font-family: inherit; }
    .btn-blue { background: var(--white); color: #0a0f1e; }
    .btn-blue:hover { background: var(--gold); color: #0a0f1e; box-shadow: 0 4px 14px rgba(197,169,34,0.35); }
    .btn-darkblue { background: #0a0f1e; color: #ffffff; }
    .btn-darkblue:hover { background: var(--gold); color: #0a0f1e; box-shadow: 0 4px 14px rgba(197,169,34,0.35); }
    .btn-outline { background: transparent; color: var(--navy); border: 1.5px solid var(--border); }
    .btn-outline:hover { border-color: var(--blue); color: var(--gold-ink); }

    /* ── HERO (Banner-Layout) ── */
    .nav-phone { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.88rem; font-weight:600; color:rgba(255,255,255,0.92); margin-right:0.6rem; white-space:nowrap; }
    .nav-phone:hover { color: var(--gold); }
    .hero2 { position: relative; margin-top: 70px; min-height: calc(100vh - 70px); max-height: 820px; display: flex; align-items: center; padding: 3rem 3rem; overflow: hidden; background: #0f172a; }
    .hero2-bg { position: absolute; inset: 0; z-index: 0; }
    .hero2-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
    .hero2-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(10,15,30,0.28) 0%, rgba(10,15,30,0) 55%); }
    .hero2-chips { position: absolute; top: 1.6rem; right: 3rem; z-index: 2; display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; }
    .hero2-chips a { background: rgba(255,255,255,0.92); color: var(--navy); font-size: 0.8rem; font-weight: 700; padding: 0.5rem 0.9rem; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,0.15); transition: background 0.2s; }
    .hero2-chips a:hover { background: var(--gold); color: #0a0f1e; }
    .hero2-card { position: relative; z-index: 2; background: #fff; border-radius: 10px; border-left: 5px solid var(--gold); padding: 2.2rem 2.4rem 2rem; max-width: 640px; box-shadow: 0 20px 50px rgba(0,0,0,0.28); }
    .hero2-pill { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); background: var(--blue-pale); border: 1px solid rgba(197,169,34,0.2); border-radius: 999px; padding: 0.4rem 0.9rem; margin-bottom: 1.2rem; }
    .hero2-card h1 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 1.02; letter-spacing: 0.01em; color: var(--navy); margin: 0 0 1rem; }
    .hero2-card h1 span { color: var(--blue); }
    .hero2-sub { font-size: 1rem; color: #475569; line-height: 1.6; max-width: 520px; margin-bottom: 1.6rem; }
    .hero2-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
    .hero2-btn-dark, .hero2-btn-light { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.5rem; border-radius: 6px; font-size: 0.92rem; font-weight: 700; transition: all 0.2s; white-space: nowrap; }
    .hero2-btn-dark { background: #0a0f1e; color: #fff; }
    .hero2-btn-dark:hover { background: var(--gold); color: #0a0f1e; box-shadow: 0 6px 18px rgba(197,169,34,0.35); }
    .hero2-btn-light { background: #fff; color: var(--navy); border: 1.5px solid #cbd5e1; }
    .hero2-btn-light:hover { border-color: var(--blue); color: var(--gold-ink); }
    .hero2-trust { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; font-size: 0.82rem; font-weight: 600; color: #334155; }
    .hero2-google { display: inline-flex; align-items: center; gap: 0.4rem; }
    .hero2-google .stars { color: var(--gold); letter-spacing: 0.05em; }
    .hero2-mobilebar { display: none; }
    .chip-mobile, .hero2-trust--mobile, .direkt-zu { display: none; }

    /* ── HERO (alt) ── */
    .hero {
      min-height: calc(100vh - 70px);
      display: grid; grid-template-columns: 1fr 1fr;
      align-items: start;
      padding: 2.5rem 0 0;
      gap: 0;
      background: var(--white);
      overflow: hidden;
      margin-top: 70px;
    }
    .hero-left { display:flex; flex-direction:column; justify-content:space-between; padding:0 3rem 0 3rem; }
    .hero-logo-bottom { margin-top: -1rem; margin-bottom: 1.5rem; display:block; }
    .hero-badge {
      display: inline-flex; align-items: center; gap: 0.5rem;
      background: var(--blue-pale); color: var(--gold-ink);
      font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
      padding: 0.35rem 1rem; border-radius: 70px;
      margin-bottom: 1.8rem; border: 1px solid rgba(197,169,34,0.2);
    }
    
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.4} }
    .hero h1 {
      font-size: clamp(2.8rem, 5.5vw, 5rem);
      font-weight: 800; line-height: 1.1;
      letter-spacing: 0.01em; color: var(--navy);
      font-family: 'Barlow Condensed', sans-serif;
      text-transform: uppercase;
    }
    .hero-sub {
      margin-top: 1.4rem; font-size: 1rem; font-weight: 500;
      color: #334155; line-height: 1.65;
    }
    .hero-actions { margin-top: 2.2rem; display: flex; gap: 1rem; flex-wrap: wrap; }
    .btn-lg { padding: 0.6rem 1.4rem; font-size: 0.88rem; border-radius: 6px; }
    .btn-wa {
      background: transparent; color: var(--navy);
      border: 1.5px solid #0a0f1e; border-radius: 6px;
      padding: 1.1rem 2rem; font-size: 1rem; font-weight: 600;
      display: inline-flex; align-items: center; gap: 0.5rem;
      transition: all 0.2s; cursor: pointer; font-family: inherit;
    }
    .btn-wa:hover { border-color: #25d366; color: #25d366; background: rgba(37,211,102,0.06); }
    .hero-right {
      border-radius: 6px; overflow: hidden;
      box-shadow: 0 20px 80px rgba(0,0,0,0.15);
      background: #0f172a;
      margin-top: 0;
      margin-right: 3rem;
      align-self: stretch;
    }
    .hero-right img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.9; }

    /* ── PARTNER STRIP ── */
    .strip {
      background: var(--gray-light);
      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
      padding: 1.4rem 3rem;
    }
    .strip-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 3rem; flex-wrap: wrap; }
    .strip-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); white-space: nowrap; }
    .partner-list { display: flex; gap: 2.5rem; flex-wrap: wrap; align-items: center; }
    .partner-name { font-size: 0.92rem; font-weight: 700; letter-spacing: 0.06em; color: #94a3b8; transition: color 0.3s; cursor: default; }
    .partner-name:hover { color: var(--gold-ink); }

    /* ── SECTIONS ── */
    section { padding: 6rem 3rem; }
    .inner { max-width: 1200px; margin: 0 auto; }
    .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 1rem; }
    h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 800; letter-spacing: 0em; line-height: 1.15; color: var(--navy); font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; }
    .section-sub { margin-top: 1rem; font-size: 1rem; color: var(--gray); line-height: 1.7; max-width: 560px; }

    /* ── SERVICES ── */
    .services { background: #1a2235; }
    .services-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 3rem; gap: 2rem; flex-wrap: wrap; }
    .services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; }
    .service-card { background: #1e2a3d; padding: 2.2rem; transition: background 0.3s, border-left-color 0.3s; display: flex; flex-direction: column; gap: 0.8rem; border-left: 3px solid transparent; }
    .service-card:hover { background: #253047; border-left-color: #C5A922; }
    .svc-icon { width: 44px; height: 44px; background: rgba(197,169,34,0.12); border: 1px solid rgba(197,169,34,0.45); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
    .service-card h3 { font-size: 1.1rem; font-weight: 700; color: #f1f5f9; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: 0.03em; }
    .service-card p { font-size: 0.875rem; color: #cbd5e1; line-height: 1.65; flex: 1; }
    .svc-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 600; color: #C5A922; margin-top: 0.5rem; transition: gap 0.2s; }
    .svc-link:hover { gap: 0.6rem; }

    /* ── STATS ── */
    .stats-bar { background: #111827; padding: 3rem; border-top: 4px solid var(--blue); border-bottom: 4px solid var(--blue); }
    .stats-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; text-align: center; }
    .stats-inner > div { padding: 0 2rem; border-right: 2px solid rgba(255,255,255,0.15); }
    .stats-inner > div:last-child { border-right: none; }
    .stat-num { font-size: 2.8rem; font-weight: 800; letter-spacing: -0.03em; color: var(--white); line-height: 1; }
    .stat-label { font-size: 0.85rem; color: rgba(255,255,255,0.85); margin-top: 0.4rem; }

    /* ── ABOUT ── */
    .about { background: var(--gray-light); }
    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
    .about-left img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; object-position: center 70%; border-radius: 4px; border: 1px solid var(--border); display: block; }
    .about-features { display: flex; flex-direction: column; gap: 0; margin-top: 2.5rem; }
    .feat { display: flex; gap: 1.2rem; align-items: flex-start; padding: 1.5rem 0; border-bottom: 1px solid var(--border); }
    .feat:first-child { border-top: 1px solid var(--border); }
    .feat-icon { width: 36px; height: 36px; flex-shrink: 0; background: var(--blue-pale); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
    .feat h4 { font-size: 0.95rem; font-weight: 700; color: var(--navy); margin-bottom: 0.25rem; }
    .feat p { font-size: 0.85rem; color: var(--gray); line-height: 1.6; }

    /* ── GALLERY ── */
    .gallery { background: #f2f4f7; }
    .gallery-filters { display: flex; gap: 0.5rem; margin: 2.5rem 0; flex-wrap: wrap; }
    .filter-btn { padding: 0.4rem 1rem; border-radius: 70px; border: 1.5px solid var(--border); background: transparent; color: var(--gray); font-size: 0.82rem; font-family: inherit; cursor: pointer; transition: all 0.2s; font-weight: 500; }
    .filter-btn.active, .filter-btn:hover { background: var(--blue); color: #0a0f1e; border-color: var(--blue); font-weight: 600; }
    .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .gal-item { border-radius: 6px; overflow: hidden; position: relative; background: var(--gray-light); aspect-ratio: 4/3; }
    .gal-item.wide { grid-column: span 2; aspect-ratio: 8/3; }
    .gal-item.is-hidden { display: none; }
    .gal-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s; }
    .gal-item:hover img { transform: scale(1.04); }
    .gal-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.8rem; background: linear-gradient(to top, rgba(15,23,42,0.75), transparent); font-size: 0.78rem; color: var(--white); opacity: 0; transition: opacity 0.3s; }
    .gal-item:hover .gal-label { opacity: 1; }

    /* ── TESTIMONIALS ── */
    .testimonials { background: var(--gray-light); }
    .testi-head { text-align: center; margin-bottom: 3rem; }
    .testi-head .section-sub { margin: 1rem auto 0; }
    .testi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .testi-card { background: var(--white); border: 1px solid var(--border); border-radius: 4px; padding: 2rem; display: flex; flex-direction: column; gap: 1.2rem; transition: box-shadow 0.3s, border-color 0.3s; }
    .testi-card:hover { box-shadow: 0 8px 30px rgba(197,169,34,0.1); border-color: rgba(197,169,34,0.3); }
    .testi-stars { color: #f59e0b; font-size: 0.85rem; }
    .testi-text { font-size: 1rem; line-height: 1.7; color: var(--navy); font-style: italic; }
    .testi-author { display: flex; align-items: center; gap: 0.8rem; }
    .testi-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--blue-dark); display: flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 700; color: var(--white); }
    .testi-name { font-size: 0.9rem; font-weight: 700; color: var(--navy); }
    .testi-role { font-size: 0.78rem; color: var(--gray); }

    /* ── CTA BAND ── */
    .cta-band { background: linear-gradient(135deg,#0a0f1e 0%,#0d1a3a 60%,#0a1628 100%); padding: 5rem 3rem; text-align: center; border-top: 3px solid #C5A922; border-bottom: 3px solid #C5A922; }
    .cta-band h2 { color: var(--white); }
    .cta-band p { color: rgba(255,255,255,0.8); margin: 1rem auto; max-width: 520px; font-size: 1rem; }
    .cta-actions { display: flex; gap: 1rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }
    .btn-white { background: var(--white); color: #0a0f1e;  padding: 0.85rem 1.8rem; border-radius: 6px; font-size: 0.95rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.4rem; transition: all 0.2s; cursor: pointer; }
    .btn-white:hover { background: var(--gold); color: #0a0f1e; }
    .btn-outline-white { background: transparent; color: var(--white); padding: 0.85rem 1.8rem; border-radius: 6px; font-size: 0.95rem; font-weight: 600; border: 2px solid rgba(255,255,255,0.4); display: inline-flex; align-items: center; gap: 0.4rem; transition: all 0.2s; cursor: pointer; }
    .btn-outline-white:hover { border-color: var(--white); background: rgba(255,255,255,0.1); }

    /* ── PROCESS ── */
    .process { background: #f8f9fb; }
    .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; margin-top: 3rem; }
    .proc-step { background: #f8f9fb; padding: 2rem 1.8rem; display: flex; flex-direction: column; gap: 1rem; }
    .proc-step:hover { background: var(--blue-pale); }
    .step-badge { width: 32px; height: 32px; border-radius: 6px; background: var(--blue-pale); border: 1px solid rgba(197,169,34,0.25); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: var(--gold-ink); }
    .proc-step h4 { font-size: 1rem; font-weight: 700; color: var(--navy); }
    .proc-step p { font-size: 0.85rem; color: var(--gray); line-height: 1.6; }

    /* ── FAQ ── */
    .faq { background: var(--gray-light); }
    .faq-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
    .faq-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
    .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; align-items: start; }
    .faq-item.is-hidden { display: none; }
    .faq-item { background: var(--white); border: 1px solid var(--border); border-radius: 4px; padding: 1.5rem; cursor: pointer; transition: border-color 0.3s, box-shadow 0.3s; }
    .faq-item:hover { border-color: var(--blue-light); box-shadow: 0 4px 16px rgba(197,169,34,0.08); }
    .faq-q { display: flex; justify-content: space-between; align-items: center; font-size: 0.95rem; font-weight: 600; color: var(--navy); gap: 1rem; }
    .faq-q span { color: var(--blue); font-size: 1.2rem; flex-shrink: 0; font-weight: 700; }
    .faq-a { margin-top: 0.8rem; font-size: 0.875rem; color: var(--gray); line-height: 1.65; display: none; }

    /* ── CONTACT ── */
    .contact { background: #f8f9fb; }
    .contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 5rem; align-items: start; }
    .contact-info h3 { font-size: 1.5rem; font-weight: 800; color: var(--navy); margin-bottom: 2rem; }
    .cd { display: flex; gap: 1rem; align-items: flex-start; padding: 1.2rem 0; border-bottom: 1px solid var(--border); }
    .cd:first-of-type { border-top: 1px solid var(--border); }
    .cd-icon { width: 36px; height: 36px; border-radius: 6px; background: var(--blue-pale); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
    .cd-lbl { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); margin-bottom: 0.2rem; }
    .cd-val { font-size: 0.95rem; font-weight: 600; color: var(--navy); }
    .cd-sub { font-size: 0.82rem; color: var(--gray); margin-top: 0.2rem; line-height: 1.5; }
    .contact-form { background: var(--gray-light); border: 1px solid var(--border); border-radius: 4px; padding: 2.5rem; }
    .contact-form h3 { font-size: 1.3rem; font-weight: 800; color: var(--navy); margin-bottom: 2rem; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .form-group { margin-bottom: 1rem; }
    .form-group label { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); margin-bottom: 0.5rem; }
    .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.75rem 1rem; background: var(--white); border: 1.5px solid var(--border); border-radius: 6px; color: var(--navy); font-family: 'Barlow', sans-serif; font-size: 0.9rem; outline: none; transition: border-color 0.2s; }
    .form-group input::placeholder, .form-group textarea::placeholder { color: #cbd5e1; }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--blue-light); box-shadow: 0 0 0 3px rgba(197,169,34,0.1); }
    .form-group textarea { height: 110px; resize: vertical; }
    .form-check { display: flex; gap: 0.7rem; align-items: flex-start; margin: 1.2rem 0; }
    .form-check input { accent-color: var(--blue); margin-top: 3px; flex-shrink: 0; }
    .form-check label { font-size: 0.8rem; color: var(--gray); line-height: 1.5; }
    .form-submit { width: 100%; padding: 0.9rem; background: var(--blue); color: #0a0f1e; border: none; border-radius: 6px; cursor: pointer; font-family: 'Barlow', sans-serif; font-size: 0.95rem; font-weight: 700; transition: background 0.2s; }
    .form-submit:hover { background: #0a0f1e; color: #fff; box-shadow: 0 4px 14px rgba(197,169,34,0.35); }

    /* ── FOOTER ── */
    footer { background: var(--navy); border-top: 1px solid rgba(255,255,255,0.06); padding: 3rem; }
    .footer-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; }
    .footer-logo img { height: 40px;  opacity: 0.85; }
    .footer-links { display: flex; gap: 2rem; flex-wrap: wrap; }
    .footer-links a { font-size: 0.82rem; color: rgba(255,255,255,0.45); transition: color 0.2s; }
    .footer-links a:hover { color: var(--blue-light); }
    .footer-copy { font-size: 0.78rem; color: rgba(255,255,255,0.3); }

    /* ── RESPONSIVE ── */
    /* ── TABLET (960px) ── */
    @media (max-width: 960px) {
      .nav-phone { display: none; }
      /* Mobiler Hero: Vollbild-Foto, Text auf dem Bild */
      .hero2 { margin-top: 60px; min-height: 0; max-height: none; height: calc(100vh - 60px - 4.6rem); max-height: 700px; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 1.25rem 1.3rem; background: #0a0f1e; }
      .hero2-bg { position: absolute; inset: 0; }
      .hero2-bg img { object-position: 62% 40%; }
      .hero2-bg::after { display: block; background: linear-gradient(to top, rgba(10,15,30,0.94) 0%, rgba(10,15,30,0.6) 42%, rgba(10,15,30,0.05) 72%); }
      .hero2-card { position: relative; z-index: 2; order: 1; background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; max-width: none; box-shadow: none; }
      .hero2-pill { background: transparent; border: 0; padding: 0; color: var(--gold); font-size: 0.66rem; margin-bottom: 0.7rem; }
      .hero2-card h1 { color: #fff; font-size: clamp(2.3rem, 11vw, 3rem); margin-bottom: 0.7rem; }
      .hero2-card h1 span { color: var(--gold); }
      .hero2-sub { color: rgba(255,255,255,0.86); font-size: 0.95rem; margin-bottom: 0.9rem; }
      .hero2-actions { display: none; }
      .hero2-card .hero2-trust { display: none; }
      .hero2-chips { position: relative; z-index: 2; order: 2; min-width: 0; width: 100%; align-self: stretch; top: auto; right: auto; left: auto; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 0 2px; margin: 0; }
      .hero2-chips::-webkit-scrollbar { display: none; }
      .hero2-chips a { flex-shrink: 0; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.32); color: #fff; border-radius: 999px; font-size: 0.78rem; padding: 0.5rem 0.8rem; box-shadow: none; }
      .chip-desktop { display: none; } .chip-mobile { display: inline-flex; }
      .hero2-trust--mobile { display: flex; position: relative; z-index: 2; order: 3; margin-top: 0.9rem; color: #fff; font-size: 0.78rem; }
      .hero2-trust--mobile .stars { color: var(--gold); letter-spacing: 0.05em; margin-right: 0.3rem; }
      /* Direkt zu */
      .direkt-zu { display: block; background: var(--gray-light); padding: 1.2rem 1.25rem 1.4rem; }
      .direkt-zu .eyebrow { color: var(--gray); margin-bottom: 0.6rem; }
      .direkt-zu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
      .direkt-zu-grid a { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1.5px solid var(--border); border-radius: 6px; padding: 0.8rem 0.9rem; font-size: 0.85rem; font-weight: 700; color: var(--navy); }
      .direkt-zu-grid a span { color: var(--gold); }
      .hero2-mobilebar { display: flex; gap: 0.7rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 190; padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom)); background: rgba(255,255,255,0.96); backdrop-filter: blur(10px); border-top: 1px solid var(--border); }
      .hero2-mobilebar a { flex: 1; justify-content: center; }
      body { padding-bottom: 4.5rem; }
      nav { padding: 0 1.2rem; }
      .nav-center { display: none; }
      .hero { grid-template-columns: 1fr; padding: 0; gap: 0; }
      .hero-left { padding: 6rem 1.5rem 2rem 1.5rem; }
      .hero-logo-bottom { margin-top: -1rem; margin-bottom: 1.2rem; }
      .hero h1 { font-size: 2.6rem; }
      .hero-right { aspect-ratio: 16/9; margin-right: 0; border-radius: 0; }
      .hero-badge { align-self: flex-start; }
      .services-grid { grid-template-columns: 1fr 1fr; }
      .about-grid { grid-template-columns: 1fr; }
      .about-left { display: none; }
      .gallery-grid { grid-template-columns: 1fr 1fr; }
      .stats-inner { grid-template-columns: 1fr 1fr; gap: 0; }
      .stats-inner > div { padding: 1rem; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
      .testi-grid { grid-template-columns: 1fr; }
      .process-grid { grid-template-columns: 1fr 1fr; }
      .faq-grid { grid-template-columns: 1fr; }
      .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
      .form-row { grid-template-columns: 1fr; }
      section { padding: 4rem 1.5rem; }
      .strip { padding: 1.2rem 1.5rem; }
      .timeline-section { padding: 0 1rem; }
      .timeline-item { grid-template-columns: 1fr 60px 1fr; }
      .timeline-drill { display: none; }
      .timeline-line { display: none; }
      .timeline-line-revealed { display: none; }
    }

    /* ── MOBILE (600px) ── */
    @media (max-width: 600px) {
      /* NAV */
      nav { padding: 0 1rem; height: 60px; }
      .nav-logo img { height: 50px; }
      .btn-lg { padding: 0.5rem 1rem; font-size: 0.78rem; }

      /* HERO */
      .hero-left { padding: 5rem 1.2rem 2rem; }
      .hero h1 { font-size: 2rem; line-height: 1.08; }
      .hero-sub { font-size: 0.88rem; }
      .hero-actions { flex-direction: column; gap: 0.8rem; }
      .hero-actions a, .hero-actions .btn-wa { width: 100%; justify-content: center; }
      .hero-logo-bottom img { height: 70px !important; }
      /* Hero checklist */
      .hero-left ul { display: none; }
      /* Google reviews */
      .hero-left > div[style*="display:flex"][style*="align-items:center"][style*="gap:1rem"] { margin-top: 1.2rem; }
      /* 3 boxes */
      .hero-left > div[style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr !important; }

      /* STRIP */
      .strip-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
      .partner-list { gap: 1.2rem; }

      /* SERVICES */
      .services-grid { grid-template-columns: 1fr; }
      .services-head { flex-direction: column; }

      /* STATS */
      .stats-bar { padding: 2rem 1.2rem; }
      .stats-inner { grid-template-columns: 1fr 1fr; gap: 0; }
      .stats-inner > div { padding: 1rem 0.5rem; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.12); }
      .stat-num { font-size: 2rem; }

      /* BENEFITS 4-col → 1-col */
      section[style*="background:#f8f9fb"]:not(.benefits) > div > div[style*="repeat(4"] { grid-template-columns: 1fr !important; }
      section[style*="background:#f8f9fb"] > div > div[style*="repeat(3"] { grid-template-columns: 1fr !important; }

      /* PROZESS TIMELINE → simple list on mobile */
      .timeline-wrap { display: none; }
      .timeline-cta { flex-direction: column; }
      .timeline-cta a { width: 100%; justify-content: center; text-align: center; }
      /* Show simple step list instead */
      .timeline-mobile { display: flex !important; }

      /* GALLERY */
      .gallery-grid { grid-template-columns: 1fr 1fr !important; }
      .gal-item.wide { grid-column: span 2; aspect-ratio: 8/3; }

      /* TESTIMONIALS */
      .testi-grid { grid-template-columns: 1fr; }

      /* FAQ */
      .faq-grid { grid-template-columns: 1fr; }
      .faq-head { flex-direction: column; gap: 1rem; }

      /* CONTACT */
      .contact-grid { grid-template-columns: 1fr; gap: 1.5rem; }
      .form-row { grid-template-columns: 1fr; }
      .contact-form { padding: 1.5rem; }

      /* CTA BAND */
      .cta-band { padding: 3rem 1.2rem; }
      .cta-actions { flex-direction: column; align-items: center; }
      .cta-actions a { width: 100%; max-width: 320px; justify-content: center; }

      /* FOOTER */
      footer > div:first-child { grid-template-columns: 1fr !important; gap: 2rem !important; padding: 2.5rem 1.2rem !important; }
      footer > div:last-child { padding: 1rem 1.2rem; flex-direction: column; gap: 0.5rem; text-align: center; }

      /* PROZESS (flat cards) */
      .process-grid { grid-template-columns: 1fr; }
      section { padding: 3rem 1.2rem; }
    }

    /* ── SMALL MOBILE (380px) ── */
    @media (max-width: 380px) {
      .hero h1 { font-size: 1.7rem; }
      .stats-inner { grid-template-columns: 1fr; }
      .gallery-grid { grid-template-columns: 1fr !important; }
      .gal-item.wide { grid-column: span 1; aspect-ratio: 4/3; }
    }
  
/* ── Ablauf / Timeline ── */

    .timeline-section { max-width:1100px; margin:0 auto; }
    .timeline-header { text-align:center; margin-bottom:5rem; }
    .timeline-wrap { position:relative; }
    .timeline-line {
      position:absolute; left:50%; top:calc(1rem + 26px); bottom:5rem;
      width:2px; background:linear-gradient(to bottom, #C5A922, #0a0f1e);
      transform:translateX(-50%);
    }
    .timeline-item {
      display:grid; grid-template-columns:1fr 80px 1fr;
      align-items:start; margin-bottom:5rem; position:relative; z-index:20;
      opacity:0; transform:translateY(40px);
      transition:opacity 0.6s ease, transform 0.6s ease;
    }
    .timeline-item.visible { opacity:1; transform:translateY(0); }
    .timeline-item:last-child { margin-bottom:0; }
    .timeline-num {
      width:52px; height:52px;
      background:#0a0f1e; color:#fff;
      border:3px solid #C5A922;
      border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      font-family:'Barlow Condensed',sans-serif;
      font-size:1.1rem; font-weight:800;
      margin:0 auto; position:relative; z-index:2;
      flex-shrink:0;
      box-shadow:0 0 0 5px #fff;
    }
    .timeline-card {
      background:#fff;
      border:1.5px solid #e2e8f0;
      border-radius:8px;
      overflow:hidden;
      box-shadow:0 4px 24px rgba(0,0,0,0.07);
      transition:box-shadow 0.3s, transform 0.3s;
    }
    .timeline-card:hover {
      box-shadow:0 12px 40px rgba(197,169,34,0.15);
      transform:translateY(-4px);
    }
    .timeline-card-img { width:100%; height:220px; object-fit:cover; display:block; }
    .timeline-card-body { padding:1.8rem 2rem; }
    .timeline-card-bar { width:36px; height:3px; background:#C5A922; margin-bottom:1rem; }
    .timeline-card-title {
      font-family:'Barlow Condensed',sans-serif;
      font-size:1.4rem; font-weight:800;
      text-transform:uppercase; letter-spacing:0.02em;
      color:#0f172a; margin-bottom:0.8rem;
    }
    .timeline-card-text { font-size:0.95rem; color:#64748b; line-height:1.7; }
    .timeline-empty { /* spacer */ }
    /* Left items: card left, empty right */
    .timeline-item.left .timeline-card { grid-column:1; margin-right:2rem; }
    .timeline-item.left .timeline-num-wrap { grid-column:2; }
    .timeline-item.left .timeline-empty { grid-column:3; }
    /* Right items: empty left, card right */
    .timeline-item.right .timeline-empty { grid-column:1; }
    .timeline-item.right .timeline-num-wrap { grid-column:2; }
    .timeline-item.right .timeline-card { grid-column:3; margin-left:2rem; }
    .timeline-num-wrap { display:flex; align-items:flex-start; justify-content:center; padding-top:1rem; }
    .timeline-drill {
      position: absolute;
      left: 50%;
      top: -110px;
      transform: translateX(-50%);
      z-index: 10;
      pointer-events: none;
      filter: drop-shadow(0 0 10px rgba(197,169,34,0.5));
      will-change: top;
    }
    /* Revealed line grows from top */
    .timeline-line-revealed {
      position: absolute;
      left: 50%;
      top: 0;
      width: 3px;
      height: 0px;
      background: linear-gradient(to bottom, #C5A922, #0a0f1e);
      transform: translateX(-50%);
      z-index: 1;
      transition: none;
    }

    /* CTA below */
    .timeline-cta { display:flex; gap:1rem; justify-content:center; margin-top:4rem; flex-wrap:wrap; }
  
/* ── WordPress-Kompatibilität ── */
body.admin-bar nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar nav { top: 46px; } }
.wm-page { max-width: 900px; margin: 0 auto; padding: 8rem 1.5rem 5rem; line-height: 1.7; }
.wm-page h1 { font-family: 'Barlow Condensed', sans-serif; font-size: 2.6rem; margin-bottom: 1.5rem; }
.wm-page h2 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.6rem; margin: 2rem 0 0.8rem; }
.wm-page p, .wm-page ul { margin-bottom: 1rem; color: #334155; }
.wm-page a { color: var(--gold-ink); }
.form-notice { padding: 0.9rem 1.1rem; border-radius: 6px; font-size: 0.9rem; margin-bottom: 1.2rem; }
.form-notice--ok { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.form-notice--err { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* ── Team & Kataloge ── */
.team-card { display:flex; gap:1.2rem; align-items:flex-start; background:#fff; border:1.5px solid var(--border); border-left:4px solid var(--gold); border-radius:8px; padding:1.4rem 1.5rem; margin-top:2rem; }
.team-avatar { flex-shrink:0; width:64px; height:64px; border-radius:50%; background:#0a0f1e; color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.4rem; border:3px solid var(--blue); }
.team-name { font-family:'Barlow Condensed',sans-serif; font-weight:800; text-transform:uppercase; font-size:1.2rem; color:var(--navy); }
.team-role { font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold-ink); margin-bottom:0.5rem; }
.team-card p { font-size:0.9rem; color:#475569; line-height:1.6; margin:0; }
.team-card .team-quote { margin-top:0.6rem; font-style:italic; color:var(--navy); font-weight:600; }
.svc-doc { display:inline-block; margin-top:0.6rem; margin-right:1rem; font-size:0.8rem; font-weight:700; color:var(--gold); }
.svc-doc:hover { text-decoration:underline; }

/* ── Navigation: Dropdown, Burger, Mobilmenü ── */
.nav-logo { display: block; }
.nav-dd { position: relative; }
.nav-dd-toggle .arr { font-size: 0.65rem; margin-left: 0.15rem; color: rgba(255,255,255,0.6); }
.nav-dd-menu { position: absolute; top: calc(100% + 18px); left: -12px; min-width: 260px; background: #0f1628; border: 1px solid rgba(255,255,255,0.1); border-top: 3px solid var(--gold); border-radius: 6px; padding: 0.5rem; display: none; flex-direction: column; box-shadow: 0 16px 40px rgba(0,0,0,0.45); z-index: 300; }
.nav-dd-menu::before { content: ""; position: absolute; top: -22px; left: 0; right: 0; height: 22px; }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { display: flex; }
.nav-dd-menu a { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; border-radius: 4px; font-size: 0.88rem; font-weight: 600; color: rgba(255,255,255,0.92); }
.nav-dd-menu a:hover { background: rgba(255,255,255,0.06); color: var(--gold); }
.nav-burger { display: none; width: 44px; height: 44px; border: 0; background: #fff; border-radius: 6px; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; }
.nav-burger span { display: block; width: 20px; height: 2.4px; background: #0a0f1e; border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.4px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.4px) rotate(-45deg); }
.mobile-menu { position: fixed; top: 70px; left: 0; right: 0; bottom: 0; z-index: 195; background: #0a0f1e; overflow-y: auto; }
.mobile-menu-inner { padding: 1.4rem 1.4rem 2rem; display: flex; flex-direction: column; min-height: 100%; }
.mm-link { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 1.8rem; color: #fff; padding: 0.8rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.mm-group { border-bottom: 1px solid rgba(255,255,255,0.1); padding: 0.8rem 0 0.6rem; }
.mm-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 1.8rem; color: var(--gold); margin-bottom: 0.4rem; }
.mm-sub { display: flex; align-items: center; gap: 0.6rem; color: #cbd5e1; font-size: 1rem; font-weight: 600; padding: 0.55rem 0 0.55rem 0.6rem; }
.mm-actions { margin-top: auto; padding-top: 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; }
.mm-actions .hero2-btn-dark { background: #fff; color: #0a0f1e; justify-content: center; }
.mm-actions .hero2-btn-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); justify-content: center; }
.mm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.mm-note { color: rgba(255,255,255,0.5); font-size: 0.78rem; text-align: center; }
body.menu-open { overflow: hidden; }
@media (max-width: 960px) {
  .nav-burger { display: flex; }
  .nav-cta { display: none; }
  body.admin-bar .mobile-menu { top: 116px; }
}
@media (max-width: 600px) { .mobile-menu { top: 60px; } }

/* ── Leistungskarten: Links ── */
.svc-links { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.svc-link--muted { color: rgba(255,255,255,0.55); }
.svc-link--muted:hover { color: var(--gold); }

/* ── Leistungsseiten ── */
.svc-hero { position: relative; margin-top: 70px; min-height: 520px; display: flex; align-items: center; padding: 3rem; overflow: hidden; background: #0f172a; }
.svc-hero-bg { position: absolute; inset: 0; }
.svc-hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(10,15,30,0.45), rgba(10,15,30,0.05) 60%); }
.svc-hero-card { position: relative; z-index: 2; background: #fff; border-radius: 10px; border-left: 5px solid var(--gold); padding: 2rem 2.4rem 1.8rem; max-width: 680px; box-shadow: 0 20px 50px rgba(0,0,0,0.28); }
.svc-crumbs { font-size: 0.78rem; color: var(--gray); margin-bottom: 0.9rem; }
.svc-crumbs a { color: var(--gold-ink); }
.svc-hero-card h1 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 3.8vw, 3.2rem); line-height: 1.04; color: var(--navy); margin-bottom: 0.9rem; }
.svc-hero-sub { font-size: 1rem; color: #475569; line-height: 1.6; margin-bottom: 1.4rem; }
.svc-body { background: #fff; padding: 5rem 3rem; }
.svc-body-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: start; }
.svc-body h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 2.4rem; line-height: 1.05; margin: 0.6rem 0 1rem; }
.svc-intro { font-size: 1.02rem; color: #475569; line-height: 1.7; max-width: 60ch; }
.svc-extra { margin-top: 1rem; color: #475569; line-height: 1.7; }
.svc-extra p { margin-bottom: 0.8rem; }
.svc-points { background: var(--gray-light); border-radius: 10px; padding: 1.6rem; display: flex; flex-direction: column; gap: 0.8rem; }
.svc-point { display: flex; gap: 0.8rem; align-items: flex-start; font-size: 0.95rem; color: var(--navy); font-weight: 500; line-height: 1.5; }
.svc-point-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: #0a0f1e; display: flex; align-items: center; justify-content: center; }
.svc-points-cta { justify-content: center; margin-top: 0.6rem; }
.svc-body .svc-doc { color: var(--gold-ink, #8A7412); font-size: 0.9rem; }
.svc-steps { background: var(--gray-light); padding: 4.5rem 3rem; }
.svc-steps h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 2.2rem; margin: 0.5rem 0 2rem; }
.svc-steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.svc-steps-grid > div { background: #fff; border-radius: 8px; padding: 1.4rem; border-top: 4px solid var(--gold); }
.svc-step-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 2rem; color: var(--gold); line-height: 1; }
.svc-steps-grid h4 { margin: 0.5rem 0 0.4rem; font-size: 1rem; }
.svc-steps-grid p { font-size: 0.9rem; color: #475569; line-height: 1.55; }
.svc-more { background: #0a0f1e; padding: 3rem; }
.svc-more .eyebrow { color: var(--gold); margin-bottom: 1rem; }
.svc-more-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.8rem; }
.svc-more-item { display: flex; align-items: center; gap: 0.6rem; background: #111a30; border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 0.9rem 1rem; color: #fff; font-weight: 600; font-size: 0.9rem; transition: border-color 0.2s; }
.svc-more-item:hover { border-color: var(--gold); color: var(--gold); }
.svc-more-item svg { flex-shrink: 0; }
.svc-hero + .svc-body .inner, .svc-steps .inner, .svc-more .inner { max-width: 1200px; margin: 0 auto; }
@media (max-width: 960px) {
  .svc-hero { padding: 0; min-height: 0; display: block; }
  .svc-hero-bg { position: relative; aspect-ratio: 16/9; }
  .svc-hero-bg::after { display: none; }
  .svc-hero-card { margin: -2.5rem 1rem 0; padding: 1.6rem 1.3rem; max-width: none; }
  .svc-body { padding: 3rem 1.2rem; }
  .svc-body-grid { grid-template-columns: 1fr; gap: 2rem; }
  .svc-steps { padding: 3rem 1.2rem; }
  .svc-steps-grid { grid-template-columns: 1fr 1fr; }
  .svc-more { padding: 2rem 1.2rem; }
  .svc-more-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) { .svc-steps-grid, .svc-more-grid { grid-template-columns: 1fr; } }

.cat-links { margin-top: 1.4rem; }
.cat-link { display: inline-block; font-weight: 700; color: var(--gold-ink); font-size: 0.95rem; }
.cat-link:hover { color: var(--gold-ink); }
.cat-link.is-hidden { display: none; }

/* Timeline-CTA-Buttons */
.tl-btn { padding: 0.9rem 2rem; border-radius: 6px; font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; transition: background 0.2s, color 0.2s, box-shadow 0.2s; }
.tl-btn-dark { background: #0a0f1e; color: #fff; }
.tl-btn-light { background: #fff; color: #0a0f1e; border: 1.5px solid var(--border); }
.tl-btn-dark:hover, .tl-btn-light:hover { background: var(--gold); color: #0a0f1e; box-shadow: 0 4px 14px rgba(197,169,34,0.35); }
.btn-outline-white:hover { background: var(--gold); color: #0a0f1e; border-color: var(--gold); }

/* ── Mobile Navigation: Burger links, Logo mittig, Telefon rechts ── */
@media (max-width: 960px) {
  nav { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; }
  .nav-logo { grid-column: 2; justify-self: center; }
  .nav-right { grid-column: 1 / -1; display: contents; }
  .nav-burger { grid-column: 1; grid-row: 1; justify-self: start; }
  .nav-phone { display: flex; grid-column: 3; grid-row: 1; justify-self: end; width: 44px; height: 44px; margin: 0; border-radius: 6px; background: rgba(255,255,255,0.1); align-items: center; justify-content: center; font-size: 0; }
  .nav-phone svg { width: 19px; height: 19px; }
  .nav-logo img { height: 40px; }
}


/* Markenleiste als Laufband (v2.5.0) */
.strip-inner { min-width: 0; }
.partner-marquee { flex: 1; width: 100%; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.partner-track { display: flex; width: max-content; animation: wm-marquee 55s linear infinite; }
.partner-marquee:hover .partner-track { animation-play-state: paused; }
.partner-set { display: flex; align-items: center; gap: 3.5rem; padding-right: 3.5rem; flex-shrink: 0; }
.partner-set .partner-name { white-space: nowrap; }
@keyframes wm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .partner-track { animation: none; } }
@media (max-width: 768px) { .partner-set { gap: 2rem; padding-right: 2rem; } }


/* WhatsApp-Buttons (v2.5.0) */
.wa-icon { flex-shrink: 0; }
.nav-wa { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.62rem 1rem; border-radius: 6px; border: 1.5px solid rgba(255,255,255,0.35); color: #fff; font-size: 0.88rem; font-weight: 700; white-space: nowrap; transition: border-color 0.2s, color 0.2s, background 0.2s; }
.nav-wa .wa-icon { color: #25D366; }
.nav-wa:hover { border-color: var(--gold); color: var(--gold); }
@media (max-width: 1280px) { .nav-wa { padding: 0.62rem; } .nav-wa span { display: none; } }
@media (max-width: 960px) { .nav-wa { display: none; } }
.hero2-btn-wa .wa-icon, .tl-btn .wa-icon, .mm-actions .wa-icon { color: #25D366; }
.mbar-wa { flex: 0 0 52px !important; padding: 0 !important; color: #1da851 !important; border-color: #25D366 !important; }
.cd-link { text-decoration: none; color: inherit; }
.cd-link:hover .cd-val { color: var(--gold-ink); }
.nav-center a, .nav-cta { white-space: nowrap; }
@media (max-width: 1280px) and (min-width: 961px) { .nav-center { gap: 1.6rem; } }
@media (max-width: 1150px) and (min-width: 961px) {
  .nav-center { gap: 1.2rem; }
  .nav-phone { font-size: 0; gap: 0; margin-right: 0; width: 40px; height: 40px; justify-content: center; border: 1.5px solid rgba(255,255,255,0.35); border-radius: 6px; }
  .nav-phone svg { width: 17px; height: 17px; }
}


/* ===== Hero als Split-Layout mit Bildwechsel (v2.5.0) ===== */
.hero-slider .hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.1s ease, transform 6s ease-out; }
.hero-slider .hero-slide.is-active { opacity: 1; transform: scale(1); }
.hero-dots { position: absolute; left: 1.4rem; bottom: 1.2rem; z-index: 3; display: flex; gap: 0.5rem; }
.hero-dot { width: 38px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.hero-dot span { display: block; width: 100%; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.55); transition: background 0.3s; }
.hero-dot.is-active span, .hero-dot:hover span { background: var(--gold); }
@media (prefers-reduced-motion: reduce) { .hero-slider .hero-slide { transition: opacity 0.4s; transform: none !important; } }

@media (min-width: 961px) {
  /* Layout „V8": Textkarte überlappt ein gerahmtes Wechselbild */
  .hero2 {
    display: grid; grid-template-columns: 40% 60%; grid-template-rows: 100%; column-gap: 0;
    align-items: center; align-content: stretch;
    min-height: 0; max-height: none; height: clamp(520px, calc(100vh - 70px - 6.5rem), 620px);
    padding: 2.4rem max(3rem, calc((100vw - 1340px) / 2));
    background: var(--gray-light);
  }
  .hero2-bg { grid-column: 2 / 3; grid-row: 1; align-self: stretch; position: relative; inset: auto; z-index: 1; height: 100%; border-radius: 10px; overflow: hidden; box-shadow: 0 24px 60px rgba(10,15,30,0.22); background: #0a0f1e; }
  .hero2-bg::after { display: none; }
  .hero2-card { grid-column: 1 / 3; grid-row: 1; justify-self: start; align-self: center; z-index: 4; max-width: 660px; background: #fff; border-left: 5px solid var(--gold); border-radius: 10px; padding: 2.3rem 2.2rem 2rem; box-shadow: 0 24px 60px rgba(10,15,30,0.2); }
  .hero2-card h1 { font-size: clamp(2.6rem, 4.3vw, 4.3rem); }
  .hero2-chips { display: none; }
  .hero-dots { left: auto; right: 1.4rem; }
}
@media (max-width: 960px) {
  .hero-dots { display: none; }
  .hero2-bg::after { z-index: 2; }
}
@media (min-width: 961px) and (max-width: 1280px) {
  .hero2 { grid-template-columns: 34% 66%; padding-left: 2rem; padding-right: 2rem; }
  .hero2-card { max-width: 600px; padding: 2rem 1.8rem 1.8rem; }
  .hero2-btn-wa { padding-left: 0.95rem; padding-right: 0.95rem; font-size: 0; gap: 0; }
  .hero2-btn-wa .wa-icon { width: 20px; height: 20px; }
  .hero2-actions .hero2-btn-dark, .hero2-actions .hero2-btn-light:not(.hero2-btn-wa) { padding-left: 1.1rem; padding-right: 1.1rem; }
  .hero2-actions { gap: 0.6rem; }
  .hero2-trust { gap: 0.9rem; }
}

/* Ohne Kernbohrung: 7 Leistungs-Kacheln, 3 Kundenstimmen */
.testi-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .testi-grid { grid-template-columns: 1fr; } }
@media (min-width: 601px) { .service-card--wide { grid-column: span 2; } }

.gal-item.full { grid-column: 1 / -1; aspect-ratio: 16/5; }
@media (max-width: 600px) { .gal-item.full { aspect-ratio: 4/3; } }

/* Timeline: Fenster, das sich beim Scrollen öffnet (v2.5.0) – Variante B: minimale Strichzeichnung */
.timeline-window { top: 0; --open: 0; filter: none; }
.tw { position: relative; width: 60px; }
.tw-frame { position: relative; width: 60px; height: 76px; border: 2.5px solid #0a0f1e; border-radius: 4px; background: #fff;
  box-shadow: 0 0 0 6px #fff; transition: box-shadow 0.4s; }
.tw-view { position: absolute; inset: 6px; overflow: hidden; }
.tw-view::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(197,169,34,0.35), rgba(197,169,34,0.08)); opacity: var(--open); }
.tw-view::after { display: none; }
.tw-sashes { position: absolute; inset: 6px; perspective: 240px; z-index: 3; }
.tw-sash { position: absolute; top: 0; bottom: 0; width: 50%; background: #fff; border: 2px solid var(--gold); transition: transform 0.18s linear; }
.tw-sash::before { display: none; }
.tw-sash.l { left: 0; transform-origin: left center; transform: rotateY(calc(var(--open) * -150deg)); }
.tw-sash.r { right: 0; transform-origin: right center; transform: rotateY(calc(var(--open) * 150deg)); }
.tw-handle { position: absolute; top: 50%; width: 6px; height: 2px; margin-top: -1px; background: #0a0f1e; }
.tw-sash.l .tw-handle { right: 3px; } .tw-sash.r .tw-handle { left: 3px; }
.tw-sill { display: none; }
.timeline-window.is-open .tw-frame { box-shadow: 0 0 0 6px #fff, 0 0 24px 6px rgba(197,169,34,0.35); }
.timeline-num { transition: background 0.3s, color 0.3s; }
.timeline-num.reached { background: var(--gold); color: #0a0f1e; }
@media (prefers-reduced-motion: reduce) { .tw-sash { transition: none; } }
.timeline-item { position: relative; z-index: 1; }
.timeline-drill.timeline-window { z-index: 30; }

/* ===== Leistungen-Übersicht (/leistungen/) ===== */
.lp-intro { margin-top: 70px; padding: 4.5rem 1.5rem 2.5rem; background: #fff; text-align: center; }
.lp-intro .inner { max-width: 820px; margin: 0 auto; }
.lp-intro h1 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; color: var(--navy); margin-top: 0.4rem; }
.lp-rule { width: 64px; height: 3px; background: var(--gold); margin: 1.3rem auto; }
.lp-intro p { color: #475569; line-height: 1.75; font-size: 1.02rem; }
.lp-rating { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.4rem; text-align: left; }
.lp-rating .stars { color: var(--gold); letter-spacing: 0.08em; display: block; font-size: 0.95rem; }
.lp-rating small { font-weight: 700; color: var(--navy); font-size: 0.85rem; }
.lp-grid-wrap { background: var(--gray-light); padding: 3.5rem 1.5rem 4.5rem; }
.lp-grid-wrap .inner { max-width: 1200px; margin: 0 auto; }
.lp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
.lp-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(10,15,30,0.06); transition: transform 0.25s, box-shadow 0.25s; }
.lp-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(10,15,30,0.12); }
.lp-img { position: relative; height: 220px; overflow: hidden; background: #0a0f1e; }
.lp-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s; }
.lp-card:hover .lp-img img { transform: scale(1.04); }
.lp-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,15,30,0.65), rgba(10,15,30,0) 45%); }
.lp-tag { position: absolute; left: 1.1rem; bottom: 0.9rem; z-index: 2; color: #fff; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.82rem; padding-left: 0.6rem; border-left: 3px solid var(--gold); }
.lp-body { padding: 1.4rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.lp-bar { width: 32px; height: 3px; background: var(--gold); margin-bottom: 0.9rem; }
.lp-body h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 1.35rem; color: var(--navy); letter-spacing: 0.01em; margin-bottom: 0.55rem; }
.lp-body p { color: #475569; font-size: 0.93rem; line-height: 1.65; flex: 1; }
.lp-actions { display: grid; gap: 0.55rem; margin-top: 1.2rem; }
.lp-btn { display: inline-flex; justify-content: center; align-items: center; gap: 0.45rem; padding: 0.75rem 1rem; border-radius: 6px; font-weight: 700; font-size: 0.86rem; letter-spacing: 0.02em; transition: all 0.2s; }
.lp-btn-gold { background: var(--gold); color: #0a0f1e; }
.lp-btn-gold:hover { background: #0a0f1e; color: #fff; }
.lp-btn-light { background: #fff; color: var(--navy); border: 1.5px solid #cbd5e1; }
.lp-btn-light:hover { border-color: var(--gold); color: var(--gold-ink); }
.lp-btn-light .wa-icon { color: #25D366; }
.lp-cta { background: #fff; padding: 4.5rem 1.5rem; border-top: 1px solid var(--border); }
.lp-cta-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3.5rem; align-items: center; }
.lp-cta h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.08; color: var(--navy); margin: 0.4rem 0 1rem; }
.lp-cta p { color: #475569; line-height: 1.7; max-width: 560px; }
.lp-cta-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }
.lp-cta-img { border-radius: 10px; overflow: hidden; border-left: 5px solid var(--gold); box-shadow: 0 20px 50px rgba(10,15,30,0.18); }
.lp-cta-img img { width: 100%; height: 340px; object-fit: cover; display: block; }
.services-all { text-align: center; margin-top: 2.2rem; }
.services-all-btn { display: inline-flex; padding: 0.85rem 1.6rem; border-radius: 6px; background: var(--gold); color: #0a0f1e; font-weight: 700; font-size: 0.95rem; transition: all 0.2s; }
.services-all-btn:hover { background: #fff; }
.mm-label-link { display: block; color: var(--gold) !important; text-decoration: none; }
@media (max-width: 960px) {
  .lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-cta-grid { grid-template-columns: 1fr; gap: 2rem; }
  .lp-intro { margin-top: 60px; padding-top: 3rem; }
}
@media (max-width: 600px) {
  .lp-grid { grid-template-columns: 1fr; }
  .lp-img { height: 200px; }
  .lp-cta-img img { height: 240px; }
}

/* Kundenstimmen: 6 Stück, 3 pro Reihe */
.testi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.testi-card { gap: 0.9rem; }
.testi-cat { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; color: var(--gold-ink); padding-bottom: 0.7rem; border-bottom: 1px solid var(--border); }
.testi-stars { color: var(--gold); }
.testi-text { flex: 1; }
@media (max-width: 960px) { .testi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .testi-grid { grid-template-columns: 1fr; } }

.testi-muster { align-self: flex-start; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #b42318; background: #fef3f2; border: 1px dashed #f04438; border-radius: 4px; padding: 0.2rem 0.5rem; }

/* Startseite: Leistungs-Kacheln mit Bild auf dunklem Grund */
.services .lp-grid { margin-top: 0.5rem; }
.services .lp-card { border-color: rgba(255,255,255,0.08); box-shadow: 0 14px 34px rgba(0,0,0,0.25); }
.services-all { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.services-all span { color: #94a3b8; font-size: 0.88rem; }

/* ===== Mega-Menü „Leistungen" ===== */
.nav-dd { position: static; }
.nav-mega { position: absolute; top: 100%; left: 0; right: 0; min-width: 0; border-radius: 0; border: 0; border-top: 1px solid rgba(10,15,30,0.08); background: #fff; box-shadow: 0 24px 40px rgba(10,15,30,0.18);
  padding: 2.2rem max(3rem, calc((100vw - 1340px) / 2)) 2rem; display: none; grid-template-columns: 1fr 340px; grid-template-rows: auto auto; gap: 1.6rem 3rem; }
.nav-dd:hover .nav-mega, .nav-dd:focus-within .nav-mega { display: grid; }
.nav-mega::before { top: -18px; height: 18px; }
.mega-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.mega-h { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.05rem; color: var(--navy); padding-bottom: 0.6rem; margin-bottom: 0.5rem; border-bottom: 2px solid var(--gold); }
.nav-mega .mega-col a { display: block; padding: 0.42rem 0; font-size: 0.93rem; font-weight: 500; color: #334155; border-radius: 0; background: none; }
.nav-mega .mega-col a:hover { color: var(--gold-ink); background: none; }
.mega-pop { border-left: 1px solid var(--border); padding-left: 2.2rem; display: flex; flex-direction: column; gap: 0.9rem; }
.mega-pop-h { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 0.2rem; }
.nav-mega .mega-pop-item { display: flex; align-items: center; gap: 1rem; padding: 0; background: none; color: var(--navy); }
.mega-pop-item img { width: 92px; height: 70px; object-fit: cover; border-radius: 6px; flex-shrink: 0; transition: transform 0.3s; }
.mega-pop-item span { display: flex; flex-direction: column; gap: 0.2rem; }
.mega-pop-item strong { font-size: 0.98rem; font-weight: 700; color: var(--navy); }
.mega-pop-item em { font-style: normal; font-size: 0.85rem; font-weight: 600; color: var(--gold-ink); }
.nav-mega .mega-pop-item:hover { background: none; }
.mega-pop-item:hover img { transform: scale(1.04); }
.nav-mega .mega-all { grid-column: 1 / -1; justify-self: start; padding: 0.7rem 1.2rem; border-radius: 6px; background: var(--navy); color: #fff; font-weight: 700; font-size: 0.88rem; }
.nav-mega .mega-all:hover { background: var(--gold); color: var(--navy); }
@media (max-width: 1150px) { .nav-mega { grid-template-columns: 1fr; } .mega-pop { border-left: 0; padding-left: 0; flex-direction: row; flex-wrap: wrap; } .mega-pop-h { width: 100%; } }
.mm-sublabel { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin: 0.9rem 0 0.2rem; }
.lp-card { scroll-margin-top: 90px; }

/* ===== Förderung (/foerderung/) ===== */
.fd-hero { margin-top: 70px; padding: 4.5rem 1.5rem 4rem; background: linear-gradient(135deg, #0a0f1e 0%, #141d33 100%); color: #fff; border-bottom: 4px solid var(--gold); }
.fd-hero-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 3.5rem; align-items: center; }
.fd-hero .eyebrow { color: var(--gold); }
.fd-hero h1 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(2.3rem, 4.5vw, 3.8rem); line-height: 1.02; margin: 0.5rem 0 1.2rem; }
.fd-hero h1 span { color: var(--gold); }
.fd-hero p { color: rgba(255,255,255,0.82); line-height: 1.75; font-size: 1.05rem; max-width: 600px; }
.fd-hero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.8rem; }
.fd-hero .hero2-btn-dark { background: var(--gold); color: #0a0f1e; }
.fd-hero .hero2-btn-dark:hover { background: #fff; }
.fd-hero .hero2-btn-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); }
.fd-stamp { margin-top: 1.4rem; font-size: 0.78rem; color: rgba(255,255,255,0.5); }
.fd-hero-facts { display: grid; gap: 1rem; }
.fd-fact { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-left: 4px solid var(--gold); border-radius: 8px; padding: 1.1rem 1.3rem; display: flex; align-items: center; gap: 1.1rem; }
.fd-fact b { font-family: 'Barlow Condensed', sans-serif; font-size: 2.2rem; font-weight: 800; color: var(--gold); min-width: 112px; line-height: 1; }
.fd-fact span { font-size: 0.9rem; color: rgba(255,255,255,0.82); line-height: 1.45; }
.fd-head { text-align: center; margin-bottom: 2.6rem; }
.fd-head h2, .fd-example h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(1.8rem, 3.2vw, 2.6rem); color: var(--navy); line-height: 1.08; margin-top: 0.4rem; }
.fd-ways, .fd-example { background: var(--gray-light); padding: 4.5rem 1.5rem; }
.fd-measures { background: #fff; padding: 4.5rem 1.5rem; }
.fd-ways .inner, .fd-measures .inner { max-width: 1200px; margin: 0 auto; }
.fd-ways-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
.fd-way { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 1.8rem 1.6rem; box-shadow: 0 10px 30px rgba(10,15,30,0.06); }
.fd-way--hl { border-top: 4px solid var(--gold); }
.fd-way-tag { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-ink); background: var(--blue-pale); border: 1px solid rgba(197,169,34,0.3); border-radius: 999px; padding: 0.3rem 0.8rem; }
.fd-way h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 1.3rem; color: var(--navy); margin: 0.9rem 0 0.6rem; line-height: 1.15; }
.fd-big { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 2.6rem; color: var(--navy); line-height: 1; margin-bottom: 1rem; }
.fd-big small { display: block; font-family: 'Barlow', sans-serif; font-size: 0.82rem; font-weight: 600; color: var(--gold-ink); margin-top: 0.3rem; }
.fd-way ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.fd-way li { position: relative; padding-left: 1.3rem; font-size: 0.92rem; color: #475569; line-height: 1.55; }
.fd-way li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
.fd-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.fd-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.fd-table th { background: var(--navy); color: #fff; text-align: left; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.9rem 1rem; }
.fd-table td { padding: 0.95rem 1rem; border-top: 1px solid var(--border); font-size: 0.93rem; color: #334155; vertical-align: top; }
.fd-table td:nth-child(3), .fd-table td:nth-child(4), .fd-table th:nth-child(3), .fd-table th:nth-child(4) { text-align: center; width: 80px; }
.fd-table td:nth-child(3), .fd-table td:nth-child(4) { color: var(--gold-ink); font-weight: 700; }
.fd-table tbody tr:nth-child(even) td { background: #fafbfc; }
.fd-note { font-size: 0.84rem; color: var(--gray); line-height: 1.6; margin-top: 1rem; }
.fd-example-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.fd-calc { background: #fff; border-radius: 10px; border-left: 5px solid var(--gold); padding: 2rem; box-shadow: 0 14px 40px rgba(10,15,30,0.08); }
.fd-calc h2 { margin-bottom: 1.2rem; }
.fd-calc-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--border); font-size: 0.98rem; color: #334155; }
.fd-calc-row b { font-family: 'Barlow Condensed', sans-serif; font-size: 1.4rem; color: var(--navy); white-space: nowrap; }
.fd-calc-sub { font-size: 0.85rem; color: var(--gray); } .fd-calc-sub b { font-size: 1.05rem; color: var(--gold-ink); }
.fd-steps { list-style: none; counter-reset: s; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 1rem; }
.fd-steps li { counter-increment: s; position: relative; padding: 0 0 0 3.2rem; min-height: 2.4rem; }
.fd-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--navy); color: #fff; border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; }
.fd-steps b { display: block; color: var(--navy); font-size: 1rem; margin-bottom: 0.15rem; }
.fd-steps span { color: #475569; font-size: 0.92rem; line-height: 1.55; }
.fd-disclaimer { margin-top: 2rem; font-size: 0.8rem; color: var(--gray); line-height: 1.6; border-top: 1px solid var(--border); padding-top: 1rem; }
@media (max-width: 960px) {
  .fd-hero { margin-top: 60px; padding-top: 3rem; }
  .fd-hero-grid, .fd-example-grid { grid-template-columns: 1fr; gap: 2rem; }
  .fd-ways-grid { grid-template-columns: 1fr; }
}
@media (min-width: 961px) and (max-width: 1250px) { .nav-center { gap: 1.3rem; } }

/* ===== Anfrageformular in 2 Schritten ===== */
.contact2 { background: var(--gray-light); padding: 5rem 1.5rem; }
.contact2 .inner { max-width: 1120px; margin: 0 auto; }
.cf-head { text-align: center; max-width: 820px; margin: 0 auto 2.4rem; }
.cf-head h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.08; color: var(--navy); margin-top: 0.4rem; }
.cf-head p { color: #475569; line-height: 1.7; }
.cf { background: #0a0f1e; border-radius: 12px; padding: 2.2rem 2.4rem 2rem; box-shadow: 0 24px 60px rgba(10,15,30,0.22); color: #fff; }
.cf-progress { position: relative; margin-bottom: 1.8rem; }
.cf-progress::before { content: ""; display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.12); }
.cf-progress-bar { position: absolute; left: 0; top: 0; height: 4px; width: 50%; border-radius: 2px; background: var(--gold); transition: width 0.4s; }
.cf-progress-lbl { display: flex; justify-content: space-between; margin-top: 0.7rem; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.cf-progress-lbl b { color: rgba(255,255,255,0.4); font-weight: 700; }
.cf-progress-lbl b.is-active { color: var(--gold); }
.cf--js .cf-step { display: none; }
.cf--js .cf-step.is-active { display: block; animation: cfIn 0.35s ease; }
@keyframes cfIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cf-label { display: block; font-weight: 700; font-size: 0.95rem; margin: 1.3rem 0 0.4rem; color: #fff; }
.cf-step > .cf-label:first-child { margin-top: 0; }
.cf-hint { font-size: 0.8rem; color: rgba(255,255,255,0.5); margin-bottom: 0.9rem; }
.cf-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.8rem; }
.cf-tile { position: relative; display: flex; flex-direction: column; background: #161e33; border: 1.5px solid rgba(255,255,255,0.1); border-radius: 8px; overflow: hidden; cursor: pointer; transition: border-color 0.2s, transform 0.2s; }
.cf-tile:hover { border-color: rgba(197,169,34,0.6); transform: translateY(-2px); }
.cf-tile input { position: absolute; opacity: 0; pointer-events: none; }
.cf-tile-img { position: relative; display: block; height: 82px; overflow: hidden; }
.cf-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-tile-img i { position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; background: var(--gold); color: #0a0f1e; font-style: normal; font-weight: 800; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.6); transition: all 0.2s; }
.cf-tile-t { padding: 0.6rem 0.65rem 0.7rem; font-size: 0.82rem; font-weight: 600; line-height: 1.3; color: rgba(255,255,255,0.9); }
.cf-tile input:checked ~ .cf-tile-img i { opacity: 1; transform: scale(1); }
.cf-tile:has(input:checked) { border-color: var(--gold); background: #1d2540; }
.cf-tile input:checked ~ .cf-tile-t { color: var(--gold); font-weight: 700; }
.cf-tile input:focus-visible ~ .cf-tile-t { outline: 2px solid var(--gold); }
.cf-count { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0.6rem; }
.cf-count label { cursor: pointer; }
.cf-count input { position: absolute; opacity: 0; }
.cf-count span { display: flex; align-items: center; justify-content: center; height: 46px; border-radius: 6px; background: #161e33; border: 1.5px solid rgba(255,255,255,0.1); font-weight: 600; transition: all 0.2s; }
.cf-count label:hover span { border-color: rgba(197,169,34,0.6); }
.cf-count input:checked + span { border-color: var(--gold); color: var(--gold); background: #1d2540; }
.cf-row { display: grid; grid-template-columns: 1fr 300px; gap: 1.2rem; align-items: end; }
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
.cf input[type="text"], .cf input[type="email"], .cf input[type="tel"], .cf textarea { width: 100%; background: #161e33; border: 1.5px solid rgba(255,255,255,0.12); border-radius: 6px; padding: 0.85rem 1rem; color: #fff; font-family: inherit; font-size: 0.95rem; }
.cf input::placeholder, .cf textarea::placeholder { color: rgba(255,255,255,0.4); }
.cf input:focus, .cf textarea:focus { outline: none; border-color: var(--gold); }
.cf textarea { min-height: 110px; resize: vertical; }
.cf-check { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; color: rgba(255,255,255,0.85); cursor: pointer; line-height: 1.5; }
.cf-check input { accent-color: var(--gold); width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }
.cf-field--check .cf-check { background: #161e33; border: 1.5px solid rgba(255,255,255,0.12); border-radius: 6px; padding: 0.8rem 1rem; }
.cf-ds { margin-top: 1.2rem; font-size: 0.82rem; }
.cf-ds a { color: var(--gold); text-decoration: underline; }
.cf-summary { background: rgba(197,169,34,0.1); border: 1px solid rgba(197,169,34,0.35); border-radius: 6px; padding: 0.8rem 1rem; font-size: 0.88rem; color: rgba(255,255,255,0.85); margin-bottom: 0.4rem; }
.cf-summary b { color: var(--gold); }
.cf-error { display: none; margin-top: 1rem; color: #fca5a5; font-size: 0.85rem; }
.cf-error.is-on { display: block; }
.cf-nav { display: flex; justify-content: center; gap: 0.8rem; margin-top: 1.6rem; }
.cf-btn { border: 0; cursor: pointer; background: var(--gold); color: #0a0f1e; font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 0.95rem; padding: 0.9rem 2.2rem; border-radius: 6px; transition: all 0.2s; }
.cf-btn:hover { background: #fff; }
.cf-btn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.3); }
.cf-btn--ghost:hover { background: transparent; border-color: var(--gold); color: var(--gold); }
.cf .form-notice { margin-bottom: 1.2rem; }
.cf-contacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.8rem; }
.cf-contact { display: flex; align-items: center; gap: 0.8rem; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 0.9rem 1rem; color: var(--navy); font-weight: 600; font-size: 0.88rem; transition: border-color 0.2s; }
a.cf-contact:hover { border-color: var(--gold); }
.cf-contact small { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); }
.cf-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: var(--navy); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.cf-ic--wa { background: rgba(37,211,102,0.12); color: #1da851; }
@media (max-width: 1000px) { .cf-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cf-contacts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  .contact2 { padding: 3.5rem 1rem; }
  .cf { padding: 1.5rem 1.1rem; }
  .cf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-count { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cf-row, .cf-grid { grid-template-columns: 1fr; }
  .cf-contacts { grid-template-columns: 1fr; }
  .cf-nav { flex-direction: column-reverse; } .cf-btn { width: 100%; }
}
.cf-tile-t { hyphens: manual; }
@media (max-width: 700px) { .cf-tile-img { height: 64px; } .cf-tile-t { font-size: 0.78rem; } }

/* Markenleiste mit Logos (v2.7.1) */
.strip { padding-top: 1.3rem; padding-bottom: 1.3rem; }
.partner-set { gap: 4rem; padding-right: 4rem; }
.partner-logo { display: inline-flex; align-items: center; height: 56px; }
.partner-logo img { display: block; width: auto; filter: grayscale(1); opacity: 0.75; transition: filter 0.3s, opacity 0.3s; }
.partner-logo:hover img { filter: none; opacity: 1; }
.partner-logo--drutex img  { height: 50px; }
.partner-logo--warema img  { height: 40px; }
.partner-logo--leiner img  { height: 26px; }
.partner-logo--arimeo img  { height: 34px; }
.partner-logo--teranda img { height: 52px; }
@media (max-width: 768px) {
  .partner-set { gap: 2.4rem; padding-right: 2.4rem; }
  .partner-logo { height: 44px; }
  .partner-logo img { transform: scale(0.8); transform-origin: center; }
}

/* ===== WAREMA Cashback-Aktion (bis 31.12.2026) ===== */
.cashback { background: #0a0f1e; padding: 4.5rem 1.5rem; color: #fff; border-top: 4px solid var(--gold); }
.cashback-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: center; }
.cashback-img { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.4); }
.cashback-img img { width: 100%; height: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: 30% center; display: block; }
.cashback-badge { position: absolute; right: 1.2rem; top: 1.2rem; width: 118px; height: 118px; border-radius: 50%; background: var(--gold); color: #0a0f1e; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,0.35); line-height: 1.05; }
.cashback-badge b { font-family: 'Barlow Condensed', sans-serif; font-size: 2.2rem; font-weight: 800; }
.cashback-badge small { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.cashback-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(197,169,34,0.5); background: rgba(197,169,34,0.1); border-radius: 999px; padding: 0.35rem 0.9rem; }
.cashback h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.02; margin: 0.9rem 0 1rem; color: #fff; }
.cashback h2 span { color: var(--gold); }
.cashback-body > p { color: rgba(255,255,255,0.8); line-height: 1.7; }
.cashback-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin: 1.4rem 0 1.2rem; }
.cashback-tier { display: flex; align-items: center; gap: 0.9rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-left: 4px solid var(--gold); border-radius: 8px; padding: 0.9rem 1rem; }
.cashback-tier b { font-family: 'Barlow Condensed', sans-serif; font-size: 1.9rem; font-weight: 800; color: var(--gold); white-space: nowrap; }
.cashback-tier span { font-size: 0.9rem; font-weight: 600; line-height: 1.35; }
.cashback-tier small { font-weight: 400; color: rgba(255,255,255,0.6); }
.cashback-steps { margin: 0 0 1.5rem; padding-left: 1.2rem; color: rgba(255,255,255,0.85); font-size: 0.93rem; line-height: 1.8; }
.cashback-steps strong { color: #fff; }
.cashback-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.cashback .hero2-btn-dark { background: var(--gold); color: #0a0f1e; }
.cashback .hero2-btn-dark:hover { background: #fff; }
.cashback .hero2-btn-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); }
.cashback-note { margin-top: 1.1rem; font-size: 0.75rem; color: rgba(255,255,255,0.45); }
.cashback-note a { color: rgba(255,255,255,0.7); text-decoration: underline; }
@media (max-width: 960px) {
  .cashback { padding: 3.5rem 1.1rem; }
  .cashback-grid { grid-template-columns: 1fr; gap: 2rem; }
  .cashback-badge { width: 92px; height: 92px; } .cashback-badge b { font-size: 1.7rem; }
}
@media (max-width: 520px) { .cashback-tiers { grid-template-columns: 1fr; } }

/* ===== Fensterfalzlüfter ===== */
.svc-imgs { background: #fff; padding: 0 1.5rem 4rem; }
.svc-imgs-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.svc-imgs figure { margin: 0; background: var(--gray-light); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.svc-imgs img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: #fff; }
.svc-imgs figcaption { padding: 0.8rem 1rem; font-size: 0.88rem; color: #475569; line-height: 1.5; border-top: 3px solid var(--gold); }
.svc-imgs-src { max-width: 1200px; margin: 0.7rem auto 0; font-size: 0.72rem; color: var(--gray); }
.fl-promo { background: var(--gray-light); padding: 4.5rem 1.5rem; }
.fl-promo-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3rem; align-items: center; }
.fl-promo-img { border-radius: 10px; overflow: hidden; border-left: 5px solid var(--gold); box-shadow: 0 20px 50px rgba(10,15,30,0.15); }
.fl-promo-img img { width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover; }
.fl-promo h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.08; color: var(--navy); margin: 0.4rem 0 1rem; }
.fl-promo p { color: #475569; line-height: 1.75; }
.fl-promo-list { list-style: none; padding: 0; margin: 1.2rem 0 1.6rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.fl-promo-list li { background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 6px; padding: 0.45rem 0.8rem; font-size: 0.86rem; font-weight: 700; color: var(--navy); }
@media (max-width: 960px) { .svc-imgs-grid, .fl-promo-grid { grid-template-columns: 1fr; } .fl-promo-grid { gap: 2rem; } }

.about-left img { object-position: center 55%; }

/* ===== Formular v2.6: Seitenspalte, Chips, Kontaktseite ===== */
.contact2 .inner { max-width: 1240px; }
.cf-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 2.2rem; align-items: start; }
.cf-aside { position: sticky; top: 96px; }
.cf-aside h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 1.7rem; line-height: 1.05; color: var(--navy); margin: 0.4rem 0 0.8rem; }
.cf-aside > p { color: #475569; line-height: 1.65; font-size: 0.95rem; }
.cf-trust { list-style: none; padding: 0; margin: 1.2rem 0 1.4rem; display: grid; gap: 0.55rem; }
.cf-trust li { position: relative; padding-left: 1.6rem; font-size: 0.92rem; font-weight: 600; color: var(--navy); line-height: 1.45; }
.cf-trust li::before { content: "✓"; position: absolute; left: 0; top: -1px; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--gold); color: #0a0f1e; font-size: 0.7rem; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.cf-direct { border-top: 1px solid var(--border); padding-top: 1.1rem; display: grid; gap: 0.45rem; }
.cf-direct span { font-size: 0.85rem; font-weight: 700; color: var(--navy); }
.cf-direct-tel { font-family: 'Barlow Condensed', sans-serif; font-size: 1.7rem; font-weight: 800; color: var(--navy); }
.cf-direct-wa, .cf-direct-cb { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.92rem; font-weight: 700; color: var(--gold-ink); }
.cf-direct-wa .wa-icon { color: #25D366; }
.cf-direct small { color: var(--gray); font-size: 0.8rem; }
.cf-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cf-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.cf-chips label { cursor: pointer; }
.cf-chips input { position: absolute; opacity: 0; pointer-events: none; }
.cf-chips span { display: inline-flex; align-items: center; padding: 0.6rem 1rem; border-radius: 999px; background: #161e33; border: 1.5px solid rgba(255,255,255,0.12); font-size: 0.88rem; font-weight: 600; color: rgba(255,255,255,0.9); transition: all 0.2s; }
.cf-chips label:hover span { border-color: rgba(197,169,34,0.6); }
.cf-chips input:checked + span { border-color: var(--gold); color: var(--gold); background: #1d2540; }
.cf-chips input:focus-visible + span { outline: 2px solid var(--gold); }
.cf-row3 { display: grid; grid-template-columns: 170px 1fr 240px; gap: 1rem; align-items: end; }
.cf-label small { font-weight: 400; color: rgba(255,255,255,0.5); }
.cf-privacy { text-align: center; font-size: 0.78rem; color: rgba(255,255,255,0.5); margin: 0.9rem 0 0; }
.cf-contacts { display: none; }
@media (max-width: 1100px) { .cf-layout { grid-template-columns: 1fr; } .cf-aside { position: static; } }
@media (max-width: 700px) { .cf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf-row3 { grid-template-columns: 1fr 1fr; } .cf-row3 .cf-field--check { grid-column: 1 / -1; } }

/* Kontaktseite */
.kt-hero { margin-top: 70px; background: #0a0f1e; color: #fff; padding: 3rem 1.5rem 3.2rem; border-bottom: 4px solid var(--gold); }
.kt-hero .inner, .kt-main .inner, .kt-faq .inner { max-width: 1200px; margin: 0 auto; }
.kt-hero .svc-crumbs a { color: var(--gold); } .kt-hero .svc-crumbs { color: rgba(255,255,255,0.7); }
.kt-hero h1 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(2.4rem, 5vw, 3.8rem); margin-top: 0.6rem; }
.kt-hero h1 span { color: var(--gold); }
.kt-main { background: var(--gray-light); padding: 4rem 1.5rem; }
.kt-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 3rem; align-items: start; }
.kt-h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(1.8rem, 3vw, 2.5rem); color: var(--navy); margin: 0.4rem 0 0.8rem; line-height: 1.05; }
.kt-lead { color: #475569; line-height: 1.7; margin-bottom: 1.4rem; }
.kt-cards { display: grid; gap: 0.8rem; }
.kt-card { display: flex; align-items: center; gap: 0.9rem; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.1rem; color: var(--navy); font-weight: 700; font-size: 0.98rem; transition: border-color 0.2s; }
a.kt-card:hover { border-color: var(--gold); }
.kt-card small { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); }
.cb-form { background: #fff; border-radius: 12px; border-top: 4px solid var(--gold); padding: 2rem 2rem 1.6rem; box-shadow: 0 18px 50px rgba(10,15,30,0.1); }
.cb-form h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 1.9rem; color: var(--navy); }
.cb-form > p { color: #475569; margin: 0.3rem 0 1.2rem; }
.cb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cb-field { margin-bottom: 1rem; }
.cb-field label, .cb-label { display: block; font-weight: 700; font-size: 0.9rem; color: var(--navy); margin-bottom: 0.4rem; }
.cb-field small { font-weight: 400; color: var(--gray); }
.cb-field input, .cb-field textarea { width: 100%; border: 1.5px solid var(--border); background: var(--gray-light); border-radius: 6px; padding: 0.8rem 0.9rem; font-family: inherit; font-size: 0.95rem; }
.cb-field input:focus, .cb-field textarea:focus { outline: none; border-color: var(--gold); background: #fff; }
.cb-field textarea { min-height: 90px; resize: vertical; }
.cf-chips--light { margin-bottom: 1rem; }
.cf-chips--light span { background: var(--gray-light); border-color: var(--border); color: var(--navy); }
.cf-chips--light input:checked + span { background: var(--blue-pale); border-color: var(--gold); color: var(--gold-ink); }
.cb-ds { display: flex; gap: 0.6rem; font-size: 0.82rem; color: #475569; line-height: 1.5; cursor: pointer; }
.cb-ds input { accent-color: var(--gold); width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }
.cb-ds a { color: var(--gold-ink); text-decoration: underline; }
.cb-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.2rem; flex-wrap: wrap; }
.cb-foot small { color: var(--gray); font-size: 0.8rem; }
.cb-form .form-notice { margin-bottom: 1rem; }
.kt-offer { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; background: #0a0f1e; color: #fff; border-radius: 10px; padding: 1.1rem 1.3rem; transition: transform 0.2s; }
.kt-offer:hover { transform: translateY(-2px); }
.kt-offer .cf-ic { background: var(--gold); color: #0a0f1e; }
.kt-offer b { display: block; font-size: 1.02rem; } .kt-offer small { color: rgba(255,255,255,0.7); font-size: 0.85rem; }
.kt-offer i { margin-left: auto; font-style: normal; color: var(--gold); font-size: 1.3rem; }
.kt-faq { background: #fff; padding: 4rem 1.5rem; }
.kt-faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 3rem; align-items: start; }
.kt-faq-list { grid-template-columns: 1fr !important; }
@media (max-width: 960px) {
  .kt-hero { margin-top: 60px; }
  .kt-grid, .kt-faq-grid { grid-template-columns: 1fr; gap: 2rem; }
  .cb-grid { grid-template-columns: 1fr; }
}

/* v2.7.1: kompaktere Kontaktkarten */
.kt-cards { gap: 0.55rem; }
.kt-card { padding: 0.65rem 0.9rem; gap: 0.75rem; font-size: 0.92rem; border-radius: 8px; }
.kt-card .cf-ic { width: 34px; height: 34px; min-width: 34px; font-size: 0.9rem; }
.kt-card small { font-size: 0.64rem; }
.kt-cards--sm .kt-card { font-size: 0.86rem; padding: 0.55rem 0.8rem; }
.kt-cards--sm .kt-card .cf-ic { width: 30px; height: 30px; min-width: 30px; font-size: 0.8rem; }
.cf-direct-h { border-top: 1px solid var(--border); padding-top: 1.1rem; margin-bottom: 0.7rem; font-size: 0.85rem; font-weight: 700; color: var(--navy); }
.kt-offer { margin-top: 0.9rem; }

/* v2.7.2: Kontaktformular Rückruf / E-Mail */
.cb-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; background: var(--gray-light); border: 1px solid var(--border); border-radius: 10px; padding: 0.3rem; margin-bottom: 1.3rem; }
.cb-switch label { cursor: pointer; }
.cb-switch input { position: absolute; opacity: 0; pointer-events: none; }
.cb-switch span { display: block; text-align: center; padding: 0.7rem 0.6rem; border-radius: 7px; font-weight: 700; font-size: 0.92rem; color: #475569; transition: all 0.2s; }
.cb-switch input:checked + span { background: #0a0f1e; color: #fff; box-shadow: 0 4px 12px rgba(10,15,30,0.18); }
.cb-switch input:focus-visible + span { outline: 2px solid var(--gold); }
.cb-form [data-cb-text="mail"] { display: none; }
.cb--js[data-mode="mail"] [data-cb="rueckruf"], .cb--js[data-mode="mail"] [data-cb-text="rueckruf"] { display: none; }
.cb--js[data-mode="mail"] [data-cb-text="mail"] { display: inline; }
.cb--js[data-mode="mail"] p[data-cb-text="mail"] { display: block; }
.cb--js[data-mode="rueckruf"] [data-cb="mail"] { display: none; }
.cb-error { display: none; color: #b91c1c; font-size: 0.85rem; font-weight: 600; margin-top: 0.8rem; }
.cb-error.is-on { display: block; }

/* v2.8: eigene Unterseiten */
.kt-hero-lead { max-width: 680px; color: rgba(255,255,255,0.78); line-height: 1.7; margin-top: 0.8rem; font-size: 1.02rem; }

/* v2.9: Ratgeber */
.rg-jump { display: flex; gap: 0.8rem; margin-top: 1.4rem; flex-wrap: wrap; }
.rg-jump a { border: 1.5px solid rgba(255,255,255,0.25); color: #fff; padding: 0.55rem 1rem; border-radius: 999px; font-weight: 700; font-size: 0.88rem; }
.rg-jump a:hover { border-color: var(--gold); color: var(--gold); }
.rg-list { background: var(--gray-light); padding: 4rem 1.5rem; }
.rg-list .inner { max-width: 1200px; margin: 0 auto; }
.rg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; margin-top: 1.6rem; }
.rg-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; color: var(--navy); transition: transform 0.2s, box-shadow 0.2s; }
.rg-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(10,15,30,0.1); }
.rg-card-img { aspect-ratio: 16 / 9; overflow: hidden; background: #e2e8f0; }
.rg-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rg-card-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; }
.rg-card-body small { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); }
.rg-card-body b { font-family: 'Barlow Condensed', sans-serif; font-size: 1.35rem; font-weight: 800; text-transform: uppercase; line-height: 1.1; }
.rg-card-body > span { font-size: 0.9rem; color: #475569; line-height: 1.55; }
.rg-card-body em { font-style: normal; font-weight: 700; font-size: 0.88rem; color: var(--gold-ink); margin-top: auto; padding-top: 0.4rem; }
.rg-meta { margin-top: 1rem; font-size: 0.82rem; color: rgba(255,255,255,0.6); }
.rg-hero .svc-crumbs a { color: var(--gold); }
.rg-article { background: #fff; padding: 3.5rem 1.5rem 4rem; }
.rg-layout { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 3rem; align-items: start; }
.rg-body { max-width: 760px; color: #334155; font-size: 1.02rem; line-height: 1.75; }
.rg-img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 10px; margin-bottom: 1.8rem; }
.rg-body h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 1.7rem; color: var(--navy); margin: 2.2rem 0 0.8rem; line-height: 1.1; }
.rg-body p { margin: 0 0 1rem; }
.rg-body ul { margin: 0 0 1.2rem; padding-left: 1.2rem; }
.rg-body li { margin-bottom: 0.5rem; }
.rg-body b { color: var(--navy); }
.rg-summary { background: var(--blue-pale); border-left: 4px solid var(--gold); border-radius: 8px; padding: 1.2rem 1.4rem 0.6rem; }
.rg-summary > b { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; font-size: 1.15rem; letter-spacing: 0.04em; }
.rg-summary ul { margin-top: 0.6rem; }
.rg-box { background: var(--gray-light); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.2rem; font-size: 0.95rem; margin: 0.4rem 0 1.2rem; }
.rg-box::before { content: "💡 "; }
.rg-box a { color: var(--gold-ink); font-weight: 700; }
.rg-side { position: sticky; top: 96px; display: grid; gap: 1rem; }
.rg-side-box { background: #0a0f1e; color: #fff; border-radius: 10px; padding: 1.5rem; display: grid; gap: 0.8rem; }
.rg-side-box b { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; font-size: 1.35rem; }
.rg-side-box p { color: rgba(255,255,255,0.75); font-size: 0.9rem; line-height: 1.6; }
.rg-side-box .hero2-btn-dark { background: var(--gold); color: #0a0f1e; text-align: center; justify-content: center; }
.rg-side-tel { color: var(--gold); font-weight: 700; text-align: center; }
.rg-side-links { border: 1px solid var(--border); border-radius: 10px; padding: 1.2rem 1.3rem; display: grid; gap: 0.6rem; }
.rg-side-links b { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); }
.rg-side-links a { color: var(--navy); font-weight: 700; font-size: 0.92rem; }
.rg-side-links a:hover { color: var(--gold-ink); }
@media (max-width: 960px) { .rg-layout { grid-template-columns: 1fr; gap: 2rem; } .rg-side { position: static; } }

/* v2.10: Galerie-Limit, kompaktes Anfrageformular (passt auf 1440×800) */
.gal-more { text-align: center; margin-top: 1.6rem; }
.contact2 { padding: 3.5rem 1.5rem; }
.contact2--page { padding: 1.6rem 1.5rem 3rem; margin-top: 70px; }
.cf-head { margin-bottom: 1.8rem; }
.cf-aside-h1 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 2.3rem; line-height: 1; color: var(--navy); margin: 0.6rem 0 0.8rem; }
.contact2--page .svc-crumbs a { color: var(--gold-ink); }
#angebot { scroll-margin-top: 82px; }
.cf { padding: 1.4rem 1.7rem 1.3rem; }
.cf-progress { margin-bottom: 1rem; }
.cf-progress-lbl { margin-top: 0.45rem; font-size: 0.72rem; }
.cf-label { font-size: 0.88rem; margin: 0.9rem 0 0.35rem; }
.cf-hint { margin-bottom: 0.55rem; font-size: 0.76rem; }
.cf-tiles { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; }
.cf-tile-img { height: 54px; }
.cf-tile-img i { width: 26px; height: 26px; margin: -13px 0 0 -13px; font-size: 0.8rem; }
.cf-tile-t { padding: 0.4rem 0.45rem 0.45rem; font-size: 0.72rem; line-height: 1.2; hyphens: auto; }
.cf-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.4rem; }
.cf-opts .cf-label { margin-top: 0.85rem; }
.cf-chips { gap: 0.4rem; }
.cf-chips span { padding: 0.42rem 0.75rem; font-size: 0.8rem; }
.cf-count { gap: 0.3rem; }
.cf-count span { height: 36px; font-size: 0.85rem; }
.cf-loc { display: grid; grid-template-columns: 110px 1fr; gap: 0.8rem; }
.cf input[type="text"], .cf input[type="email"], .cf input[type="tel"], .cf textarea { padding: 0.6rem 0.8rem; font-size: 0.9rem; }
.cf textarea { min-height: 64px; }
.cf-grid { gap: 0 1.2rem; }
.cf-grid .cf-field .cf-label, .cf-grid > div > .cf-label { margin-top: 0.8rem; }
.cf-summary { padding: 0.55rem 0.9rem; font-size: 0.82rem; }
.cf-ds { margin-top: 0.8rem; font-size: 0.78rem; }
.cf-error { margin-top: 0.6rem; }
.cf-nav { margin-top: 1rem; }
.cf-nav--split { justify-content: space-between; align-items: center; }
.cf-btn { padding: 0.75rem 1.8rem; }
.cf-montage { font-size: 0.85rem; }
.cf-nav--split .cf-privacy { margin: 0; font-size: 0.74rem; }
.cf-aside .cf-trust { margin: 0.9rem 0 1rem; gap: 0.4rem; }
.cf-aside .cf-trust li { font-size: 0.86rem; }
@media (max-width: 1100px) { .cf-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .cf-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cf-opts { grid-template-columns: 1fr; }
  .cf-count { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cf-nav--split { flex-wrap: wrap; }
  .cf-nav--split .cf-privacy { order: 3; width: 100%; text-align: center; }
  .contact2--page { margin-top: 60px; }
  .cf-aside-h1 { font-size: 1.9rem; }
}

/* v2.11: Anfragebereich mit Reitern Angebot / Kontakt, volle Breite */
.contact2 .inner { max-width: 1160px; }
.cf-head--page { text-align: left; margin-bottom: 1rem; max-width: none; }
.cf-head--page h1 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.05; color: var(--navy); margin-top: 0.3rem; }
.cf-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 0.8rem; }
.cf-switch button { cursor: pointer; text-align: left; border: 1.5px solid var(--border); background: #fff; border-radius: 10px; padding: 0.7rem 1.1rem; font-family: inherit; color: var(--navy); display: flex; flex-direction: column; gap: 0.1rem; transition: all 0.2s; }
.cf-switch button b { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 1.25rem; letter-spacing: 0.02em; }
.cf-switch button small { font-size: 0.8rem; color: var(--gray); }
.cf-switch button:hover { border-color: var(--gold); }
.cf-switch button.is-active { background: #0a0f1e; border-color: #0a0f1e; color: #fff; box-shadow: 0 10px 28px rgba(10,15,30,0.18); }
.cf-switch button.is-active b { color: var(--gold); }
.cf-switch button.is-active small { color: rgba(255,255,255,0.65); }
.cf-tabs-js .cf-panel { display: none; }
.cf-tabs-js .cf-panel.is-active { display: block; animation: cfIn 0.3s ease; }
.cf-panel + .cf-panel { margin-top: 1.5rem; }
.cf-tabs-js .cf-panel + .cf-panel { margin-top: 0; }
.cf-tiles { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cf-tile-img { height: 62px; }
.cf-kontakt { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.6rem; align-items: start; }
.cf-kontakt .cb-form { box-shadow: 0 18px 50px rgba(10,15,30,0.1); }
.cf-kontakt .cf-direct-h { border-top: 0; padding-top: 0.2rem; }
.cf-trust--row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.6rem; margin: 1.3rem 0 0; }
.cf-trust--row li { font-size: 0.86rem; }
@media (max-width: 960px) { .cf-kontakt { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .cf-switch button { padding: 0.6rem 0.8rem; } .cf-switch button small { display: none; } .cf-trust--row { justify-content: flex-start; } }
#angebot { scroll-margin-top: 160px; }
/* v2.12: Konfigurator großzügiger */
.contact2 .inner { max-width: 1200px; }
.cf { padding: 2rem 2.4rem 1.9rem; border-radius: 14px; }
.cf-progress { margin-bottom: 1.4rem; }
.cf-progress-lbl { font-size: 0.8rem; margin-top: 0.6rem; }
.cf-label { font-size: 1rem; margin: 1.4rem 0 0.55rem; }
.cf-hint { font-size: 0.82rem; margin: -0.25rem 0 0.8rem; }
.cf-tiles { gap: 0.75rem; }
.cf-tile { border-radius: 10px; }
.cf-tile-img { height: 84px; }
.cf-tile-img i { width: 32px; height: 32px; margin: -16px 0 0 -16px; font-size: 0.95rem; }
.cf-tile-t { padding: 0.6rem 0.7rem 0.65rem; font-size: 0.85rem; }
.cf-opts { gap: 0 2.6rem; }
.cf-opts .cf-label { margin-top: 1.5rem; }
.cf-chips { gap: 0.5rem; }
.cf-chips span { padding: 0.6rem 1.05rem; font-size: 0.9rem; }
.cf-count { gap: 0.45rem; }
.cf-count span { height: 44px; font-size: 0.95rem; }
.cf-loc { grid-template-columns: 130px 1fr; gap: 1rem; }
.cf input[type="text"], .cf input[type="email"], .cf input[type="tel"], .cf textarea { padding: 0.75rem 0.95rem; font-size: 0.95rem; }
.cf textarea { min-height: 80px; }
.cf-grid { gap: 0 2.6rem; }
.cf-grid .cf-field .cf-label, .cf-grid > div > .cf-label { margin-top: 1.3rem; }
.cf-summary { padding: 0.75rem 1rem; font-size: 0.9rem; }
.cf-ds { margin-top: 1.1rem; font-size: 0.84rem; }
.cf-nav { margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,0.08); }
.cf-btn { padding: 0.9rem 2.2rem; font-size: 1rem; }
.cf-montage { font-size: 0.92rem; }
.cf-step[data-step="1"] .cf-tiles + .cf-opts { margin-top: 0.3rem; }

/* v2.12b: passt trotz größerer Elemente auf den Bildschirm */
.cf-label small { font-weight: 400; font-size: 0.8rem; color: rgba(255,255,255,0.5); margin-left: 0.4rem; }
.cf-tile-img { height: 70px; }
.cf-tile-t { min-height: 2.6em; display: flex; align-items: center; }
.cf-opts .cf-label { margin-top: 1.25rem; }
.cf-chips span { padding: 0.58rem 0.95rem; font-size: 0.88rem; }
.cf-nav { margin-top: 1.25rem; padding-top: 1.1rem; }
.cf-progress { margin-bottom: 1.1rem; }
.cf-step > .cf-label:first-child { margin-top: 0; }
.cf-switch button { flex-direction: row; align-items: baseline; gap: 0.7rem; padding: 0.75rem 1.2rem; }
.cf-switch button b { font-size: 1.2rem; }
.cf-head { margin-bottom: 1.4rem; }
.contact2--page { padding-top: 1.2rem; }
.cf-toprow { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 0.8rem; }
.cf-toprow .cf-head--page { margin: 0; }
.cf-toprow .cf-switch { margin: 0; flex: 0 0 560px; }
@media (max-width: 960px) { .cf-toprow { display: block; } .cf-toprow .cf-switch { margin-top: 0.8rem; } }
@media (max-width: 760px) { .cf-switch button { flex-direction: column; gap: 0.1rem; } }
.cf { padding-top: 1.7rem; padding-bottom: 1.6rem; }
.cf-tile-img { height: 64px; }
.cf-nav { margin-top: 1.1rem; padding-top: 0; border-top: 0; }
.cf-toprow .cf-switch button small { display: none; }
.cf-toprow .cf-switch { flex: 0 0 420px; }
#angebot { scroll-margin-top: 150px; }

/* v2.13: Kundenstimmen als einzeiliges Karussell */
.testi-carousel { position: relative; }
.testi-grid.testi-track { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 3rem) / 3); gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 0.3rem 0.1rem 0.6rem; }
.testi-track::-webkit-scrollbar { display: none; }
.testi-track .testi-card { scroll-snap-align: start; }
.testi-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border); background: #fff; color: var(--navy); font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgba(10,15,30,0.12); z-index: 2; transition: all 0.2s; display: flex; align-items: center; justify-content: center; padding-bottom: 3px; }
.testi-nav:hover { background: var(--gold); border-color: var(--gold); color: #0a0f1e; }
.testi-nav:disabled { opacity: 0; pointer-events: none; }
.testi-prev { left: -23px; } .testi-next { right: -23px; }
.testi-carousel.is-static .testi-nav { display: none; }
.testi-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.2rem; }
.testi-dots span { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; transition: all 0.2s; }
.testi-dots span.is-on { background: var(--gold); width: 22px; border-radius: 4px; }
@media (max-width: 960px) { .testi-grid.testi-track { grid-auto-columns: calc((100% - 1.5rem) / 2); } .testi-prev { left: -8px; } .testi-next { right: -8px; } }
@media (max-width: 600px) { .testi-grid.testi-track { grid-auto-columns: 86%; gap: 1rem; } .testi-nav { display: none; } }

/* v2.14: Vorteile mobil kompakt (2 Kacheln nebeneinander) */
@media (max-width: 760px) {
  .benefits { padding: 2.6rem 1rem !important; }
  .benefits-head { margin-bottom: 1.4rem !important; }
  .benefits-head h2 { font-size: 1.6rem !important; }
  .benefits-head h2 br { display: none; }
  .benefits-head > div { margin: 0.8rem auto 0.9rem !important; }
  .benefits-head p { font-size: 0.92rem !important; }
  .benefits-grid { grid-template-columns: 1fr 1fr !important; gap: 0.6rem !important; }
  .benefit-card { padding: 1.1rem 0.8rem !important; gap: 0.55rem !important; }
  .benefit-card > div:first-child { width: 40px !important; height: 40px !important; }
  .benefit-card > div:first-child svg { width: 20px; height: 20px; }
  .benefit-card h3 { font-size: 0.9rem !important; text-decoration: none !important; line-height: 1.15; }
  .benefit-card p { font-size: 0.76rem !important; line-height: 1.45 !important; }
}
@media (max-width: 760px) { .benefits-grid > .benefit-card { min-width: 0; } }

/* v2.14.1: Vorteil-Kacheln einheitlich */
.b-br { display: none; }
.benefit-card h3 { min-height: 2.3em; display: flex; align-items: center; justify-content: center; }
@media (max-width: 760px) {
  .b-br { display: inline; }
  .benefit-card { justify-content: flex-start; }
  .benefit-card h3 { font-size: 0.95rem !important; min-height: 2.4em; }
  .benefit-card p { font-size: 0.8rem !important; }
}
@media (max-width: 760px) { .benefit-card p { min-height: calc(1.45em * 3); } }

/* v2.15: Mobile – Karussells für Galerie & Leistungen, Anfrage neu */
.snap-dots { display: none; }
@media (max-width: 760px) {
  /* Galerie */
  .gallery-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 1.4rem -1.25rem 1.2rem; padding: 0 1.25rem; }
  .gallery-filters::-webkit-scrollbar { display: none; }
  .gallery-filters .filter-btn { flex: 0 0 auto; }
  .gallery-grid { display: grid !important; grid-auto-flow: column; grid-template-columns: none !important; grid-auto-columns: 84%; gap: 0.7rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -1.25rem; padding: 0 1.25rem; scroll-padding: 0 1.25rem; }
  .gallery-grid::-webkit-scrollbar { display: none; }
  .gallery-grid .gal-item, .gallery-grid .gal-item.wide, .gallery-grid .gal-item.full { grid-column: auto !important; aspect-ratio: 4 / 3 !important; scroll-snap-align: start; }
  .gal-label { opacity: 1; }
  /* Leistungen (Startseite) */
  .services .lp-grid { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%; gap: 0.8rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -1.25rem; padding: 0 1.25rem 0.4rem; scroll-padding: 0 1.25rem; }
  .services .lp-grid::-webkit-scrollbar { display: none; }
  .services .lp-card { scroll-snap-align: start; }
  .services .lp-card:hover { transform: none; }
  .snap-dots { display: flex; justify-content: center; gap: 0.4rem; margin-top: 1rem; }
  .snap-dots span { width: 7px; height: 7px; border-radius: 50%; background: #cbd5e1; transition: all 0.2s; }
  .snap-dots span.is-on { background: var(--gold); width: 20px; border-radius: 4px; }
  .services .snap-dots span { background: rgba(255,255,255,0.25); }
  .services .snap-dots span.is-on { background: var(--gold); }

  /* Anfragebereich */
  .contact2 { padding: 2.4rem 1rem; }
  .cf-head { margin-bottom: 1.1rem; }
  .cf-head h2 { font-size: 1.45rem; }
  .cf-head .lp-rule { margin-top: 0.8rem; }
  .cf-switch { gap: 0.4rem; margin-bottom: 0.6rem; }
  .cf-switch button { flex-direction: row; justify-content: center; padding: 0.65rem 0.6rem; border-radius: 8px; }
  .cf-switch button b { font-size: 1.05rem; }
  .cf-switch button small { display: none; }
  .cf { padding: 1.1rem 0.95rem 1.1rem; border-radius: 12px; }
  .cf-progress { margin-bottom: 0.9rem; }
  .cf-progress-lbl { font-size: 0.68rem; }
  .cf-lbl-long { display: none; }
  .cf-label { font-size: 0.92rem; margin: 1.1rem 0 0.5rem; }
  .cf-label small { display: block; margin: 0.15rem 0 0; }
  .cf-tiles { grid-template-columns: 1fr 1fr !important; gap: 0.45rem; }
  .cf-tile { flex-direction: row; align-items: center; border-radius: 8px; min-height: 52px; }
  .cf-tile:hover { transform: none; }
  .cf-tile-img { flex: 0 0 48px; width: 48px; height: 52px; align-self: stretch; }
  .cf-tile-img i { width: 22px; height: 22px; margin: -11px 0 0 -11px; font-size: 0.7rem; }
  .cf-tile-t { min-height: 0; padding: 0.35rem 0.55rem; font-size: 0.76rem; line-height: 1.2; hyphens: auto; word-break: normal; }
  .cf-opts { grid-template-columns: 1fr; }
  .cf-opts .cf-label { margin-top: 1.1rem; }
  .cf-chips { gap: 0.4rem; }
  .cf-chips span { padding: 0.5rem 0.8rem; font-size: 0.82rem; }
  .cf-count { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.35rem; }
  .cf-count span { height: 40px; }
  .cf-loc { grid-template-columns: 96px 1fr; gap: 0.6rem; }
  .cf-nav--split { flex-direction: column; align-items: stretch; gap: 0.8rem; }
  .cf-nav--split .cf-btn { width: 100%; }
  .cf-nav--split .cf-back { order: 2; }
  .cf-nav--split .cf-privacy { order: 3; text-align: center; }
  .cf-montage { justify-content: flex-start; }
  .cf-grid { grid-template-columns: 1fr !important; }
  .cf-summary { font-size: 0.8rem; }
  .cf-trust--row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 0.8rem; margin-top: 1.1rem; }
  .cf-trust--row li { font-size: 0.78rem; }
  .cf-kontakt .cb-form { padding: 1.3rem 1rem 1.1rem; }
  .cf-kontakt .cb-form h2 { font-size: 1.5rem; }
  .cb-switch span { font-size: 0.82rem; padding: 0.6rem 0.4rem; }
  .cb-foot { flex-direction: column; align-items: stretch; }
  .cb-foot .hero2-btn-dark { width: 100%; justify-content: center; text-align: center; }
  .cf-kontakt .kt-cards { grid-template-columns: 1fr 1fr; display: grid; }
  .cf-kontakt .kt-card { padding: 0.6rem 0.7rem; font-size: 0.8rem; }
  .cf-kontakt .kt-card .cf-ic { display: none; }
  .cf-toprow .cf-switch { flex: none; }
}

/* v2.15.1: Ablauf mobil 2 pro Reihe */
.timeline-mobile { display: none; }
@media (max-width: 960px) {
  .timeline-mobile { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 1.4rem 0 1.6rem; }
  .tm-step { background: #fff; border: 1px solid #e2e8f0; border-top: 3px solid #C5A922; border-radius: 8px; padding: 0.9rem 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.35rem; }
  .tm-num { width: 28px; height: 28px; background: #0a0f1e; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-size: 0.85rem; font-weight: 800; color: #C5A922; margin-bottom: 0.2rem; }
  .tm-step h4 { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; font-size: 1rem; font-weight: 800; color: #0f172a; }
  .tm-step p { font-size: 0.8rem; color: #64748b; line-height: 1.45; min-height: calc(1.45em * 3); }
  #ablauf { padding: 2.8rem 1rem !important; }
  #ablauf .timeline-header { margin-bottom: 0 !important; }
}

/* v2.16: Leistungs-Karussell mit allen Leistungen, einheitliche Abstände */
.lp-extra { display: none !important; }
.about, .gallery, .testimonials, .contact2, .faq { background: var(--gray-light) !important; }
.benefits, #ablauf, .services, .cashback, .about, .gallery, .testimonials, .contact2:not(.contact2--page), .faq, .lp-grid-wrap { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.about + .gallery, .gallery + .testimonials, .testimonials + .contact2, .contact2 + .faq, .testimonials + .faq, .about + .testimonials { padding-top: 0 !important; }
.faq + .contact2 { padding-top: 0 !important; }
@media (max-width: 760px) {
  .services .lp-extra { display: flex !important; }
  .services-all span { display: none; }
  .m-hide { display: none; }
  .benefits, #ablauf, .services, .cashback, .about, .gallery, .testimonials, .contact2:not(.contact2--page), .faq, .lp-grid-wrap { padding-top: 2.75rem !important; padding-bottom: 2.75rem !important; }
  .about + .gallery, .gallery + .testimonials, .testimonials + .contact2, .contact2 + .faq, .testimonials + .faq, .about + .testimonials, .faq + .contact2 { padding-top: 0 !important; }
}
.cat-links:not(:has(.cat-link:not(.is-hidden))) { display: none; }

/* v2.17: Hero-Checkliste, einheitlicher Seitenrand mobil */
.hero2-checks { list-style: none; padding: 0; margin: 1.1rem 0 1.3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 1.4rem; }
.hero2-checks li { position: relative; padding-left: 1.85rem; font-weight: 600; font-size: 0.95rem; line-height: 1.35; color: var(--navy); }
.hero2-checks li::before { content: "✓"; position: absolute; left: 0; top: -0.05rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--gold); color: #0a0f1e; font-size: 0.72rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
@media (max-width: 760px) {
  .hero2-chips { display: none !important; }
  .hero2-checks { grid-template-columns: 1fr; gap: 0.55rem; margin: 1rem 0 0.4rem; }
  .hero2-checks li { color: #fff; font-size: 1rem; }
  .hero2-trust--mobile { margin-top: 0.9rem !important; justify-content: flex-start !important; }
  /* einheitlicher linker/rechter Rand: 20 px */
  .benefits, #ablauf, .services, .cashback, .about, .gallery, .testimonials, .contact2, .faq, .lp-grid-wrap, .lp-intro, .kt-hero, .kt-main, .kt-faq, .rg-list, .rg-article, .wm-page, .fd-hero, .fd-ways, .fd-measures, .svc-hero, .svc-body, .svc-steps, .svc-more { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .benefits > div, #ablauf > div, .services > .inner, .cashback > .inner, .about > .inner, .gallery > .inner, .testimonials > .inner, .faq > .inner { padding-left: 0 !important; padding-right: 0 !important; }
  .services-head, .faq-head { align-items: flex-start !important; }
  .services-head > div, .services-head p { margin-left: 0 !important; padding-left: 0 !important; }
  .faq-head .btn { align-self: flex-start; }
}
@media (max-width: 760px) {
  footer { padding: 0 !important; }
  footer > div { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
}
@media (max-width: 760px) { .services-head { gap: 0.9rem !important; margin-bottom: 1.6rem !important; } .services-head p { margin-top: 0 !important; } .hero2-trust--mobile { padding-left: 0 !important; } }

/* v2.18: echte Google-Bewertungen */
.testi-google { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.9rem; font-weight: 700; font-size: 0.92rem; color: var(--navy); border: 1px solid var(--border); background: #fff; padding: 0.5rem 1rem; border-radius: 999px; }
.testi-google .stars { color: var(--gold); letter-spacing: 1px; }
.testi-google:hover { border-color: var(--gold); }

.svc-steps-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 600px) { .svc-steps-grid--3 { grid-template-columns: 1fr; } }

/* ===== v2.19.0 Einsatzgebiete ===== */
.nav-dd-eg { min-width: 220px; display: none; }
.nav-dd:hover .nav-dd-eg, .nav-dd:focus-within .nav-dd-eg { display: grid; grid-template-columns: 1fr 1fr; gap: 0.1rem; }
.nav-dd-eg a { padding: 0.5rem 0.8rem; }
.nav-dd-eg .nav-dd-all { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,0.1); margin-top: 0.3rem; padding-top: 0.7rem; color: var(--gold); }
.mm-eg { display: grid; grid-template-columns: 1fr 1fr; }
.eg-hero .hero2-actions { margin-top: 1.4rem; }
.eg-hero .hero2-btn-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.eg-intro, .eg-towns, .eg-local, .eg-near { padding: 5rem 1.5rem; }
.eg-intro .inner, .eg-towns .inner, .eg-local .inner, .eg-near .inner, .eg-facts .inner { max-width: 1200px; margin: 0 auto; }
.eg-intro-grid, .eg-local-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3.5rem; align-items: center; }
.eg-intro p, .eg-local p, .eg-near p { color: #475569; line-height: 1.7; margin: 0.9rem 0 0; max-width: 60ch; }
.eg-intro .hero2-actions { margin-top: 1.6rem; }
.eg-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.6rem; }
.eg-chips a { font-size: 0.82rem; font-weight: 700; padding: 0.45rem 0.8rem; border-radius: 999px; background: #f1f5f9; color: var(--navy); border: 1px solid #e2e8f0; transition: all 0.2s; }
.eg-chips a:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.eg-map-wrap { background: #0a0f1e; border-radius: 12px; padding: 1rem; border-bottom: 4px solid var(--gold); }
.eg-map { width: 100%; height: auto; display: block; font-family: 'Barlow', sans-serif; }
.eg-ring { fill: rgba(197,169,34,0.07); stroke: rgba(197,169,34,0.35); stroke-dasharray: 4 5; }
.eg-ring--2 { fill: none; }
.eg-km { fill: rgba(197,169,34,0.7); font-size: 10px; font-weight: 700; }
.eg-line { stroke: rgba(255,255,255,0.12); stroke-width: 1; }
.eg-pin circle { fill: #fff; stroke: #0a0f1e; stroke-width: 2; transition: fill 0.2s; }
.eg-pin text { fill: rgba(255,255,255,0.85); font-size: 13px; font-weight: 700; }
.eg-pin.is-on circle { fill: var(--gold); }
.eg-pin.is-on text { fill: var(--gold); }
.eg-pin.is-hq circle { stroke: #fff; stroke-width: 3; }
.eg-pin:hover circle { fill: var(--gold); } .eg-pin:hover text { fill: #fff; }
.eg-towns { background: #f8f9fb; }
.eg-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: 2rem; }
.eg-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 1.2rem; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.eg-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15,23,42,0.1); border-color: var(--gold); }
.eg-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.eg-card h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 1.35rem; color: var(--navy); }
.eg-card-top span { font-size: 0.72rem; font-weight: 700; color: var(--gold); white-space: nowrap; }
.eg-card p { font-size: 0.85rem; color: #64748b; line-height: 1.5; margin: 0.5rem 0 0.9rem; flex: 1; }
.eg-card em { font-style: normal; font-size: 0.85rem; font-weight: 700; color: var(--navy); }
.eg-card:hover em { color: var(--gold); }
.eg-facts { background: #fff; padding: 0 1.5rem; }
.eg-facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; transform: translateY(-1.6rem); }
.eg-facts-grid > div { background: #fff; border: 1px solid #e2e8f0; border-top: 3px solid var(--gold); border-radius: 8px; padding: 1.1rem 1.2rem; box-shadow: 0 10px 26px rgba(15,23,42,0.07); }
.eg-facts-grid strong { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 1.45rem; color: var(--navy); }
.eg-facts-grid span { font-size: 0.86rem; color: #64748b; line-height: 1.45; }
.eg-local { padding-top: 2.5rem; }
.eg-h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 1.3rem; color: var(--navy); margin-top: 1.6rem; }
.eg-teile { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem 1.2rem; margin-top: 0.8rem; padding: 0; }
.eg-teile li { position: relative; padding-left: 1.3rem; font-weight: 600; color: var(--navy); }
.eg-teile li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-weight: 800; }
.eg-near { background: #f8f9fb; }
.eg-near-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 3rem; }
.eg-near .eg-h3 { margin-top: 0.3rem; }
.eg-near .cat-link { display: inline-block; margin-top: 0.9rem; }
.eg-chips--light { margin-top: 0.8rem; }
.eg-chips--light a { background: #fff; }
.eg-rg { list-style: none; padding: 0; margin-top: 0.8rem; display: grid; gap: 0.6rem; }
.eg-rg a { font-weight: 700; color: var(--navy); font-size: 0.95rem; }
.eg-rg a:hover { color: var(--gold); }
@media (max-width: 1100px) {
  .eg-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .eg-intro, .eg-towns, .eg-local, .eg-near { padding: 2.75rem 1.25rem; }
  .eg-local { padding-top: 1rem; }
  .eg-facts { padding: 0 1.25rem; }
  .eg-intro-grid, .eg-local-grid, .eg-near-grid { grid-template-columns: 1fr; gap: 2rem; }
  .eg-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .eg-card { padding: 0.95rem; }
  .eg-card h3 { font-size: 1.15rem; }
  .eg-card-top { flex-direction: column; gap: 0.1rem; }
  .eg-facts-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; transform: translateY(-1.2rem); }
  .eg-facts-grid strong { font-size: 1.2rem; }
  .eg-facts-grid span { font-size: 0.8rem; }
  .eg-hero .hero2-actions { flex-direction: column; align-items: stretch; }
}
/* Nav mit 8 Punkten (v2.19.0) */
@media (min-width: 961px) {
  .nav-center { gap: 1.7rem; }
}
@media (min-width: 961px) and (max-width: 1599px) {
  .nav-phone { font-size: 0; gap: 0; margin-right: 0; width: 40px; height: 40px; justify-content: center; border: 1.5px solid rgba(255,255,255,0.35); border-radius: 6px; }
  .nav-phone svg { width: 17px; height: 17px; }
}
@media (min-width: 961px) and (max-width: 1360px) { .nav-center { gap: 1.15rem; } .nav-center a { font-size: 0.84rem; } }
@media (min-width: 961px) and (max-width: 1180px) { .nav-wa span { display: none; } .nav-center { gap: 0.9rem; } .nav-center a { font-size: 0.8rem; } }
@media (min-width: 961px) and (max-width: 1180px) { .nav-center > a:first-child { display: none; } }
@media (min-width: 961px) and (max-width: 1080px) { .nav-wa { display: none; } .nav-center { gap: 0.75rem; } }
.eg-hero .hero2-btn-dark { background: var(--gold); color: #0a0f1e; }
.eg-hero .hero2-btn-dark:hover { background: #d8bc2e; }
/* v2.19.2 Hero: Textkarte links neben dem Bild statt darüber */
@media (min-width: 961px) {
  .hero2 { grid-template-columns: minmax(0, 650px) minmax(0, 1fr); column-gap: 1.75rem; }
  .hero2-card { grid-column: 1 / 2; max-width: none; width: 100%; }
  .hero2-bg { grid-column: 2 / 3; }
}
@media (min-width: 961px) and (max-width: 1280px) {
  .hero2 { grid-template-columns: minmax(0, 540px) minmax(0, 1fr); column-gap: 1.25rem; }
}
/* Mega-Menü „Einsatzgebiete" (v2.19.3) */
.nav-dd-eg { display: none !important; }
.mega-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nav-mega .mega-col a small { font-size: 0.75rem; font-weight: 600; color: #94a3b8; margin-left: 0.35rem; }
.mega-pop-eg .eg-map { background: #0a0f1e; border-radius: 8px; padding: 0.5rem; max-height: 250px; }
.mega-pop-eg .eg-pin text { font-size: 15px; }
/* v2.19.4 Hero: Textkarte so hoch wie das Bild */
@media (min-width: 961px) {
  .hero2-card { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
  .hero2-card > * { flex: 0 0 auto; }
  .hero2-card .hero2-pill { align-self: flex-start; }
}

/* ===== v2.20.0 Hero „Variante 2": dunkle Textfläche links, Bild rechts (Desktop) ===== */
@media (min-width: 961px) {
  .hero2 { grid-template-columns: 50% 50%; column-gap: 0; padding: 0; height: clamp(540px, calc(100vh - 70px - 6rem), 640px); background: #0a0f1e; }
  .hero2-card { grid-column: 1 / 2; align-self: stretch; background: transparent; border: 0; border-radius: 0; box-shadow: none; max-width: none; width: 100%;
    padding: 2.5rem 3.5rem 2.5rem max(3rem, calc((100vw - 1340px) / 2)); display: flex; flex-direction: column; justify-content: center; }
  .hero2-card h1 { color: #fff; }
  .hero2-card h1 span { color: var(--gold); }
  .hero2-sub { color: #cbd5e1; }
  .hero2-pill { background: rgba(197,169,34,0.12); border-color: rgba(197,169,34,0.45); color: var(--gold); }
  .hero2-card .hero2-checks li { color: #fff; }
  .hero2-card .hero2-btn-dark { background: var(--gold); color: #0a0f1e; }
  .hero2-card .hero2-btn-dark:hover { background: #d8bc2e; }
  .hero2-card .hero2-btn-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
  .hero2-card .hero2-btn-light:hover { border-color: var(--gold); color: var(--gold); }
  .hero2-card .hero2-trust { color: #e2e8f0; }
  .hero2-bg { grid-column: 2 / 3; border-radius: 0; box-shadow: none; border-left: 6px solid var(--gold); height: 100%; }
}
@media (min-width: 961px) and (max-width: 1280px) {
  .hero2 { grid-template-columns: 52% 48%; }
  .hero2-card { padding: 2rem 2rem 2rem 2rem; }
}
/* v2.20.2 Mobil: stärkere Abdunklung im Hero für besseren Kontrast */
@media (max-width: 960px) {
  .hero2-bg::after { background: linear-gradient(to top, rgba(10,15,30,0.97) 0%, rgba(10,15,30,0.85) 45%, rgba(10,15,30,0.55) 75%, rgba(10,15,30,0.35) 100%) !important; }
  .hero2-card h1, .hero2-sub, .hero2-checks li, .hero2-pill, .hero2-trust--mobile { text-shadow: 0 1px 12px rgba(0,0,0,0.55); }
}
/* v2.20.2 Mega-Menü: Hover-Brücke zwischen Menüpunkt und Menü */
@media (min-width: 961px) {
  .nav-center { align-self: stretch; }
  .nav-center > .nav-dd { align-self: stretch; display: flex; align-items: center; }
  .nav-mega::before { top: -40px; height: 40px; }
}

/* ===== v2.21.0 Prospekt-Regal ===== */
.pk { padding: 5rem 1.5rem; background: #f8f9fb; }
.pk .inner { max-width: 1200px; margin: 0 auto; }
.pk-head { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; margin-bottom: 2.2rem; }
.pk-head p { color: #475569; line-height: 1.65; max-width: 52ch; }
.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.6rem 1.4rem; }
.pk-item { display: flex; flex-direction: column; gap: 0.35rem; color: var(--navy); }
.pk-book { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--pk-bg, #111); border-radius: 4px 8px 8px 4px; overflow: hidden; margin-bottom: 0.7rem;
  box-shadow: inset 6px 0 10px -6px rgba(0,0,0,0.5), 0 14px 28px rgba(15,23,42,0.16), 0 2px 6px rgba(15,23,42,0.1);
  transform: perspective(900px) rotateY(0deg); transform-origin: left center; transition: transform 0.45s cubic-bezier(.2,.7,.2,1), box-shadow 0.45s; }
.pk-book img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pk-book::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: linear-gradient(90deg, rgba(0,0,0,0.35), rgba(255,255,255,0.08)); z-index: 2; }
.pk-shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.22) 45%, transparent 60%); transform: translateX(-120%); transition: transform 0.7s; }
.pk-item:hover .pk-book { transform: perspective(900px) rotateY(-14deg) translateY(-4px); box-shadow: inset 6px 0 10px -6px rgba(0,0,0,0.5), 18px 22px 34px rgba(15,23,42,0.22); }
.pk-item:hover .pk-shine { transform: translateX(120%); }
.pk-brand { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink, #8A7412); }
.pk-item strong { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 1.15rem; line-height: 1.15; }
.pk-text { font-size: 0.86rem; color: #64748b; line-height: 1.5; }
.pk-item em { font-style: normal; font-weight: 700; font-size: 0.85rem; margin-top: 0.2rem; }
.pk-item:hover em { color: var(--gold-ink, #8A7412); }
.pk-all { display: inline-block; margin-top: 1.8rem; }
.pk-grid > :only-child { max-width: 280px; }
@media (max-width: 860px) {
  .pk { padding: 2.75rem 1.25rem; }
  .pk-head { grid-template-columns: 1fr; gap: 0.6rem; margin-bottom: 1.4rem; }
  .pk-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; margin: 0 -1.25rem; padding: 0 1.25rem 0.5rem; }
  .pk-item { flex: 0 0 70%; scroll-snap-align: start; }
}

/* ===== v2.21.1 Profilschnitt mit Beschriftung (ohne Scroll-Stopp) ===== */
.fxp { padding: 5rem 1.5rem; background: #0a0f1e; color: #fff; overflow: hidden; }
.fxp .inner { max-width: 1240px; margin: 0 auto; }
.fxp-head { text-align: center; margin-bottom: 2.5rem; }
.fxp .eyebrow { color: var(--gold); justify-content: center; }
.fxp .kt-h2 { color: #fff; }
.fxp-grid { position: relative; display: grid; grid-template-columns: 1fr minmax(320px, 1.25fr) 1fr; gap: 2.5rem; align-items: center; }
.fxp-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 3; }
.fxp-lines path { fill: none; stroke: rgba(197,169,34,0.45); stroke-width: 1.5; stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600); transition: stroke-dashoffset 0.9s cubic-bezier(.4,0,.2,1), stroke 0.3s, stroke-width 0.3s; }
.fxp.is-in .fxp-lines path { stroke-dashoffset: 0; }
.fxp-lines path.is-on { stroke: var(--gold); stroke-width: 2.5; }
.fxp-col { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 1.6rem; }
.fxp-col--l { align-items: flex-end; text-align: right; }
.fxp-lab { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: auto 1fr; column-gap: 0.7rem; width: 100%; max-width: 310px; padding: 0.9rem 1rem; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03);
  opacity: 0; transform: translateY(14px); transition: opacity 0.6s, transform 0.6s, background 0.3s, border-color 0.3s; }
.fxp-col--l .fxp-lab { grid-template-columns: 1fr auto; }
.fxp-col--l .fxp-n { grid-column: 2; grid-row: 1 / span 3; }
.fxp-col--l .fxp-k, .fxp-col--l .fxp-h, .fxp-col--l .fxp-t { grid-column: 1; }
.fxp.is-in .fxp-lab { opacity: 1; transform: none; }
.fxp-lab:hover, .fxp-lab.is-on { background: rgba(197,169,34,0.1); border-color: rgba(197,169,34,0.55); }
.fxp-lab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.fxp-n { grid-row: 1 / span 3; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.1); color: #fff; font-weight: 800; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; transition: background 0.3s, color 0.3s; }
.fxp-lab.is-on .fxp-n { background: var(--gold); color: #0a0f1e; }
.fxp-k { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.7rem; line-height: 1; color: var(--gold); }
.fxp-h { font-weight: 700; font-size: 0.92rem; margin-top: 0.25rem; }
.fxp-t { font-size: 0.84rem; color: #94a3b8; line-height: 1.45; margin-top: 0.15rem; }
.fxp-stage { position: relative; z-index: 2; width: 100%; max-width: 380px; justify-self: center; aspect-ratio: var(--ar, 1); background: #fff; border-radius: 16px; box-shadow: 0 30px 70px rgba(0,0,0,0.45);
  opacity: 0; transform: scale(0.94) translateY(20px); transition: opacity 0.8s, transform 0.8s cubic-bezier(.2,.7,.2,1); }
.fxp.is-in .fxp-stage { opacity: 1; transform: none; }
.fxp-pic { position: absolute; inset: 3%; }
.fxp-pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fxp-dot { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: #0a0f1e; border: 2px solid var(--gold); color: #fff; font-size: 0.7rem; display: flex; align-items: center; justify-content: center; z-index: 4; cursor: pointer;
  transform: scale(0); transition: transform 0.4s cubic-bezier(.3,1.6,.5,1), background 0.3s; }
.fxp.is-in .fxp-dot { transform: scale(1); }
.fxp-dot b { font-weight: 800; }
.fxp-dot.is-on { background: var(--gold); color: #0a0f1e; animation: fxpPulse 1.6s infinite; }
@keyframes fxpPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(197,169,34,0.6); } 70% { box-shadow: 0 0 0 14px rgba(197,169,34,0); } }
.fxp-lens { position: absolute; width: 30%; image-rendering: auto; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--gold); box-shadow: 0 16px 40px rgba(0,0,0,0.35); background-repeat: no-repeat; background-color: #fff; z-index: 4; pointer-events: none;
  right: 4%; top: 4%; opacity: 0; transform: scale(0.6); transition: opacity 0.35s, transform 0.35s, background-position 0.6s cubic-bezier(.2,.7,.2,1); }
.fxp-lens.is-on { opacity: 1; transform: none; }
.fxp-src { position: absolute; right: 0.8rem; bottom: 0.5rem; font-size: 0.68rem; color: #64748b; z-index: 3; }
@media (max-width: 960px) {
  .fxp { padding: 2.75rem 1.25rem; }
  .fxp-head { text-align: left; margin-bottom: 1.4rem; }
  .fxp .eyebrow { justify-content: flex-start; }
  .fxp-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .fxp-lines { display: none; }
  .fxp-stage { grid-column: 1 / -1; grid-row: 1; margin-bottom: 0.6rem; }
  .fxp-col { display: contents; }
  .fxp-lab, .fxp-col--l .fxp-lab { grid-template-columns: auto 1fr; text-align: left; max-width: none; padding: 0.7rem; }
  .fxp-col--l .fxp-n { grid-column: 1; } .fxp-col--l .fxp-k, .fxp-col--l .fxp-h, .fxp-col--l .fxp-t { grid-column: 2; }
  .fxp-k { font-size: 1.3rem; } .fxp-t { display: none; } .fxp-h { font-size: 0.8rem; }
  .fxp-lens { width: 42%; }
}
@media (prefers-reduced-motion: reduce) { .fxp-lab, .fxp-stage, .fxp-dot, .fxp-lines path { transition: none; } .fxp-dot.is-on { animation: none; } }

/* ===== v2.21.1 Rollladen-Animation ===== */
.fxr { padding: 5rem 1.5rem; background: #fff; }
.fxr .inner, .fxz .inner, .fxd .inner { max-width: 1240px; margin: 0 auto; }
.fxr-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 3rem; align-items: center; }
.fxr-scene, .fxz-scene { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(15,23,42,0.18); }
.fxr-scene img, .fxz-scene img { display: block; width: 100%; height: auto; }
.fxr-win { position: absolute; height: var(--h); overflow: hidden; }
.fxr-win i { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--p, 0) * 100%);
  background: repeating-linear-gradient(to bottom, #6b7078 0 5px, #5a5e66 5px 6px, #4a4e55 6px 7px), #5a5e66;
  box-shadow: inset 0 -4px 0 #3b3e44, 0 3px 6px rgba(0,0,0,0.35); }
.fxr-shade { position: absolute; inset: 0; background: #0b1020; opacity: calc(var(--p, 0) * 0.42); pointer-events: none; }
.fxr-hint { position: absolute; left: 1rem; top: 1rem; font-size: 0.75rem; font-weight: 700; background: rgba(10,15,30,0.75); color: #fff; padding: 0.35rem 0.7rem; border-radius: 999px; }
.fxr-row { display: grid; grid-template-columns: 150px 1fr; gap: 1.4rem; align-items: start; margin-top: 1.4rem; }
.fxr-cut { width: 100%; border-radius: 10px; background: #fff; }
.fxr-list, .fxz-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.fxr-list li { display: grid; gap: 0.1rem; padding-left: 1.1rem; position: relative; }
.fxr-list li::before { content: ""; position: absolute; left: 0; top: 0.45rem; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.fxr-list strong { font-size: 0.95rem; color: var(--navy); }
.fxr-list span { font-size: 0.86rem; color: #64748b; line-height: 1.45; }

/* ===== v2.21.1 ZIP-Screen-Animation ===== */
.fxz { padding: 5rem 1.5rem; background: #f8f9fb; }
.fxz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.fxz-text p { color: #475569; line-height: 1.7; margin: 1rem 0 1.2rem; }
.fxz-list { margin-bottom: 1.6rem; }
.fxz-list li { font-size: 0.95rem; color: #334155; padding-left: 1.6rem; position: relative; }
.fxz-list li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--gold); color: #0a0f1e; font-size: 0.65rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.fxz-list strong { color: var(--navy); margin-right: 0.3rem; }
.fxz-scene { max-width: 560px; justify-self: end; }
.fxz-scr { position: absolute; height: var(--h); overflow: hidden; }
.fxz-scr i { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--p, 0) * 100%);
  background: linear-gradient(to bottom, rgba(232,234,236,0.94), rgba(222,225,228,0.94)), repeating-linear-gradient(45deg, rgba(0,0,0,0.03) 0 2px, transparent 2px 4px);
  border-bottom: 5px solid #8b9097; box-shadow: 0 2px 4px rgba(0,0,0,0.25); }
.fxz-scr i::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(0,0,0,0.035) 0 1px, transparent 1px 3px); }

/* ===== v2.21.1 Hergestellt von DRUTEX ===== */
.fxd { padding: 5rem 1.5rem; background: #0a0f1e; color: #fff; overflow: hidden; }
.fxd-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3.5rem; align-items: center; }
.fxd .eyebrow { color: var(--gold); }
.fxd .kt-h2 { color: #fff; }
.fxd-text p { color: #cbd5e1; line-height: 1.7; margin-top: 1rem; }
.fxd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem 1rem; margin-top: 2rem; }
.fxd-stats div { border-top: 2px solid rgba(197,169,34,0.6); padding-top: 0.7rem; }
.fxd-stats b { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1; color: var(--gold); white-space: nowrap; }
.fxd-stats small { display: block; margin-top: 0.35rem; font-size: 0.82rem; color: #94a3b8; }
.fxd-note { font-size: 0.72rem !important; color: #64748b !important; margin-top: 1.4rem !important; }
.fxd-pics { position: relative; height: 520px; }
.fxd-pics img { position: absolute; object-fit: cover; border-radius: 12px; box-shadow: 0 24px 50px rgba(0,0,0,0.45); transition: transform 0.9s cubic-bezier(.2,.7,.2,1), opacity 0.9s; opacity: 0; }
.fxd-p1 { left: 0; top: 0; width: 78%; height: 62%; transform: translateY(30px); }
.fxd-p2 { right: 0; bottom: 0; width: 52%; height: 52%; transform: translateX(40px); border: 4px solid #0a0f1e; }
.fxd-p3 { left: 6%; bottom: 2%; width: 40%; height: 34%; transform: translateY(40px); border: 4px solid #0a0f1e; }
.fxd.is-in .fxd-pics img { opacity: 1; transform: none; }
.fxd.is-in .fxd-p2 { transition-delay: 0.15s; } .fxd.is-in .fxd-p3 { transition-delay: 0.3s; }
@media (max-width: 960px) {
  .fxr, .fxz, .fxd { padding: 2.75rem 1.25rem; }
  .fxr-grid, .fxz-grid, .fxd-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .fxr-row { grid-template-columns: 96px 1fr; gap: 1rem; }
  .fxz-scene { justify-self: stretch; max-width: none; order: -1; }
  .fxd-stats { grid-template-columns: repeat(2, 1fr); }
  .fxd-pics { height: 320px; order: -1; }
}
@media (prefers-reduced-motion: reduce) { .fxd-pics img { transition: none; opacity: 1; transform: none; } }

/* v2.21.2 Profil: scroll-gekoppelt, keine CSS-Übergänge für Transform */
.fxp.is-scroll .fxp-lab, .fxp.is-scroll .fxp-dot, .fxp.is-scroll .fxp-stage, .fxp.is-scroll .fxp-lines path { transition-property: background, border-color, color, stroke, stroke-width; }
.fxp.is-scroll .fxp-stage { box-shadow: 0 calc(20px + var(--sh, 0) * 30px) calc(40px + var(--sh, 0) * 50px) rgba(0,0,0,calc(0.3 + var(--sh, 0) * 0.25)); will-change: transform; transform-style: preserve-3d; }
.fxp-grid { perspective: 1400px; }
@media (max-width: 960px) { .fxp.is-scroll .fxp-lab { transform: none !important; } }

/* v2.21.3 Rollladen: Panzer bis ganz unten, Stühle davor */
.fxr-scene img.fxr-front { position: absolute; left: 0; top: 52.95%; width: 83.13%; height: auto; pointer-events: none; filter: brightness(calc(1 - var(--p, 0) * 0.42)); }
/* v2.21.5 ZIP-Screen deutlicher sichtbar und kompakter */
.fxz-scene { max-width: 470px; }
.fxz-scr i { background: linear-gradient(to bottom, rgba(48,52,60,0.86), rgba(38,42,50,0.88)) !important; border-bottom: 6px solid #2a2d33; box-shadow: 0 3px 8px rgba(0,0,0,0.35); }
.fxz-scr i::after { background: repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px) !important; }
.fxz-scene::after { content: ""; position: absolute; inset: 0; background: rgba(255,190,60,calc((1 - var(--p, 0)) * 0.10)); pointer-events: none; mix-blend-mode: soft-light; }
.fxz-hint { position: absolute; left: 1rem; top: 1rem; font-size: 0.75rem; font-weight: 700; background: rgba(10,15,30,0.75); color: #fff; padding: 0.35rem 0.7rem; border-radius: 999px; z-index: 2; }

/* v2.21.6 ZIP-Screen bis ganz unten, Tisch und Liege davor */
.fxz-scene img.fxz-front { position: absolute; left: 0; top: 65.82%; width: 77.26%; height: auto; pointer-events: none; }

/* ===== v2.22.0 Material-Vergleich ===== */
.fxm { padding: 5rem 1.5rem; background: linear-gradient(180deg, #0a0f1e 0%, #121a30 100%); color: #fff; overflow: hidden; }
.fxm .inner { max-width: 1240px; margin: 0 auto; }
.fxm-head { text-align: center; max-width: 720px; margin: 0 auto 2.4rem; }
.fxm .eyebrow { color: var(--gold); justify-content: center; }
.fxm .kt-h2 { color: #fff; }
.fxm-head p { color: #94a3b8; margin-top: 0.8rem; line-height: 1.6; }
.fxm-line { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; align-items: end; margin-bottom: 2.4rem; }
.fxm-pf { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; padding: 1.2rem 0.6rem 1rem; border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03);
  opacity: 0; transform: translateY(60px); transition: opacity 0.7s var(--d), transform 0.8s cubic-bezier(.2,.7,.2,1) var(--d), background 0.3s, border-color 0.3s; }
.fxm.is-in .fxm-pf { opacity: 0.55; transform: translateY(calc(var(--py, 0) * 1px)); }
.fxm.is-in .fxm-pf.is-on { opacity: 1; background: rgba(197,169,34,0.1); border-color: rgba(197,169,34,0.6); transform: translateY(calc(var(--py, 0) * 1px - 10px)); }
.fxm-pf:hover { opacity: 0.9 !important; }
.fxm-pf:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.fxm-pf-img { height: 230px; display: flex; align-items: flex-end; justify-content: center; }
.fxm-pf-img img { max-height: 100%; width: auto; max-width: 100%; filter: drop-shadow(0 18px 24px rgba(0,0,0,0.5)); transition: transform 0.6s cubic-bezier(.2,.7,.2,1); }
.fxm-pf.is-on .fxm-pf-img img { transform: scale(1.08) rotate(-2deg); }
.fxm-pf-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 1.2rem; letter-spacing: 0.02em; }
.fxm-pf.is-on .fxm-pf-name { color: var(--gold); }
.fxm-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: #fff; color: var(--navy); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,0.4); min-height: 440px; }
.fxm-rooms { position: relative; overflow: hidden; }
.fxm-room { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 0.7s, transform 1.4s cubic-bezier(.2,.7,.2,1); }
.fxm-room.is-on { opacity: 1; transform: scale(1); }
.fxm-panels { position: relative; padding: 2.2rem 2.4rem; }
.fxm-panel { position: absolute; inset: 2.2rem 2.4rem auto; opacity: 0; transform: translateX(30px); transition: opacity 0.5s, transform 0.5s; pointer-events: none; }
.fxm-panel.is-on { position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto; }
.fxm-sys { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink, #8A7412); }
.fxm-panel h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 2rem; margin: 0.2rem 0 0.5rem; }
.fxm-panel > p { color: #475569; line-height: 1.6; }
.fxm-uw { margin: 1.3rem 0 1.1rem; }
.fxm-uw-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.88rem; }
.fxm-uw-top b { font-family: 'Barlow Condensed', sans-serif; font-size: 1.35rem; color: var(--navy); }
.fxm-uw-top small { color: #94a3b8; font-size: 0.75rem; white-space: nowrap; }
.fxm-uw-bar { position: relative; height: 10px; border-radius: 6px; background: #e2e8f0; margin-top: 0.5rem; }
.fxm-uw-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; background: linear-gradient(90deg, #d8bc2e, var(--gold)); transition: width 1.1s cubic-bezier(.2,.7,.2,1) 0.2s; }
.fxm-panel.is-on .fxm-uw-bar i { width: var(--w); }
.fxm-uw-bar em { position: absolute; left: var(--x); top: -4px; bottom: -4px; width: 2px; background: #0a0f1e; font-style: normal; }
.fxm-uw-bar em::after { content: attr(data-l); }
.fxm-uw-bar em { font-size: 0; }
.fxm-uw-bar em::before { content: "Fördergrenze 0,95"; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); font-size: 0.66rem; color: #64748b; white-space: nowrap; font-weight: 600; }
.fxm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin: 1.8rem 0 1rem; }
.fxm-stats div { border-left: 3px solid var(--gold); padding-left: 0.7rem; }
.fxm-stats b { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.7rem; line-height: 1; }
.fxm-stats b small { font-size: 0.95rem; margin-left: 0.15rem; color: #64748b; }
.fxm-stats span { font-size: 0.78rem; color: #64748b; line-height: 1.3; display: block; margin-top: 0.25rem; }
.fxm-panel ul { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: 0.35rem; }
.fxm-panel li { position: relative; padding-left: 1.5rem; font-size: 0.92rem; color: #334155; }
.fxm-panel li::before { content: "✓"; position: absolute; left: 0; color: var(--gold-ink, #8A7412); font-weight: 800; }
.fxm-pdf { display: inline-block; font-weight: 700; font-size: 0.9rem; color: #fff; background: #0a0f1e; padding: 0.75rem 1.1rem; border-radius: 6px; }
.fxm-pdf:hover { background: var(--gold); color: #0a0f1e; }
.fxm-note { text-align: center; font-size: 0.72rem; color: #64748b; margin-top: 1.2rem; }
@media (max-width: 960px) {
  .fxm { padding: 2.75rem 1.25rem; }
  .fxm-head { text-align: left; margin-bottom: 1.4rem; } .fxm .eyebrow { justify-content: flex-start; }
  .fxm-line { gap: 0.5rem; margin-bottom: 1.4rem; }
  .fxm-pf { padding: 0.7rem 0.2rem 0.6rem; gap: 0.4rem; }
  .fxm-pf-img { height: 110px; }
  .fxm-pf-name { font-size: 0.8rem; text-align: center; }
  .fxm-detail { grid-template-columns: 1fr; min-height: 0; }
  .fxm-rooms { height: 190px; }
  .fxm-panels { padding: 1.4rem 1.2rem; }
  .fxm-panel { inset: 1.4rem 1.2rem auto; }
  .fxm-panel h3 { font-size: 1.6rem; }
  .fxm-stats b { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) { .fxm-pf, .fxm-room, .fxm-panel, .fxm-uw-bar i { transition: none; } }

/* ===== v2.23.0 Haustür ===== */
.fxt { padding: 5rem 1.5rem; background: #f8f9fb; }
.fxt .inner { max-width: 1240px; margin: 0 auto; }
.fxt-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3.5rem; align-items: center; }
.fxt-scene { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(15,23,42,0.18); }
.fxt-wall { position: relative; height: 560px; background: linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px) 0 0 / 60px 100%, linear-gradient(180deg, #e9e6df, #d9d4ca); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.fxt-frame { position: relative; width: 210px; height: 442px; border: 9px solid #2d3236; border-bottom: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3), 0 8px 18px rgba(0,0,0,0.18); perspective: 1100px; background: #1b1d22; }
.fxt-inside { position: absolute; inset: 0; background: radial-gradient(ellipse at 60% 35%, #ffe7b0 0%, #e9b866 32%, #6b4a2b 75%, #2a1d12 100%); overflow: hidden; }
.fxt-inside span { position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: linear-gradient(180deg, #7a5536, #4b3220); opacity: 0.85; }
.fxt-door { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; transform-origin: left center; transform: rotateY(calc(var(--p, 0) * 72deg)); filter: brightness(calc(1 - var(--p, 0) * 0.35)); transition: opacity 0.25s; backface-visibility: hidden; }
.fxt-door.is-swap { opacity: 0.2; }
.fxt-step { width: 280px; height: 18px; background: linear-gradient(180deg, #b9b2a6, #9a9387); box-shadow: 0 6px 12px rgba(0,0,0,0.18); }
.fxt-text p { color: #475569; line-height: 1.65; margin: 0.9rem 0 1.2rem; }
.fxt-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); margin: 1rem 0 0.5rem; }
.fxt-label small { text-transform: none; letter-spacing: 0; font-weight: 500; color: #94a3b8; margin-left: 0.3rem; }
.fxt-models { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; }
.fxt-model { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.45rem 0.25rem; border-radius: 8px; border: 2px solid transparent; background: #e9edf2; box-shadow: 0 2px 6px rgba(15,23,42,0.06); transition: border-color 0.2s, transform 0.2s; }
.fxt-model img { height: 74px; width: auto; }
.fxt-model span { font-size: 0.66rem; font-weight: 600; color: #475569; text-align: center; line-height: 1.2; }
.fxt-model:hover { transform: translateY(-2px); }
.fxt-model.is-on { border-color: var(--gold); }
.fxt-colors { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fxt-color { all: unset; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem 0.4rem 0.4rem; border-radius: 999px; background: #fff; border: 2px solid #e2e8f0; font-size: 0.84rem; font-weight: 600; color: var(--navy); }
.fxt-color i { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); }
.fxt-color small { display: block; font-size: 0.65rem; font-weight: 500; color: #94a3b8; }
.fxt-color.is-on { border-color: var(--gold); }
.fxt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin: 1.6rem 0 1.3rem; }
.fxt-stats div { border-left: 3px solid var(--gold); padding-left: 0.7rem; }
.fxt-stats b { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.7rem; line-height: 1; color: var(--navy); }
.fxt-stats b small { font-size: 0.95rem; color: #64748b; margin-left: 0.15rem; }
.fxt-stats span { font-size: 0.78rem; color: #64748b; display: block; margin-top: 0.25rem; }
.fxt-note { font-size: 0.72rem !important; color: #94a3b8 !important; margin-top: 1rem !important; }
@media (max-width: 960px) {
  .fxt { padding: 2.75rem 1.25rem; }
  .fxt-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .fxt-wall { height: 400px; }
  .fxt-frame { width: 150px; height: 316px; border-width: 7px; }
  .fxt-step { width: 210px; }
  .fxt-models { grid-template-columns: repeat(3, 1fr); }
  .fxt-model img { height: 64px; }
  .fxt-stats b { font-size: 1.35rem; }
}

/* ===== v2.23.0 Markise ===== */
.fxk { padding: 5rem 1.5rem; background: #fff; }
.fxk .inner { max-width: 1240px; margin: 0 auto; }
.fxk-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; }
.fxk-scene { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(15,23,42,0.18); aspect-ratio: 800 / 520; --c1: #d9c7a3; --c2: #c9b48c; }
.fxk-scene svg { display: block; width: 100%; height: 100%; }
.fxk-c1 { fill: var(--c1); } .fxk-c2 { fill: var(--c2); }
.fxk-text p { color: #475569; line-height: 1.65; margin: 0.9rem 0 0.4rem; }
.fxk-colors { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.4rem; }
.fxk-color { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.75rem 0.35rem 0.35rem; border-radius: 999px; border: 2px solid #e2e8f0; font-size: 0.84rem; font-weight: 600; color: var(--navy); }
.fxk-color i { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); }
.fxk-color.is-on { border-color: var(--gold); }
.fxk-models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 3rem; }
.fxk-model { background: #f8f9fb; border: 1px solid #e2e8f0; border-radius: 14px; padding: 1.2rem 1.3rem 1.3rem; transition: transform 0.3s, box-shadow 0.3s; }
.fxk-model:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(15,23,42,0.1); }
.fxk-model-img { height: 130px; display: flex; align-items: center; justify-content: center; margin-bottom: 0.8rem; }
.fxk-model-img img { max-height: 100%; max-width: 100%; mix-blend-mode: multiply; }
.fxk-model h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 1.4rem; margin: 0.15rem 0 0.4rem; }
.fxk-model p { font-size: 0.88rem; color: #64748b; line-height: 1.5; min-height: 2.6em; }
.fxk-dim { display: flex; gap: 1.4rem; margin-top: 0.9rem; }
.fxk-dim span { font-size: 0.75rem; color: #64748b; }
.fxk-dim b { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--navy); line-height: 1; }
@media (max-width: 960px) {
  .fxk { padding: 2.75rem 1.25rem; }
  .fxk-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .fxk-models { grid-template-columns: 1fr; gap: 0.8rem; margin-top: 2rem; }
  .fxk-model { display: grid; grid-template-columns: 110px 1fr; column-gap: 1rem; align-items: center; }
  .fxk-model-img { grid-row: 1 / span 4; height: 90px; margin: 0; }
  .fxk-model p { min-height: 0; }
}
/* v2.23.0 Systemvergleich hell (Rollläden) */
.fxm--light { background: #f8f9fb; color: var(--navy); }
.fxm--light .kt-h2 { color: var(--navy); }
.fxm--light .eyebrow { color: var(--gold-ink, #8A7412); }
.fxm--light .fxm-head p { color: #64748b; }
.fxm--light .fxm-pf { background: #fff; border-color: #e2e8f0; }
.fxm--light.is-in .fxm-pf { opacity: 0.7; }
.fxm--light.is-in .fxm-pf.is-on { opacity: 1; background: #fff; border-color: var(--gold); box-shadow: 0 14px 30px rgba(15,23,42,0.12); }
.fxm--light .fxm-pf-img img { filter: none; mix-blend-mode: multiply; }
.fxm--light .fxm-pf-name { color: var(--navy); }
.fxm--light .fxm-pf.is-on .fxm-pf-name { color: var(--gold-ink, #8A7412); }
.fxm--light .fxm-detail { box-shadow: 0 20px 50px rgba(15,23,42,0.12); }
.fxm-rooms--contain { background: #fff; border-right: 1px solid #eef1f5; }
.fxm-rooms--contain .fxm-room { object-fit: contain; padding: 1.5rem; }
.fxm--light .fxm-note { color: #94a3b8; }
/* v2.23.0 ZIP-Bauformen und Gewebefarbe */
.fxz-scene { --g: rgba(48,52,60,0.88); }
.fxz-scr i { background: var(--g) !important; }
.fxz-colors { margin-bottom: 1.4rem; }
.fxz-forms { margin-top: 3rem !important; }
.fxz-forms-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 0.6rem; }
.fxz-form { display: grid; grid-template-columns: 70px 1fr; gap: 0.9rem; align-items: center; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 0.9rem; transition: transform 0.3s, box-shadow 0.3s; }
.fxz-form:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15,23,42,0.1); }
.fxz-form img { width: 100%; height: auto; }
.fxz-form h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 1.15rem; margin: 0.1rem 0 0.25rem; }
.fxz-form p { font-size: 0.8rem; color: #64748b; line-height: 1.4; }
@media (max-width: 1100px) { .fxz-forms-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .fxz-forms-grid { grid-template-columns: 1fr; } }

/* ===== v2.23.0 Hebe-Schiebe-Tür ===== */
.fxh { padding: 5rem 1.5rem; background: #fff; }
.fxh .inner { max-width: 1240px; margin: 0 auto; }
.fxh-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3.5rem; align-items: center; }
.fxh-text p { color: #475569; line-height: 1.65; margin: 0.9rem 0 0.4rem; }
.fxh-text .fxz-list { margin: 0 0 1.4rem; }
.fxh-scene { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, #ece8e1 0%, #e2ddd4 78%, #b9a58a 78%, #a8957a 100%); box-shadow: 0 24px 60px rgba(15,23,42,0.18); }
.fxh-opening { position: absolute; left: 9%; right: 9%; top: 10%; bottom: 22%; background-size: cover; background-position: center; border: 12px solid #2f353a; border-bottom-width: 0; box-shadow: 0 10px 30px rgba(0,0,0,0.25); overflow: hidden; }
.fxh-pane { position: absolute; top: 0; bottom: 10px; width: 50%; border: 10px solid #3a4046; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08); }
.fxh-pane i { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.05) 28%, rgba(255,255,255,0) 45%, rgba(255,255,255,0.12) 60%, rgba(255,255,255,0) 72%), rgba(170,205,230,0.18); }
.fxh-fixed { left: 0; }
.fxh-sash { left: 50%; transform: translateX(calc(var(--p, 0) * -96%)); box-shadow: -6px 0 14px rgba(0,0,0,0.25); z-index: 2; border-color: #33393f; }
.fxh-handle { position: absolute; left: 4px; top: 50%; width: 8px; height: 70px; margin-top: -35px; border-radius: 4px; background: linear-gradient(90deg, #cfd4d8, #8d949a); }
.fxh-sill { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: #8d949a; }
.fxh-profile { position: absolute; right: 3%; bottom: 3%; width: 22%; max-width: 150px; filter: drop-shadow(0 10px 18px rgba(0,0,0,0.3)); opacity: calc(0.4 + var(--p, 0) * 0.6); transform: translateY(calc((1 - var(--p, 0)) * 20px)); }
@media (max-width: 960px) {
  .fxh { padding: 2.75rem 1.25rem; }
  .fxh-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .fxh-scene { order: -1; }
  .fxh-opening { border-width: 8px; }
  .fxh-pane { border-width: 6px; }
}

/* ===== v2.23.0 Falzlüfter-Strömung ===== */
.fxl { padding: 5rem 1.5rem; background: #f8f9fb; }
.fxl .inner { max-width: 1240px; margin: 0 auto; }
.fxl-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; }
.fxl-scene { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(15,23,42,0.15); background: #fff; }
.fxl-scene svg { display: block; width: 100%; height: auto; }
.fxl-t { font: 700 13px 'Barlow', sans-serif; letter-spacing: 0.12em; fill: #475569; }
.fxl-state { font-size: 12px; fill: #8a7414; }
.fxl-wind path { stroke-dasharray: 30 18; animation: fxlWind calc(1.8s - var(--w, 0) * 1.3s) linear infinite; opacity: calc(0.25 + var(--w, 0) * 0.75); }
@keyframes fxlWind { to { stroke-dashoffset: -96; } }
.fxl-parts circle { fill: #2f6f9e; }
.fxl-text p { color: #475569; line-height: 1.65; margin: 0.9rem 0 1.2rem; }
.fxl-steps { display: grid; gap: 0.6rem; margin-bottom: 1.4rem; }
.fxl-step { display: grid; grid-template-columns: 32px 1fr; gap: 0.8rem; padding: 0.8rem 0.9rem; border-radius: 10px; border: 1px solid #e2e8f0; background: #fff; opacity: 0.6; transition: opacity 0.3s, border-color 0.3s, box-shadow 0.3s; }
.fxl-step.is-on { opacity: 1; border-color: var(--gold); box-shadow: 0 10px 24px rgba(15,23,42,0.08); }
.fxl-step b { width: 32px; height: 32px; border-radius: 50%; background: #e2e8f0; display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--navy); }
.fxl-step.is-on b { background: var(--gold); }
.fxl-step strong { display: block; color: var(--navy); }
.fxl-step span { font-size: 0.86rem; color: #64748b; line-height: 1.45; }
@media (max-width: 960px) { .fxl { padding: 2.75rem 1.25rem; } .fxl-grid { grid-template-columns: 1fr; gap: 1.6rem; } }
@media (prefers-reduced-motion: reduce) { .fxl-wind path { animation: none; } }

.fxh-profile { width: 16%; max-width: 110px; }
.fxz-form { grid-template-columns: 80px 1fr; }

/* ===== v2.23.1 Animationen mobil nutzerfreundlich ===== */
.only-m { display: none; }
@media (max-width: 960px) {
  .only-d { display: none; } .only-m { display: inline; }

  /* Konfiguratoren: Bild bleibt oben stehen, während man Modelle/Farben wählt */
  .fxt-scene, .fxk-scene, .fxz-scene, .fxl-scene { position: sticky; top: 64px; z-index: 5; align-self: start; box-shadow: 0 10px 24px rgba(15,23,42,0.22); }
  .fxt-grid, .fxk-grid, .fxz-grid, .fxl-grid { align-items: start; }
  .fxt-wall { height: 280px; }
  .fxt-frame { width: 116px; height: 232px; border-width: 6px; }
  .fxt-step { width: 160px; height: 12px; }
  .fxz-scene { width: min(100%, 40vh); justify-self: center; }
  .fxt-scene .fxr-hint, .fxk-scene .fxr-hint, .fxz-scene .fxr-hint, .fxl-scene .fxr-hint { font-size: 0.68rem; top: 0.6rem; left: 0.6rem; padding: 0.25rem 0.6rem; }
  .fxk-colors .fxk-color, .fxt-color { padding-top: 0.45rem; padding-bottom: 0.45rem; }   /* größere Tippflächen */

  /* Falzlüfter: Schrift im Bild lesbar, Status steht in den Schritten */
  .fxl-t { font-size: 22px; }
  .fxl-state, .fxl-scene text[x="440"] { display: none; }
  .fxl-step { padding: 0.65rem 0.75rem; }

  /* Profilschnitt: Bild bleibt oben, darunter scrollen die Erklärungen – die aktive wird markiert */
  .fxp-grid { display: flex; flex-direction: column; gap: 0; }
  .fxp-stage { order: -1; position: sticky; top: 64px; z-index: 5; width: calc(38vh * 560 / 900); max-width: 72%; height: auto; margin: 0 auto 1rem; box-shadow: 0 0 0 100vmax #0a0f1e; clip-path: inset(-12px -100vmax -12px -100vmax); }
  .fxp-col { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 0.7rem; }
  .fxp-lab, .fxp-col--l .fxp-lab { width: 100%; max-width: none; padding: 0.85rem 0.9rem; }
  .fxp-t { display: block !important; font-size: 0.84rem; }
  .fxp-h { font-size: 0.9rem; }
  .fxp-lens { width: 46%; }

  /* Material-/Systemvergleich: keine automatische Umschaltung, Auswahl-Leiste bleibt oben */
  .fxm-line { position: sticky; top: 60px; z-index: 6; margin: 0 -1.25rem 1rem; padding: 0.55rem 1.25rem; background: #0e1527; gap: 0.4rem; }
  .fxm--light .fxm-line { background: #f8f9fb; box-shadow: 0 6px 12px rgba(15,23,42,0.06); }
  .fxm-pf { padding: 0.4rem 0.15rem; gap: 0.25rem; }
  .fxm.is-in .fxm-pf, .fxm.is-in .fxm-pf.is-on { transform: none; }
  .fxm-pf-img { height: 58px; }
  .fxm-pf.is-on .fxm-pf-img img { transform: none; }
  .fxm-pf-name { font-size: 0.72rem; line-height: 1.1; }
  .fxm-rooms { height: 170px; }
  .fxm-uw-top { flex-wrap: wrap; gap: 0 0.6rem; }
}
@media (max-width: 960px) {
  .fxp, .fxm, .fxt, .fxk, .fxz, .fxl { overflow: visible; overflow-x: clip; }
}
@media (max-width: 960px) {
  .fxp-stage, .fxp.is-scroll .fxp-stage { box-shadow: 0 12px 24px rgba(0,0,0,0.5); clip-path: none; }
  .fxp-stage::before { content: ""; position: absolute; top: -14px; bottom: -14px; left: -100vw; right: -100vw; background: #0a0f1e; z-index: -1; }
  .fxp-stage::after { content: ""; position: absolute; inset: 0; border-radius: 16px; background: #fff; z-index: -1; }
}
/* v2.23.2 Hebe-Schiebe-Tür bodentief */
.fxh-scene { aspect-ratio: 5 / 4; background: linear-gradient(180deg, #ece8e1 0%, #e2ddd4 84%, #b9a58a 84%, #a8957a 100%); }
.fxh-opening { left: 12%; right: 12%; top: 5%; bottom: 16%; border-width: 12px 12px 0; background-position: center 70%; }
.fxh-pane { bottom: 6px; border-bottom-width: 14px; }
.fxh-sill { height: 6px; background: linear-gradient(180deg, #a3aab0, #6f767c); }
.fxh-scene::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: calc(16% - 10px); height: 10px; background: #8d949a; border-radius: 2px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
.fxh-handle { height: 90px; margin-top: -45px; }
.fxh-profile { width: 13%; max-width: 90px; right: 2%; bottom: 2%; z-index: 3; }
@media (max-width: 960px) { .fxh-profile { display: none; } }
.fxh-profile { display: none !important; }