/* Spvgg Weil der Stadt: Look der Mask-Elemente (Spvgg Fortschritt, Pakete, Spenderfeld, Abschnitt).
   Technische Datei der Homepage, bitte nicht von Hand bearbeiten. Stand 12.10.2026 */

/* Seitenlayout: Inhalt volle Breite, Seitenleiste aus (gilt auf jeder Seite mit diesem Element) */
body:has(.krx) .content .col-md-8,body:has(.krx) .business-page .col-md-8{width:100%!important;max-width:100%!important;flex:0 0 100%!important}
body:has(.krx) .content .col-md-4,body:has(.krx) .business-page .col-md-4{display:none!important}
body:has(.krx) .content .col-md-8 .content-box{padding:0!important;overflow:hidden}

/* Grundlagen */
.krx{--navy:#14295c;--blue:#3361ab;--ink:#1d2a3a;--mut:#56637a;--soft:#eef2f8;--line:#d6deeb;--gold:#d4a72c;--bronze:#b06a3b;--red:#e3000f;--grass:#2f8f46;--grass2:#2a8340;color:var(--ink);font-family:"AdobeClean-Regular",Arial,sans-serif;font-size:17px;line-height:1.55}
.krx *{box-sizing:border-box}
.krx p,.krx span,.krx b,.krx button,.krx summary,.krx output{font-family:"AdobeClean-Regular",Arial,sans-serif}
.krx h2,.krx h3,.krx .krx-num,.krx .krx-num span,.krx .krx-eur,.krx .krx-btn,.krx .krx-tname,.krx .krx-gname,.krx .krx-step output,.krx .krx-eq{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}
.frame:has(.krxm .krx-hero)+.frame .krxm .krx-sec{padding-top:56px;padding-bottom:8px}
.frame:has(.krxm .krx-sec):last-child .krxm .krx-sec{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:"AdobeClean-Bold",Arial,sans-serif!important;font-size:16px}

/* Einstieg mit Fortschrittsring */
.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) 260px;grid-template-areas:"t p" "c p"}
.krx-hero-txt{grid-area:t}
.krx-ring{grid-area:p;justify-self:center;position:relative;width:220px;height:220px}
.krx-cta{grid-area:c;align-self:start;display:flex;flex-wrap:wrap;gap:12px}
.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:560px;margin:0!important;color:var(--mut)}
.krx-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.krx-ring circle{fill:none;stroke-width:12}
.krx-ring .bg{stroke:#d5deec}
.krx-ring .fg{stroke:var(--blue);stroke-linecap:round;stroke-dasharray:326.7;animation:krxring 1.8s cubic-bezier(.2,.8,.2,1) .3s both}
@keyframes krxring{from{stroke-dashoffset:326.7}}
.krx-ring-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.krx-num{font-size:56px;line-height:.9;color:var(--navy)}
.krx-ring-c small{font-size:14px;line-height:1.3;margin-top:4px;color:var(--mut)}

/* Schritt 1: Pakete */
.krx-tiers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:24px}
.krx-tier{position:relative;font:inherit;cursor:pointer;text-align:center;border:0;border-radius:20px;padding:24px 12px 18px;color:#fff;display:flex;flex-direction:column;align-items:center;gap:8px;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.15);transition:transform .2s,box-shadow .2s}
.krx-tier::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 45%,transparent 60%);transform:translateX(-120%);transition:transform .7s}
.krx-tier:hover{transform:translateY(-6px) rotate(-1.5deg);box-shadow:0 18px 36px rgba(0,0,0,.22)}
.krx-tier:hover::before{transform:translateX(120%)}
.krx-tier>span:not(.krx-medal){display:block}
.krx .krx-tname{font-size:22px;line-height:1.05;min-height:2.1em}
.krx .krx-tier .krx-eur{font-size:42px;line-height:1;text-shadow:0 2px 0 rgba(0,0,0,.12)}
.krx-area{font-size:15px;opacity:.9}
.krx-perk{font-size:14px;line-height:1.4;opacity:.92;min-height:40px}
.krx-pick{margin-top:auto;font-family:"AdobeClean-Bold",Arial,sans-serif!important;font-size:14px;border-radius:99px;padding:8px 14px;background:rgba(255,255,255,.22);border:2px solid rgba(255,255,255,.6);transition:background .2s,color .2s}
.krx-tier[aria-pressed="true"]{box-shadow:0 0 0 4px #fff,0 0 0 7px var(--navy),0 18px 36px rgba(0,0,0,.25)}
.krx-tier[aria-pressed="true"] .krx-pick{background:#fff;color:var(--navy)}
.krx-tier[aria-pressed="true"] .krx-pick::before{content:"✓ "}
.t-einzel{background:linear-gradient(160deg,#5b8be0,#24479a)}
.t-gold{background:linear-gradient(160deg,#f6d36a,#c6941a)}
.t-silber{background:linear-gradient(160deg,#eef0f3,#9aa1aa);color:#26303d}
.t-bronze{background:linear-gradient(160deg,#e7aa7d,#9b5126)}
.t-fahne{background:linear-gradient(160deg,#ff4d57,#b8000b)}
.krx .krx-firm{color:var(--mut);margin:24px 0 0!important;font-size:15px!important}
.krx-firm a,.krx-contact a{color:var(--blue)}

/* Schritt 2: Überweisen */
.krx-pay{display:grid;grid-template-columns:minmax(0,1fr) 250px;margin-top:24px;background:#fff;border:2px solid #e3e8f1;border-radius:16px;overflow:hidden}
.krx-pay-main{padding:30px}
.krx-sum{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;padding-bottom:18px;margin-bottom:6px;border-bottom:2px dashed var(--line)}
.krx .krx-sum .krx-eur{font-size:48px;line-height:1;color:var(--navy)}
.krx .krx-eq{font-size:36px;line-height:1;color:var(--mut)}
.krx-step{display:flex;align-items:center;gap:10px}
.krx-step button{width:40px;height:40px;border-radius:10px;border:2px solid var(--blue);background:#fff;color:var(--blue);font-size:20px;line-height:1;cursor:pointer}
.krx .krx-step output{font-size:22px;min-width:64px;text-align:center;color:var(--navy)}
.krx-sumlbl{font-size:16px;color:var(--mut)}
.krx-sum:not(.is-einzel) .krx-eq,.krx-sum:not(.is-einzel) .krx-step,.krx-sum.is-einzel .krx-sumlbl{display:none}
.krx-row{display:grid;grid-template-columns:160px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid #edf1f7}
.krx-row b{font-family:"AdobeClean-Bold",Arial,sans-serif!important;font-weight:400;font-size:13px;text-transform:uppercase;letter-spacing:.8px;color:var(--mut)}
.krx-row span{font-size:16px;overflow-wrap:anywhere}
.krx-mono{font-family:"AdobeClean-Bold",Arial,sans-serif!important;letter-spacing:.8px}
.krx-copy{border:1.5px solid var(--blue);background:#fff;color:var(--blue);border-radius:8px;padding:7px 12px;font-size:14px;cursor:pointer;white-space:nowrap}
.krx-copy.ok{background:var(--blue);color:#fff}
.krx .krx-note{margin:16px 0 0!important;font-size:15px!important;color:var(--mut)}
.krx-giro{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px;background:var(--soft);border-left:2px dashed var(--line)}
.krx-giro img{width:170px;height:auto}
.krx .krx-giro p{color:var(--mut);line-height:1.4;font-size:14px!important;margin:10px 0 0!important}

/* Danke: Spielfeld */
.krx-pitch{position:relative;margin-top:24px;padding:14px;border-radius:16px;background:repeating-linear-gradient(90deg,var(--grass) 0 8.33%,var(--grass2) 8.33% 16.66%)}
.krx-field{position:relative}
.krx-grid{display:grid;gap:2px;grid-auto-flow:dense}
.krx-cell{border-radius:2px;background:rgba(255,255,255,.07)}
.krx-cell.f{cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .12s}
.krx-cell.f:hover,.krx-cell.hl{outline:2px solid #fff;z-index:2;transform:scale(1.25)}
.krx-cell.krx-blk:hover,.krx-cell.krx-blk.hl{transform:scale(1.06)}
.c-gold{background:var(--gold)}
.c-silber{background:#cfd4da}
.c-bronze{background:#c27a47}
.c-qm{background:#fff}
.krx-blk:not(.c-firma){background-image:linear-gradient(90deg,rgba(0,0,0,.2) 1.5px,transparent 1.5px),linear-gradient(0deg,rgba(0,0,0,.2) 1.5px,transparent 1.5px);background-size:calc(100% / var(--w)) 100%,100% calc(100% / var(--h));background-position:-1.5px 0,0 1.5px}
.c-firma{background:var(--blue);display:flex;align-items:center;justify-content:center;padding:5px;border-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.c-firma img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.krx-plines{position:absolute;inset:0;width:100%;height:100%;overflow:visible!important;pointer-events:none;z-index:3}
.krx-plines *{vector-effect:non-scaling-stroke}
.krx-flag{position:absolute;z-index:4;font-size:28px;line-height:1;color:var(--red);cursor:pointer;background:none;border:0;padding:0;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.krx-tip{position:absolute;z-index:5;pointer-events:none;background:#fff;color:var(--navy);border-radius:10px;padding:9px 13px;font-size:14px;line-height:1.3;white-space:nowrap;box-shadow:0 8px 22px rgba(0,0,0,.25);opacity:0;transform:translate(-50%,-115%);transition:opacity .12s}
.krx-tip.on{opacity:1}
.krx-tip b{display:block;font-family:"AdobeClean-Bold",Arial,sans-serif!important;font-weight:400;font-size:15px}
.krx-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-size:14px;color:var(--mut)}
.krx-legend i{display:inline-block;width:14px;height:14px;border-radius:3px;margin-right:6px;vertical-align:-2px}

/* Danke: Firmen und private Spenden */
.krx h3.krx-sub2{margin:40px 0 16px!important}
.krx-firmen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.krx-firmen a{position:relative;display:flex;align-items:center;justify-content:center;height:124px;padding:18px 22px;border-radius:14px;background:linear-gradient(160deg,#1d3f8f,#3361ab);text-decoration:none!important;transition:transform .2s,box-shadow .2s}
.krx-firmen a.tall{padding-top:10px;padding-bottom:10px}
.krx-firmen a.tall img{max-height:85%}
.krx-firmen a:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(20,41,92,.25)}
.krx-firmen img{display:block;max-width:88%;max-height:76%;object-fit:contain}
.krx-firmen a::after{content:attr(data-m);position:absolute;left:50%;bottom:8px;transform:translate(-50%,6px);opacity:0;transition:opacity .2s,transform .2s;background:#fff;color:var(--navy);border-radius:99px;padding:3px 10px;font-size:12px;font-family:"AdobeClean-Bold",Arial,sans-serif;white-space:nowrap}
.krx-firmen a:hover::after,.krx-firmen a:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.krx-thanks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.krx-group{border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 8px 22px rgba(20,41,92,.1)}
.krx-ghead{display:flex;align-items:center;gap:12px;padding:16px 18px;color:#fff}
.krx-ghead .krx-medal{width:42px;height:42px}
.krx-ghead .krx-medal svg{width:22px;height:22px}
.krx .krx-gname{display:block;font-size:20px;line-height:1.1;color:#fff}
.krx-gmeta{display:block;font-size:13px;color:rgba(255,255,255,.85)}
.g-gold .krx-ghead{background:linear-gradient(135deg,#f6d36a,#c6941a)}
.g-silber .krx-ghead{background:linear-gradient(135deg,#dfe3e8,#8f969f)}
.g-bronze .krx-ghead{background:linear-gradient(135deg,#e7aa7d,#9b5126)}
.g-fahne .krx-ghead{background:linear-gradient(135deg,#ff4d57,#b8000b)}
.g-qm .krx-ghead{background:linear-gradient(135deg,#5b8be0,#24479a)}
.krx-names{display:flex;flex-wrap:wrap;gap:6px;padding:16px 18px}
.krx-names span{border-radius:99px;padding:5px 12px;font-size:14px;line-height:1.3;background:var(--soft)}

/* Fragen */
.krx-faq{margin-top:20px;display:grid;gap:10px}
.krx-faq details{background:var(--soft);border-radius:12px;padding:0 18px}
.krx-faq summary{cursor:pointer;list-style:none;padding:16px 28px 16px 0;position:relative;color:var(--navy);font-family:"AdobeClean-Bold",Arial,sans-serif!important}
.krx-faq summary::-webkit-details-marker{display:none}
.krx-faq summary::after{content:"+";position:absolute;right:0;top:12px;font-size:24px;color:var(--blue)}
.krx-faq details[open] summary::after{content:"–"}
.krx .krx-faq details p{padding:0 0 16px!important;margin:0!important;font-size:16px!important}
.krx .krx-contact{margin:28px 0 0!important;font-size:16px!important}
.krx-contact a{font-family:"AdobeClean-Bold",Arial,sans-serif!important}
.krx-sticky{display:none}

/* Tablet */
@media (max-width:991px){
.krx-sec{padding:28px 32px}
.frame:has(.krxm .krx-hero)+.frame .krxm .krx-sec{padding-top:44px}
.frame:has(.krxm .krx-sec):last-child .krxm .krx-sec{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) 220px}
.krx-ring{width:200px;height:200px}
.krx-tiers{gap:12px}
.krx-tier{padding:20px 8px 16px;border-radius:16px}
.krx-medal{width:46px;height:46px}
.krx .krx-tname{font-size:19px}
.krx .krx-tier .krx-eur{font-size:34px}
.krx-perk{font-size:13px}
.krx-pick{padding:7px 10px;font-size:13px}
.krx-pay{grid-template-columns:1fr}
.krx-giro{flex-direction:row;gap:18px;text-align:left;border-left:0;border-top:2px dashed var(--line)}
.krx-giro img{width:120px}
.krx .krx-giro p{margin:0!important}
.krx-firmen{grid-template-columns:repeat(2,minmax(0,1fr))}
.krx-firmen a{height:104px}
.krx-thanks{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Handy */
@media (max-width:767px){
.krx{font-size:16px}
.krx-sec{padding:22px 18px}
.frame:has(.krxm .krx-hero)+.frame .krxm .krx-sec{padding-top:34px}
.frame:has(.krxm .krx-sec):last-child .krxm .krx-sec{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-ring{width:180px;height:180px}
.krx-num{font-size:48px}
.krx-btn{width:100%}
.krx-tiers{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.krx-tier:first-child{grid-column:1/-1}
.krx-perk{display:none!important}
.krx .krx-tier .krx-eur{font-size:30px}
.krx-pay-main{padding:18px}
.krx-sum{gap:10px}
.krx-sum.is-einzel{flex-wrap:nowrap}
.krx .krx-sum .krx-eur{font-size:34px}
.krx .krx-eq{font-size:26px}
.krx-step{gap:6px}
.krx-step button{width:36px;height:36px}
.krx .krx-step output{min-width:50px;font-size:20px}
.krx-row{grid-template-columns:1fr auto;padding:10px 0}
.krx-row b{grid-column:1/-1;font-size:12px}
.krx-giro{display:none}
.krx-pitch{padding:8px}
.krx-grid{gap:1.5px}
.c-firma{padding:3px 4px}
.krx-firmen{gap:10px}
.krx-firmen a{height:84px;padding:12px 14px}
.krx-thanks{grid-template-columns:1fr}
.krx-sticky{display:block;position:fixed;left:12px;right:12px;bottom:12px;z-index:900;transform:translateY(140%);transition:transform .25s}
.krx-sticky.on{transform:none}
.krx-sticky .krx-btn{width:100%;box-shadow:0 8px 24px rgba(0,0,0,.25)}
}

/* Ergaenzungen fuer die Mask-Elemente */
.krx-sum[hidden]{display:none!important}

/* Sprungziele (Buttons im Kopfbereich): Abschnitt mit Ueberschrift unter dem fixierten Menue zeigen */
.krxm .krx-sec{scroll-margin-top:120px}
@media (max-width:991px){.krxm .krx-sec{scroll-margin-top:80px}}
@media (max-width:480px){.krxm .krx-sec{scroll-margin-top:50px}}

/* Paket ausverkauft (Haken "Alle vergeben" im Backend) */
.krxm .krx-tier.is-full{cursor:not-allowed;opacity:.5;filter:grayscale(.35);box-shadow:none}
.krxm .krx-tier.is-full:hover{transform:none;box-shadow:none}
.krxm .krx-tier.is-full:hover::before{transform:translateX(-120%)}
/* Handy: Fliesstexte so gross wie die Antworten bei den Fragen */
@media (max-width:767px){.krxm .krx-sub,.krxm .krx-intro{font-size:16px!important;line-height:24px!important}}