/* Spvgg Weil der Stadt – Seite Spielstätten (#krs). Aus dem HTML-Baustein übernommen (13.10.2026). Gilt nur, wenn das Element auf der Seite steht. */
/* Seitenlayout: Inhalt volle Breite, Seitenleiste aus */
body:has(#krs) .content .col-md-8,body:has(#krs) .business-page .col-md-8{width:100%!important;max-width:100%!important;flex:0 0 100%!important}
body:has(#krs) .content .col-md-4,body:has(#krs) .business-page .col-md-4{display:none!important}
body:has(#krs) .content .col-md-8 .content-box{padding:0!important;overflow:hidden}

/* Grundlagen (wie Kunstrasen-Aktion) */
.krx{--navy:#14295c;--blue:#3361ab;--ink:#1d2a3a;--mut:#56637a;--soft:#eef2f8;--line:#d6deeb;--red:#e3000f;--grass:#2f8f46;--card:#fff;--r-rasen:#1f4da0;--r-kura:#e3000f;--r-heim:#f0a500;color:var(--ink);font-family:"AdobeClean-Regular",Arial,sans-serif;font-size:17px;line-height:1.55;counter-reset:sec}
.krx *{box-sizing:border-box}
.krx p,.krx span,.krx b,.krx a,.krx li,.krx summary{font-family:"AdobeClean-Regular",Arial,sans-serif}
.krx h2,.krx h3,.krx .krx-btn,.krx .krx-big{font-family:United,sans-serif!important;letter-spacing:.5px;text-transform:uppercase;font-weight:400}
.krx h2{font-size:40px!important;line-height:1.05!important;color:var(--navy);margin:0 0 14px!important;padding:0!important}
.krx h3{font-size:20px!important;line-height:1.15!important;color:var(--navy);margin:0!important;padding:0!important}
.krx p{margin:0 0 12px!important;padding:0!important}
.krx-sec{padding:32px 64px}
.krx-hero+.krx-sec{padding-top:56px}
.krx-sec:last-of-type{padding-bottom:64px}
.krx-kicker{display:block;font-family:"AdobeClean-Bold",Arial,sans-serif!important;font-size:13px;letter-spacing:1.6px;text-transform:uppercase;color:var(--blue);margin:0 0 8px!important}
.krx .krx-intro{font-size:18px!important;color:var(--ink)}
.krx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;padding:15px 26px;font-size:18px;line-height:1;text-decoration:none!important;cursor:pointer;border:2px solid transparent;transition:transform .15s,background .15s}
.krx-btn:hover{transform:translateY(-2px)}
.krx-btn-p{background:var(--blue);color:#fff!important;box-shadow:0 8px 20px rgba(51,97,171,.3)}
.krx-btn-p:hover{background:#2a5293}
.krx-btn-g{border-color:var(--navy);color:var(--navy)!important;background:transparent}
.krx-medal{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;flex:none;background:rgba(255,255,255,.25);color:inherit;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.krx-medal svg{width:28px;height:28px}
.krx-medal b{font-family:United,sans-serif!important;font-weight:400;font-size:26px;line-height:1}

/* Einstieg */
.krx-hero{position:relative;overflow:hidden;padding:72px 64px 64px;background:linear-gradient(135deg,#f4f7fc,#e6edf8);color:var(--navy)}
.krx-lines{position:absolute;right:-120px;bottom:-60px;width:520px;opacity:.07;stroke:var(--navy);pointer-events:none}
.krx-hero-in{position:relative;z-index:1;display:grid;gap:24px 40px;align-items:center;grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"t p" "c p"}
.krx-hero-txt{grid-area:t}
.krx-cta{grid-area:c;align-self:start;display:flex;flex-wrap:wrap;gap:10px}
.krx-cta a{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:99px;background:#fff;border:2px solid var(--line);color:var(--navy)!important;text-decoration:none!important;font-family:United,sans-serif!important;text-transform:uppercase;font-size:15px;letter-spacing:.5px;transition:transform .15s,border-color .15s}
.krx-cta a:hover{transform:translateY(-2px);border-color:var(--blue)}
.krx-cta a i{font-style:normal;color:var(--blue)}
.krx-hero h2{font-size:68px!important;line-height:.95!important;margin-bottom:18px!important;max-width:640px}
.krx .krx-sub{font-size:19px!important;max-width:none;margin:0!important;color:var(--mut)}
.krx-addr{grid-area:p;background:#fff;border-radius:18px;padding:24px;box-shadow:0 12px 30px rgba(20,41,92,.12);text-align:center}
.krx-addr .krx-pin{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:var(--blue);color:#fff;margin-bottom:12px}
.krx-addr .krx-pin svg{width:28px;height:28px}
.krx-addr .krx-big{display:block;font-size:30px;line-height:1;color:var(--navy)}
.krx-addr small{display:block;font-size:15px;color:var(--mut);margin:6px 0 16px}
.krx-addr .krx-btn{width:100%;padding:13px 18px;font-size:16px}

/* Anfahrt und Kabinen: farbige Karten */
.krx-ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
.krx-way{position:relative;border-radius:20px;padding:26px 24px 24px;color:#fff;display:flex;flex-direction:column;align-items:flex-start;gap:10px;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.15)}
.krx .krx-way h3{color:#fff;font-size:24px!important}
.krx .krx-way p{font-size:16px!important;line-height:1.5;color:rgba(255,255,255,.92)!important;margin:0!important}
.krx-way-b{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:6px}
.krx-way .krx-btn{padding:11px 18px;font-size:15px;background:#fff;color:var(--navy)!important}
.krx-way .krx-btn-o{background:transparent;border-color:rgba(255,255,255,.7);color:#fff!important}
.w-auto{background:linear-gradient(160deg,#5b8be0,#24479a)}
.w-bahn{background:linear-gradient(160deg,#ff8a45,#e8530f)}
.w-bahn .krx-btn{background:#fff;color:#14295c!important}
.w-bahn .krx-btn.krx-btn-o{background:transparent;border-color:rgba(255,255,255,.75);color:#fff!important}
.krx-vvs svg{width:22px;height:22px;flex:none;border-radius:5px;box-shadow:0 0 0 1px rgba(20,41,92,.15)}
.krx .krx-sec{scroll-margin-top:130px}
@media (max-width:767px){.krx .krx-sec{scroll-margin-top:60px}}
.w-kabine{background:linear-gradient(160deg,#2c4d94,#14295c)}

/* Parken */
.krx-parks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px}
.krx-park{display:flex;gap:16px;align-items:flex-start;background:var(--card);border-radius:14px;padding:18px;box-shadow:0 8px 22px rgba(20,41,92,.1)}
.krx-park .krx-medal{width:46px;height:46px;background:var(--blue);color:#fff;box-shadow:none}
.krx-park .krx-medal b{font-size:22px}
.krx .krx-park h3{font-size:19px!important;margin-bottom:4px!important}
.krx .krx-park p{font-size:15px!important;color:var(--mut);margin:0!important}
.krx-tag{display:inline-block;font-family:"AdobeClean-Bold",Arial,sans-serif!important;font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--blue);background:var(--soft);border-radius:99px;padding:3px 10px;margin-top:8px}

/* Kabinen */
.krx-kab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:24px}
.krx-kab-r{background:var(--card);border-radius:20px;padding:24px;box-shadow:0 8px 22px rgba(20,41,92,.1);display:flex;flex-direction:column;gap:12px}
.krx .krx-kab-r p{font-size:15px!important;color:var(--mut);margin:0!important}
.krx-go{display:flex;flex-direction:column;gap:8px}
.krx-go a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--soft);color:var(--navy)!important;text-decoration:none!important;font-family:"AdobeClean-Bold",Arial,sans-serif!important;font-size:15px;transition:transform .15s}
.krx-go a:hover{transform:translateX(4px)}
.krx-go a i{flex:none;width:28px;height:6px;border-radius:3px;background:var(--c)}
.krx-go a span{margin-left:auto;color:var(--blue)}
.krx-warn{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:14px;background:#fff1f2;color:#7a0b12}
.krx-warn svg{flex:none;width:26px;height:26px;color:var(--red)}
.krx .krx-warn p{margin:0!important;font-size:15px!important;color:#7a0b12}
.krx-warn b{font-family:"AdobeClean-Bold",Arial,sans-serif!important}

/* Lageplan */
.krx-planwrap{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:20px;margin-top:22px;align-items:start}
.krx-planbox{border-radius:16px;overflow:hidden;border:2px solid #e3e8f1;background:#e9efe4}
.krs-plan{display:block;width:100%;height:auto;max-height:900px;margin:0 auto}
.krs-plan .bg{fill:#e9efe4}
.krs-plan .rd{fill:none;stroke:#fff;stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.krs-plan .rd2{stroke-width:17}
.krs-plan .gel{fill:#dbe8d3;stroke:#93b08d;stroke-width:1.5;stroke-dasharray:6 5}
.krs-plan .pk{fill:#f6f8fb;stroke:#c4cede}
.krs-plan .bd{fill:#d3d9e3;stroke:#b8c1d0}
.krs-plan .bh{fill:#14295c}
.krs-plan .tr{fill:#b8c1d0}
.krs-plan .gu{fill:#c8553d}
.krs-plan .te{fill:#cf8a5c}
.krs-plan .ku{fill:#2f8f46}
.krs-plan .ra{fill:#58b66c}
.krs-plan .sand{fill:#dcc9a6;stroke:#c9b28a}
.krs-plan .pl{fill:none;stroke:rgba(255,255,255,.75);stroke-width:2}
.krs-plan .pit{fill:#fff;opacity:.85}
.krs-plan .trk{fill:#c8553d}
.krs-plan .dgr{fill:#7fc98f}
.krs-plan .lane{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.2;stroke-dasharray:4 4}
.krs-plan .wp{fill:none;stroke:#e6dcc6;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.krs-plan .lb{font-family:United,sans-serif;font-size:21px;letter-spacing:1px;fill:#fff;pointer-events:none}
.krs-plan .lbd{fill:#14295c}
.krs-plan .lbs{font-size:15px}
.krs-plan .rh{fill:none;stroke:#fff;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.krs-plan .r{fill:none;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 12;animation:krsdash .9s linear infinite}
.krs-plan .r-rasen{stroke:var(--r-rasen)}.krs-plan .r-kura{stroke:var(--r-kura)}.krs-plan .r-heim{stroke:var(--r-heim)}
@keyframes krsdash{to{stroke-dashoffset:-13}}
.krs-plan .rt g{transition:opacity .2s}
.krs-plan[data-show="rasen"] .rt g:not(.g-rasen),.krs-plan[data-show="kura"] .rt g:not(.g-kura),.krs-plan[data-show="heim"] .rt g:not(.g-heim){opacity:.08}
.krs-plan .mk circle{stroke:#fff;stroke-width:3}
.krs-plan .mk text{font-family:Arial,sans-serif;font-weight:700;font-size:18px;fill:#fff;text-anchor:middle;dominant-baseline:central}
.krs-plan .m0 circle{fill:#14295c}.krs-plan .m1 circle{fill:var(--r-rasen)}.krs-plan .m2 circle{fill:var(--r-kura)}.krs-plan .m3 circle{fill:var(--r-heim)}.krs-plan .mp circle{fill:#3361ab}
.krx-attr{display:block;font-size:12px;color:var(--mut);padding:6px 12px;background:#fff;border-top:1px solid #e3e8f1}
.krx-side{display:flex;flex-direction:column;gap:14px}
.krx-rbtns{display:flex;flex-direction:column;gap:8px}
.krx-rbtns button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;border-radius:12px;border:2px solid var(--line);background:var(--card);color:var(--navy);font-family:"AdobeClean-Bold",Arial,sans-serif;font-size:15px;cursor:pointer;transition:border-color .15s,background .15s}
.krx-rbtns button i{flex:none;width:28px;height:6px;border-radius:3px;background:var(--c,#14295c)}
.krx-rbtns button.on{border-color:var(--navy);background:var(--soft)}
.krx-legend{list-style:none;margin:0!important;padding:14px 16px!important;border-radius:14px;background:var(--card);border:2px solid #e3e8f1;display:grid;gap:7px}
.krx .krx-legend li{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.3;margin:0;padding:0;color:var(--ink)}
.krx-legend li::before{display:none}
.krx-legend b{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--c,#14295c);color:#fff;font:700 12px Arial,sans-serif}
.krx-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:16px}
.krx-nav a{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:12px;border:2px solid var(--line);background:var(--card);color:var(--navy)!important;text-decoration:none!important;font-family:"AdobeClean-Bold",Arial,sans-serif!important;font-size:15px;line-height:1.25;transition:transform .15s,border-color .15s}
.krx-nav a:hover{transform:translateY(-2px);border-color:var(--blue)}
.krx-nav i{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;font-style:normal;font-family:United,sans-serif;font-size:17px}
.krx-nav i svg{width:18px;height:18px}
.krx-gmap{margin-top:16px;border-radius:14px;border:2px solid #e3e8f1;background:var(--card);overflow:hidden}
.krx-gmap summary{cursor:pointer;list-style:none;padding:14px 18px;font-family:"AdobeClean-Bold",Arial,sans-serif!important;color:var(--navy)}
.krx-gmap summary::-webkit-details-marker{display:none}
.krx-gmap summary::after{content:" +";color:var(--blue)}
.krx-gmap[open] summary::after{content:" –"}
.krx-gmap iframe{display:block;width:100%;height:440px;border:0}
.krx .krx-contact{margin:28px 0 0!important;font-size:16px!important}
.krx-contact a{color:var(--blue);font-family:"AdobeClean-Bold",Arial,sans-serif!important}

.krx-planbox{position:relative}
.krs-plan .dimr{fill:#fff;opacity:0;pointer-events:none;transition:opacity .25s}
.krs-plan.focus .dimr{opacity:.68}
.krs-plan .pm{transition:opacity .25s;cursor:pointer}
.krs-plan.focus .pm{opacity:.15}
.krs-plan.focus .pm.on{opacity:1}
.krs-plan .hlg path{fill:rgba(51,97,171,.35);stroke:#3361ab;stroke-width:3;stroke-dasharray:7 5}
.krx-focus{display:none;position:absolute;left:12px;top:12px;z-index:3;width:300px;max-width:calc(100% - 24px);background:#fff;border-radius:14px;padding:16px 18px;box-shadow:0 12px 30px rgba(20,41,92,.28)}
.krx-focus.show{display:block}
.krx-focus .krx-ft{display:block;font-family:United,sans-serif!important;font-weight:400;text-transform:uppercase;letter-spacing:.5px;font-size:19px;line-height:1.15;color:var(--navy);padding-right:26px}
.krx .krx-focus .krx-fd{font-size:14px!important;color:var(--mut);margin:6px 0 12px!important}
.krx-focus .krx-btn{width:100%;padding:12px 16px;font-size:15px}
.krx-fx{position:absolute;top:8px;right:8px;width:30px;height:30px;border:0;border-radius:50%;background:var(--soft);color:var(--navy);font-size:20px;line-height:1;cursor:pointer}
.krx-nav a.on{border-color:var(--navy);background:var(--soft)}
.krx-nav i.nv-e{background:#e9d9b4;color:#14295c;border-radius:8px}
.krx-nav i.nv-k{background:#e3000f}
@media (max-width:767px){.krx-focus{position:static;margin:8px;width:auto;max-width:none;padding:12px 14px;box-shadow:none;border:2px solid var(--line)}}
.krx-planbox .krs-plan{max-height:none;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.krx-planbox.zoomed .krs-plan{touch-action:none}
.krx-planbox .krs-plan:active{cursor:grabbing}
.krx-zoom{position:absolute;top:10px;right:10px;z-index:2;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:calc(100% - 20px)}
.krx-zoom button{min-width:40px;height:40px;padding:0 12px;border-radius:10px;border:2px solid var(--line);background:#fff;color:var(--navy);font-family:"AdobeClean-Bold",Arial,sans-serif;font-size:14px;line-height:1;cursor:pointer;box-shadow:0 4px 12px rgba(20,41,92,.15)}
.krx-zoom button[data-z="in"],.krx-zoom button[data-z="out"]{font-size:22px;padding:0}
.krx-zoom button:hover{border-color:var(--blue)}
.krs-plan .o-lr{fill:#e4e2db}.krs-plan .o-li{fill:#e2dee7}.krs-plan .o-lg{fill:#d5e6c8}.krs-plan .o-lf{fill:#bfd8b0}.krs-plan .o-ls{fill:#ece4d4}.krs-plan .o-lp{fill:#cfe7bd}.krs-plan .o-pt{fill:#8fcf9c}
.krs-plan .o-kg{fill:#f5dfae;stroke:#ddb45f;stroke-width:1.5}.krs-plan .o-pk{fill:#f6f8fb;stroke:#c4cede}.krs-plan .o-wa{fill:#a9d3ef}
.krs-plan .o-ws{fill:none;stroke:#a9d3ef;stroke-width:4;stroke-linecap:round}.krs-plan .o-wr{fill:none;stroke:#9cc9e8;stroke-width:11;stroke-linecap:round;stroke-linejoin:round}
.krs-plan .o-fw{fill:none;stroke:#f8f5ee;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.krs-plan .o-r3,.krs-plan .o-r1,.krs-plan .o-r2{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round}.krs-plan .o-r3{stroke-width:7}.krs-plan .o-r1{stroke-width:12}.krs-plan .o-r2{stroke-width:17}
.krs-plan .o-rl{fill:none;stroke:#8f97a8;stroke-width:4;stroke-dasharray:14 6}.krs-plan .o-bd{fill:#d3d9e3;stroke:#b8c1d0;stroke-width:1}
.krs-plan .lbx{font-size:13px;letter-spacing:.5px}
.krs-plan .pkh path{fill:rgba(51,97,171,.22);stroke:#3361ab;stroke-width:2.5;stroke-dasharray:7 5;stroke-linejoin:round}
.krs-plan .wc{fill:none;stroke:#fff;stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.krs-plan .wl{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.krs-plan .pm rect,.krs-plan .pm circle{stroke:#fff;stroke-width:3}
.krs-plan .pm-p rect{fill:#3361ab}.krs-plan .pm-e rect{fill:#e9d9b4}.krs-plan .pm-k circle{fill:#e3000f}
.krs-plan .pm text{font-family:Arial,sans-serif;font-weight:700;font-size:16px;fill:#fff;text-anchor:middle;dominant-baseline:central}
.krs-plan .pm text.s2{font-size:13px}.krs-plan .pm-e text{fill:#14295c}
.krx-legend .lg-p,.krx-legend .lg-e{border-radius:6px!important}.krx-legend .lg-p{background:#3361ab!important}.krx-legend .lg-e{background:#e9d9b4!important;color:#14295c!important;box-shadow:inset 0 0 0 1px #c9b98f}.krx-legend .lg-k{background:#e3000f!important}
.krx-legend .lg-l{flex:none;width:24px;height:5px;border-radius:3px;background:var(--c)}
.krx .krx-zhint{font-size:13px!important;color:var(--mut);margin:0!important}
@media (max-width:767px){.krx-zoom{top:8px;right:8px;gap:5px}.krx-zoom button{min-width:36px;height:36px;font-size:13px;padding:0 9px}}

/* Tablet */
@media (max-width:991px){
.krx-sec{padding:28px 32px}
.krx-hero+.krx-sec{padding-top:44px}
.krx-sec:last-of-type{padding-bottom:48px}
.krx-hero{padding:56px 32px 50px}
.krx-hero h2{font-size:54px!important}
.krx-hero-in{grid-template-columns:minmax(0,1fr) 250px}
.krx-kab{grid-template-columns:1fr}
.krx-planwrap{grid-template-columns:1fr}
.krx-side{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.krx-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Handy */
@media (max-width:767px){
.krx{font-size:16px}
.krx-sec{padding:22px 18px}
.krx-hero+.krx-sec{padding-top:34px}
.krx-sec:last-of-type{padding-bottom:38px}
.krx-hero{padding:42px 20px 38px}
.krx-hero h2{font-size:40px!important}
.krx .krx-sub{font-size:17px!important}
.krx h2{font-size:30px!important}
.krx-hero-in{grid-template-columns:1fr;grid-template-areas:"t" "p" "c"}
.krx-btn{width:100%}
.krx-way-b{width:100%}
.krx-ways,.krx-parks{grid-template-columns:1fr}
.krx-side{grid-template-columns:1fr}
.krx-nav{grid-template-columns:1fr}
.krx-gmap iframe{height:340px}
}