/* ==========================================================================
   KCC – Funnel-Ausbau (Paket FX, 21.10.2026)  –  Datei: /assets/css/kcc-fx.css
   Teil 1 = die Regeln der Startseite (index.php) fuer die Bloecke, die jetzt auch im Funnel stehen: Farben, Services, Preise, Zig-Zag.
   Teil 2 = Immobilien-Block, Detail-Fenster und Anker-Leiste.
   ========================================================================== */
    :root {
        --theme-primary: #EBCB72;
        --theme-bg-panel: linear-gradient(180deg,rgba(28,23,15,.9),rgba(13,11,8,.92));
        --border-color: rgba(233,197,106,0.18);
        --gold-gradient: linear-gradient(135deg, #F9E596 0%, #EBCB72 40%, #B07F2A 100%);
    }
    .gradient-text { background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
    .s-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 30px; position: relative; z-index: 10; }
    .s-card { background: var(--theme-bg-panel); border: 1px solid var(--border-color); border-radius: 20px; padding: 45px 35px; text-align: center; position: relative; transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 20px 50px rgba(0,0,0,0.5); display: flex; flex-direction: column; align-items: center; backdrop-filter: blur(15px); z-index: 10;}
    .s-card:hover { transform: translateY(-10px); border-color: var(--theme-primary); box-shadow: 0 30px 60px rgba(233,197,106,0.2); }
    .s-icon-box { width: 85px; height: 85px; background: rgba(235,203,114,0.08); border: 1px solid rgba(233,197,106,0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; transition: 0.4s; }
    .s-card:hover .s-icon-box { background: rgba(235,203,114,0.2); border-color: var(--theme-primary); transform: scale(1.05); }
    .s-icon-box i { font-size: 2.2rem; color: var(--theme-primary); }
    .s-title { font-size: 1.5rem; font-weight: 900; color: #F3ECDD; margin: 0 0 15px 0; text-transform: uppercase; letter-spacing: 0.5px; }
    .s-desc { color: #B6A98E; font-size: 0.95rem; line-height: 1.7; margin-bottom: 30px; flex-grow: 1; }
    .s-btn { display: inline-flex; align-items: center; gap: 10px; background: transparent; color: var(--theme-primary); border: 1px solid rgba(233,197,106,0.4); padding: 12px 28px; border-radius: 50px; font-weight: 700; font-size: 0.85rem; text-decoration: none; text-transform: uppercase; transition: 0.3s; cursor: pointer; }
    .s-btn:hover { background: var(--theme-primary); color: #000; border-color: var(--theme-primary); box-shadow: 0 0 20px rgba(235,203,114,0.4); }
    /* ? GOD-MODE PREIS WIDGET ? */
    .w-cur-btn { background: transparent; color: #B6A98E; border: none; padding: 8px 20px; border-radius: 50px; font-weight: 700; cursor: pointer; transition: 0.3s; font-family: 'Sora', sans-serif;}
    .w-cur-btn.active { background: var(--theme-primary); color: #000; box-shadow: 0 0 10px rgba(235,203,114,0.4); }
    .wp-card { background: var(--theme-bg-panel); border: 1px solid var(--border-color); border-radius: 20px; padding: 40px 30px; position: relative; transition: 0.3s; box-shadow: 0 15px 40px rgba(0,0,0,0.5); display: flex; flex-direction: column; text-align: left; backdrop-filter: blur(15px); z-index: 10;}
    .wp-card:hover { transform: translateY(-10px); border-color: var(--theme-primary); box-shadow: 0 25px 50px rgba(233,197,106,0.2); }
    .wp-card.highlight { border: 2px solid var(--theme-primary); background: linear-gradient(180deg, rgba(25,20,10,0.95), rgba(10,10,10,0.98)); box-shadow: 0 20px 50px rgba(235,203,114,0.25); transform: scale(1.02); }
    .wp-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--gold-gradient); color: #000; padding: 5px 20px; border-radius: 50px; font-weight: 900; font-size: 0.8rem; text-transform: uppercase; box-shadow: 0 5px 15px rgba(216,160,55,0.4); white-space: nowrap;}
    .wp-header { text-align: center; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 25px; margin-bottom: 25px; }
    .wp-icon { font-size: 2.5rem; color: var(--theme-primary); margin-bottom: 15px; }
    .wp-title { font-size: 1.5rem; font-weight: 800; color: #F3ECDD; margin: 0 0 10px 0; text-transform: uppercase; }
    .wp-price { font-size: 3rem; font-weight: 900; color: var(--theme-primary); margin: 0; line-height: 1; display: flex; justify-content: center; align-items: baseline; }
    .wp-sym { font-size: 1.5rem; opacity: 0.8; margin-right: 5px; }
    .wp-cycle { font-size: 0.85rem; color: #B6A98E; text-transform: uppercase; font-weight: 600; margin-top: 5px; }
    .wp-features { list-style: none; padding: 0; margin: 0 0 30px 0; flex-grow: 1; }
    .wp-features li { display: flex; align-items: flex-start; gap: 10px; color: #B6A98E; font-size: 0.95rem; line-height: 1.5; margin-bottom: 15px; }
    .wp-features li i { color: #00ff88; margin-top: 3px; font-size: 0.8rem; }
    /* ⚡ NEU: ZIG-ZAG ÖKOSYSTEM ERWEITERUNG ⚡ */
    .zz-row { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; margin-bottom: 80px; }
    .zz-row:last-child { margin-bottom: 0; }
    .zz-text { padding: 20px; }
    .zz-img-box { position: relative; border-radius: 24px; overflow: hidden; border: 1px solid var(--border-color); box-shadow: 0 25px 60px rgba(0,0,0,0.6); background: #0a0806; }
    .zz-img-box img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
    .zz-row:hover .zz-img-box img { transform: scale(1.05); }
    .zz-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 50px; background: rgba(233,197,106,0.1); border: 1px solid rgba(233,197,106,0.3); color: var(--theme-primary); font-size: 0.85rem; font-weight: 900; text-transform: uppercase; margin-bottom: 20px; letter-spacing: 1px; }
    .zz-h2 { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 900; color: #F3ECDD; margin: 0 0 20px 0; line-height: 1.2; text-transform: uppercase; font-family: 'Sora', sans-serif;}
    .zz-desc { font-size: 1.1rem; color: #B6A98E; line-height: 1.6; margin-bottom: 35px; }
    
    .btn-gold-zz { height: 54px; background: var(--gold-gradient); color: #000; border: none; padding: 0 35px; border-radius: 12px; font-weight: 900; cursor: pointer; transition: 0.3s; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 1.05rem; text-transform: uppercase; box-shadow: 0 10px 25px rgba(216,160,55,0.3); text-decoration: none; font-family: 'Sora', sans-serif;}
    .btn-gold-zz:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(233,197,106,0.5); filter: brightness(1.1); }

    @media (max-width: 992px) { 
        .zz-row { grid-template-columns: 1fr; gap: 30px; margin-bottom: 60px; }
        .zz-row.reverse .zz-img-box { order: -1; } /* Auf Mobile ist das Bild immer oben */
    }

/* ==========================================================================
   Eigene Bausteine des Funnel-Ausbaus: Immobilien-Block, Detail-Fenster, Anker-Leiste
   ========================================================================== */
.kfx-sec{position:relative;z-index:10;padding:clamp(56px,8vw,100px) clamp(16px,4vw,40px);box-sizing:border-box}
.kfx-wrap{max-width:1180px;margin:0 auto}
.kfx-head{text-align:center;max-width:720px;margin:0 auto clamp(36px,5vw,52px)}
.kfx-badge{font-size:12.5px;letter-spacing:3px;color:#B07F2A;font-weight:600;text-transform:uppercase;margin-bottom:16px}
.kfx-h2{font-family:Sora,sans-serif;font-weight:800;font-size:clamp(28px,4vw,46px);line-height:1.08;letter-spacing:-.5px;margin:0 0 14px;color:#F3ECDD}
.kfx-intro{font-size:16px;color:#B6A98E;line-height:1.6}
.kfx-intro p{margin:0}

.kfx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:999px;font-family:inherit;font-weight:700;font-size:14.5px;line-height:1.2;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .25s,box-shadow .25s,background .25s,color .25s;box-sizing:border-box;text-align:center}
.kfx-btn-gold{background:linear-gradient(135deg,#F9E596 0%,#EBCB72 40%,#B07F2A 100%);color:#1a1206;box-shadow:0 10px 28px rgba(216,160,55,.3)}
.kfx-btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(216,160,55,.45)}
.kfx-btn-ghost{background:transparent;color:#EBCB72;border-color:rgba(233,197,106,.45)}
.kfx-btn-ghost:hover{background:rgba(233,197,106,.12)}
.kfx-btn:focus-visible,.kfx-bar-i:focus-visible,.kfx-m-nav:focus-visible,.kfx-m-th:focus-visible{outline:2px solid #EBCB72;outline-offset:2px}

.kfx-re-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:26px}
/* NEU 22.10.2026 (Paket FM, N398): Hinweis-Kasten, wenn im Funnel keine Immobilie eingestellt ist (Titel bleibt stehen) */
.kfx-re-empty{max-width:720px;margin:0 auto;padding:clamp(24px,4vw,40px) clamp(18px,4vw,36px);text-align:center;border:1px dashed rgba(233,197,106,.4);border-radius:20px;background:rgba(233,197,106,.05);box-sizing:border-box}
.kfx-re-empty i{display:block;font-size:2rem;color:#EBCB72;margin:0 0 14px}
.kfx-re-empty p{margin:0;color:#B6A98E;font-size:1rem;line-height:1.65;overflow-wrap:anywhere}
.kfx-re-card{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:linear-gradient(180deg,rgba(28,23,15,.92),rgba(13,11,8,.96));border:1px solid rgba(233,197,106,.22);box-shadow:0 18px 50px rgba(0,0,0,.4);transition:transform .35s,border-color .35s,box-shadow .35s;min-width:0}
.kfx-re-card:hover{transform:translateY(-6px);border-color:#EBCB72;box-shadow:0 26px 60px rgba(233,197,106,.16)}
.kfx-re-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0a0806}
.kfx-re-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.kfx-re-card:hover .kfx-re-img img{transform:scale(1.05)}
.kfx-re-noimg{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:160px;background:linear-gradient(135deg,#1c170f,#0d0b08);color:rgba(233,197,106,.45);font-size:54px}
.kfx-re-pill,.kfx-re-tag{position:absolute;top:14px;padding:6px 14px;border-radius:999px;font-weight:800;font-size:11px;letter-spacing:1px;text-transform:uppercase}
.kfx-re-pill{left:14px;background:linear-gradient(180deg,#F6DC8E,#B07F2A);color:#1a1206}
.kfx-re-tag{right:14px;background:rgba(10,8,6,.82);color:#EBCB72;border:1px solid rgba(233,197,106,.45);max-width:50%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kfx-re-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.kfx-re-loc{color:#9f937c;font-size:13.5px}
.kfx-re-loc i{color:#EBCB72;margin-right:4px}
.kfx-re-title{font-family:Sora,sans-serif;font-size:20px;line-height:1.25;font-weight:800;margin:0;color:#F3ECDD;overflow-wrap:anywhere}
.kfx-re-type{font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;color:#B07F2A;font-weight:600}
.kfx-re-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px}
.kfx-re-facts li{display:flex;flex-direction:column;gap:2px;padding:9px 10px;border-radius:12px;background:rgba(233,197,106,.06);border:1px solid rgba(233,197,106,.14);font-size:12px;color:#9f937c;min-width:0}
.kfx-re-facts li i{color:#EBCB72;font-size:13px}
.kfx-re-facts li b{color:#F3ECDD;font-size:14.5px;font-weight:800}
.kfx-re-price{font-family:Sora,sans-serif;font-size:24px;font-weight:800;background:linear-gradient(180deg,#FBE9A6,#B07F2A);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;margin-top:2px}
.kfx-re-price small,.kfx-m-price small{font-size:15px;font-weight:600;-webkit-text-fill-color:#B6A98E;color:#B6A98E}
.kfx-re-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:6px}
.kfx-re-actions .kfx-btn{flex:1 1 auto;padding:0 14px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.kfx-re-all{text-align:center;margin-top:clamp(28px,4vw,46px)}

/* Detail-Fenster */
.kfx-modal{position:fixed;inset:0;z-index:2147483000;display:none;align-items:center;justify-content:center;padding:clamp(8px,3vw,28px);background:rgba(4,3,2,.84);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-sizing:border-box}
.kfx-modal.open{display:flex}
.kfx-modal-box{position:relative;width:100%;max-width:1040px;max-height:min(94vh,900px);overflow:auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:linear-gradient(180deg,#1c170f,#0d0b08);border:1px solid rgba(233,197,106,.4);border-radius:22px;box-shadow:0 40px 100px rgba(0,0,0,.8);-webkit-overflow-scrolling:touch}
.kfx-x{position:absolute;top:12px;right:12px;z-index:6;width:45px;height:45px;border-radius:50%;background:rgba(10,8,6,.7);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:transform .3s,background .3s}
.kfx-x:hover{background:#c0392b;transform:rotate(90deg)}
.kfx-m-gal{padding:16px;min-width:0}
.kfx-m-main{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#0a0806}
.kfx-m-main img{width:100%;height:100%;object-fit:cover;display:block}
.kfx-m-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid rgba(233,197,106,.6);background:rgba(10,8,6,.7);color:#EBCB72;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:15px;padding:0}
.kfx-m-nav:hover{background:#EBCB72;color:#000}
.kfx-m-prev{left:10px}.kfx-m-next{right:10px}
.kfx-m-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.kfx-m-th{flex:0 0 74px;height:56px;border-radius:10px;overflow:hidden;border:2px solid transparent;padding:0;background:#0a0806;cursor:pointer;opacity:.7}
.kfx-m-th.on,.kfx-m-th:hover{border-color:#EBCB72;opacity:1}
.kfx-m-th img{width:100%;height:100%;object-fit:cover;display:block}
.kfx-m-info{padding:clamp(18px,3vw,30px) clamp(18px,3vw,30px) clamp(18px,3vw,30px) 8px;display:flex;flex-direction:column;gap:10px;min-width:0}
.kfx-m-kind{font-size:12.5px;letter-spacing:2px;text-transform:uppercase;color:#B07F2A;font-weight:700;padding-right:52px}
.kfx-m-title{font-family:Sora,sans-serif;font-size:clamp(22px,3vw,28px);line-height:1.2;font-weight:800;margin:0;color:#F3ECDD;overflow-wrap:anywhere}
.kfx-m-price{font-family:Sora,sans-serif;font-size:28px;font-weight:800;background:linear-gradient(180deg,#FBE9A6,#B07F2A);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.kfx-m-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:4px 0 0}
.kfx-m-grid div{padding:9px 12px;border-radius:12px;background:rgba(233,197,106,.06);border:1px solid rgba(233,197,106,.14)}
.kfx-m-grid dt{font-size:11.5px;color:#9f937c;text-transform:uppercase;letter-spacing:1px}
.kfx-m-grid dd{margin:2px 0 0;font-size:15px;font-weight:800;color:#F3ECDD}
.kfx-m-h{font-size:12.5px;letter-spacing:2px;text-transform:uppercase;color:#EBCB72;margin:10px 0 0;font-weight:700}
.kfx-m-desc{margin:0;color:#B6A98E;font-size:14.5px;line-height:1.65}
.kfx-m-feat{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.kfx-m-feat li{padding:6px 12px;border-radius:999px;font-size:12.5px;color:#F3ECDD;background:rgba(233,197,106,.08);border:1px solid rgba(233,197,106,.22)}
.kfx-m-act{margin-top:10px;padding-top:6px}
.kfx-m-act .kfx-btn{width:100%}
body.kfx-lock{overflow:hidden}
/* solange das Detail-Fenster offen ist, bleibt der schwebende Chat-Knopf (Berater-Widget) weg – sonst verdeckt er am Handy Teile des Fensters */
body.kfx-lock #mblSupportWidget{display:none!important}

/* Anker-Leiste im Funnel */
.kfx-bar{position:sticky;top:var(--kfx-hh,76px);z-index:900;background:rgba(10,8,6,.93);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(233,197,106,.16);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.kfx-bar-in{display:flex;gap:8px;overflow-x:auto;padding:9px clamp(12px,3vw,32px);max-width:1400px;margin:0 auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;justify-content:center}
.kfx-bar-in::-webkit-scrollbar{display:none}
.kfx-bar-i{flex:0 0 auto;display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border-radius:999px;border:1px solid rgba(233,197,106,.25);color:#B6A98E;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.kfx-bar-i:hover{border-color:#EBCB72;color:#EBCB72}
.kfx-bar-i.on{background:linear-gradient(135deg,#F9E596,#EBCB72 45%,#B07F2A);color:#1a1206;border-color:transparent}
body.kfx-has-bar section[id]{scroll-margin-top:calc(var(--kfx-hh,76px) + 62px)}

@media (max-width:820px){
  .kfx-modal-box{grid-template-columns:minmax(0,1fr);max-height:94vh}
  .kfx-m-info{padding:6px 18px 22px}
  .kfx-m-kind{padding-right:0;margin-top:2px}
  .kfx-bar-in{justify-content:flex-start}
}
@media (max-width:480px){
  .kfx-re-grid{gap:18px}
  .kfx-m-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .kfx-re-actions .kfx-btn{flex:1 1 100%;white-space:normal}
}
@media (pointer:coarse){ .kfx-bar-i{min-height:44px} }
@media (prefers-reduced-motion:reduce){ .kfx-re-card,.kfx-re-img img,.kfx-btn,.kfx-x{transition:none!important} .kfx-re-card:hover{transform:none} }