/* Cross ALM Preisrechner – passt zum Theme „Cross ALM“ (Fassung ruhig) */
.cap { position: relative; overflow: hidden; background: #fff; border: 1px solid #E1E6F0; border-radius: 20px; padding: 26px 30px 22px; margin-top: 28px; color: #003659; }
.cap::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, #47B27A, #004C79); }
.cap-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; }
.cap h4 { margin: 0 !important; font-size: 20px !important; font-weight: 900; color: #003659; }
.cap-modi { display: inline-flex; flex-wrap: wrap; background: #F4F7FA; border: 1px solid #E1E6F0; border-radius: 999px; padding: 4px; gap: 2px; }
div.cap-modi button, div.cap-modi button:hover, div.cap-modi button:focus { border: 0; background: none; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 14px; font-weight: 700; color: rgba(0, 54, 89, .7); cursor: pointer; }
div.cap-modi button[aria-pressed="true"], div.cap-modi button[aria-pressed="true"]:hover { background: #003659; color: #fff; }
div.cap-modi button:not([aria-pressed="true"]):hover { color: #003659; background: rgba(0, 54, 89, .06); }
.cap-modi button:focus-visible, .cap-zahl:focus-visible, .cap-schieber:focus-visible { outline: 3px solid #47B27A; outline-offset: 2px; }
.cap-regler { display: grid; grid-template-columns: auto 110px 1fr; align-items: center; gap: 16px; margin-top: 24px; }
.cap-regler label { font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: rgba(0, 54, 89, .55); }
.cap-zahl { width: 110px; box-sizing: border-box; border: 1px solid #C9D3E1; border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 18px; font-weight: 900; color: #003659; }
.cap-schieber { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #47B27A 0, #47B27A var(--cap-anteil, 0%), #E1E6F0 var(--cap-anteil, 0%)); cursor: pointer; }
.cap-schieber::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 4px solid #2B8552; box-shadow: 0 2px 6px rgba(0, 30, 60, .25); }
.cap-schieber::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid #2B8552; }
.cap-ergebnis { margin-top: 22px; padding-top: 18px; border-top: 1px solid #E1E6F0; }
.cap-preis { display: block; font-size: 32px; font-weight: 900; line-height: 1.15; color: #003659; }
.cap-zeile { display: block; margin-top: 6px; color: rgba(0, 54, 89, .7); font-size: 15px; }
.cap-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 20px; }
.cap .cap-knopf { display: inline-block; background: #2B8552; color: #fff !important; font-weight: 700; font-size: 16px; padding: 12px 24px; border-radius: 8px; text-decoration: none !important; transition: background .15s; }
.cap .cap-knopf:hover, .cap .cap-knopf:focus-visible { background: #226B42; }
.cap .cap-alle { color: #2B8552; font-weight: 700; font-size: 14px; }
.cap-fuss { margin: 14px 0 0 !important; font-size: 13px !important; color: rgba(0, 54, 89, .6); }
.cap-fuss a { color: #2B8552; font-weight: 700; }
@media (max-width: 640px) {
	.cap { padding: 22px 18px 18px; }
	.cap-regler { grid-template-columns: 1fr 110px; }
	.cap-schieber { grid-column: 1 / -1; }
	.cap-preis { font-size: 26px; }
	.cap-modi { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; width: 100%; border-radius: 14px; }
	div.cap-modi button, div.cap-modi button:hover, div.cap-modi button:focus { padding: 8px 4px; font-size: 13px; border-radius: 10px; line-height: 1.2; }
}

/* 1.2.1: Elementor-Kit (.elementor-kit-9 button) färbte die Schalter weiß; div.-Selektoren sind stärker */