body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background-color: rgb(18, 18, 20);
}


.kunden-info-banner {
    background: linear-gradient(90deg, #fff685 70%, #24d1e5 140%);
    color: #19191c;
    border-radius: 1vw;
    padding: 1.1vw 1.5vw 0.9vw 1.5vw;
    margin-bottom: 3.2vw;
    text-align: center;
    font-size: 1.23vw;
    font-weight: 600;
    box-shadow: 0 0.4vw 2vw #4bf1f74d;
    border: 0.1vw solid #24d1e5;
    max-width: 54vw;
    margin-left: auto;
    margin-right: auto;
}
.kunden-info-banner strong {
    font-size: 1.09em;
    color: #24b6b7;
}
.kunden-info-big {
    font-size: 1.09em;
    display: inline-block;
    margin: 0.19vw 0 0.15vw 0;
    color: #19191c;
    font-weight: 800;
    line-height: 1.1;
}
.kunden-info-blau {
    color: #24b6b7;
    font-weight: 900;
}
.kunden-info-details {
    font-size: 0.99em;
    color: #222;
    font-weight: 500;
    margin-top: 0.18vw;
    display: block;
}
.kunden-info-cond {
    font-size: 0.82em;
    color: #19191c;
    font-weight: 500;
    opacity: 0.8;
    margin-top: 0.1vw;
    display: block;
}

/* --- RECHNER kompakter machen --- */
.calculator-section {
    background: #16171a;
    border-radius: 1vw;
    max-width: 53vw;
    margin: 3.7vw auto 0 auto;
    padding: 1.5vw 1.5vw 2vw 1.5vw;
    box-shadow: 0 0.5vw 2vw #4bf1f74d;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 0.7vw;
}

.calculator-section h2 {
    color: #fff685;
    font-size: 2.2vw;
    margin-bottom: 0.3vw;
    text-align: center;
    font-weight: 800;
}

#calc-form { display: flex; flex-direction: column; gap: 0.3vw; }

.input-container {
    flex-direction: column;
    gap: 0.05vw;
    margin-bottom: 0.05vw;
}

.input-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
}

.input-label-row label { flex: 1; }

.input-value {
    min-width: 3vw;
    text-align: right;
    font-size: 1vw;
    font-weight: 700;
    color: #fff685;
    display: flex;
    align-items: baseline;
    gap: 0.1vw;
}
.input-value output {
    color: #fff685;
    font-size: 1.15vw;
    font-weight: 800;
    min-width: 1.3vw;
}

.blue-info {
    color: #24d1e5;
    font-size: 0.91vw;
    font-weight: 500;
    margin: 0.1vw 0 0.1vw 0.1vw;
}
.blue-info.sub {
    margin-left: 1.3vw;
    margin-top: 0.05vw;
    margin-bottom: -0.16vw;
}

.rabatt-info {
    font-size: 0.98vw;
    font-weight: 700;
    margin: 0.13vw 0 0.03vw 0;
    text-align: left;
    letter-spacing: 0.01vw;
    display: block;
    line-height: 1.1;
}
.rabatt-yellow { color: #fff685; }

input[type="range"] {
    width: 100%;
    accent-color: #4bf1f7;
    margin: 0.07vw 0 0.04vw 0;
    height: 0.6vw;
}

.options-stack {
    display: flex;
    flex-direction: column;
    gap: 0.18vw;
    margin: 0.7vw 0 0.4vw 0;
}

.option-label {
    background: #19191c;
    border-radius: 0.6vw;
    padding: 0.38vw 0.65vw;
    box-shadow: 0 0.1vw 0.5vw #222a2b36;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95vw;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
    min-height: 1.7vw;
    font-weight: 500;
    gap: 1vw;
}
.option-label:hover { background: #222324; }
.option-checkbox-text { display: flex; align-items: center; gap: 0.5vw; flex: 1; }

input[type="checkbox"] {
    accent-color: #4bf1f7;
    width: 0.9vw;
    height: 0.9vw;
    border-radius: 0.4vw;
}

.hr-custom {
    border: none;
    border-top: 0.11vw solid #4bf1f7cc;
    margin: 0.6vw 0 0.28vw 0;
}

.hinweis {
    color: #24d1e5;
    font-size: 0.9vw;
    margin: 0.17vw 0 0.33vw 0;
    text-align: center;
}

.checkbox-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3vw 0.7vw;
    margin-bottom: 0.07vw;
}
.checkbox-group label {
    background: #19191c;
    border-radius: 0.6vw;
    padding: 0.45vw 0.7vw;
    box-shadow: 0 0.1vw 0.5vw #222a2b36;
    display: flex;
    align-items: center;
    font-size: 0.94vw;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
    gap: 0.3vw;
    min-height: 1.3vw;
}
.checkbox-group label:hover { background: #222324; }

.calc-result {
    font-size: 1.6vw;
    color: #24d1e5;
    text-align: center;
    font-weight: 900;
    padding: 0.7vw 0;
    border-radius: 0.7vw;
    box-shadow: 0 0.12vw 0.44vw #4bf1f733;
    margin-top: 0.7vw;
}

.yellow-bg { background: #fff685; }

.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1vw;
    height: 1vw;
    background: #fff685;
    color: #16171a;
    border-radius: 50%;
    font-size: 0.8vw;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    transition: background 0.2s;
    border: none;
    user-select: none;
    margin-left: 0.2vw;
    min-width: 1vw;
    flex-shrink: 0;
}
.info-icon.yellow { background: #fff685; color: #16171a; }
.info-icon:hover, .info-icon:focus { background: #ffee5a; }

.info-tooltip {
    display: none;
    position: absolute;
    left: 103%;
    top: 50%;
    transform: translateY(-50%);
    background: #23242a;
    color: #fff;
    font-size: 0.87vw;
    font-weight: 400;
    border-radius: 0.6vw;
    box-shadow: 0 0.2vw 1vw #222a2b66;
    padding: 0.7vw 0.7vw;
    z-index: 15;
    min-width: 12vw;
    max-width: 19vw;
    white-space: normal;
    line-height: 1.45;
}
.info-icon:hover .info-tooltip, .info-icon:focus .info-tooltip { display: block; }


body {
    /* Abstand nach oben zum Banner, falls nötig */
    padding-top: 3vw;
}

/* NEUKUNDEN-BANNER */
.kunden-info-banner {
    background: linear-gradient(90deg, #fff685 68%, #24d1e5 140%);
    color: #19191c;
    border-radius: 1.3vw;
    padding: 1.7vw 2vw 1.3vw 2vw;
    margin-top: 3vw; /* Viel Abstand nach oben */
    margin-bottom: 4vw; /* Mehr Abstand nach unten */
    text-align: center;
    font-size: 1.29vw;
    font-weight: 600;
    box-shadow: 0 0.55vw 2.4vw #4bf1f74d;
    border: 0.14vw solid #24d1e5;
    max-width: 54vw;
    margin-left: auto;
    margin-right: auto;
}

.kunden-info-banner strong {
    font-size: 1.22em;
    color: #24b6b7;
    letter-spacing: 0.07em;
    text-shadow: 0 0.09vw 0.5vw #fff9;
}

.kunden-info-big {
    font-size: 1.39em;
    display: inline-block;
    margin: 0.33vw 0 0.22vw 0;
    color: #19191c;
    font-weight: 800;
    line-height: 1.15;
}

.kunden-info-blau {
    color: #24b6b7;
    font-weight: 900;
}

.kunden-info-details {
    font-size: 0.93em;
    color: #222;
    font-weight: 700;
    margin-top: 0.18vw;
    display: block;
    line-height: 1.1;
}

.kunden-info-cond {
    font-size: 0.79em;
    color: #19191c;
    font-weight: 500;
    opacity: 0.8;
    margin-top: 0.1vw;
    display: block;
    line-height: 1.1;
}

/* Rechner: Abstand nach oben */
.calculator-section {
    margin-top: 13vw !important;
}


.kunden-info-banner {
    position: relative;
    background: linear-gradient(100deg, #fff685 65%, #62f7fa 120%);
    color: #19191c;
    border-radius: 2vw;
    padding: 2.4vw 2vw 1.8vw 2vw;
    margin-top: 5vw;
    margin-bottom: 5vw;
    text-align: center;
    font-size: 1.15vw;
    font-weight: 600;
    box-shadow: 0 0.9vw 2.7vw #62f7fa2f, 0 0 0.3vw #24d1e5;
    border: 0.15vw solid #24d1e5;
    max-width: 60vw;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.kunden-info-gradient {
    position: absolute;
    top: -3vw; left: -6vw; right: -6vw; height: 5vw;
    background: radial-gradient(ellipse at center, #4bf1f799 0%, transparent 100%);
    filter: blur(0.9vw);
    opacity: 0.5;
    z-index: 1;
    animation: kundenGlow 4s linear infinite alternate;
    pointer-events: none;
}
@keyframes kundenGlow {
    0% { opacity: 0.55; }
    100% { opacity: 0.87; }
}

.kunden-info-hero {
    z-index: 2;
    position: relative;
    margin-bottom: 0.2vw;
}

.kunden-info-badge {
    background: linear-gradient(90deg, #4bf1f7 30%, #fff685 80%);
    color: #19191c;
    font-weight: 900;
    font-size: 1.14em;
    letter-spacing: 0.07em;
    padding: 0.23em 0.85em 0.18em 0.85em;
    border-radius: 1em;
    box-shadow: 0 0.08vw 0.22vw #24d1e577;
    margin-right: 0.7vw;
    display: inline-block;
}

.kunden-info-klein {
    font-weight: 600;
    color: #222;
    font-size: 0.99em;
}

.kunden-info-main {
    z-index: 2;
    position: relative;
    margin-bottom: 0.2vw;
    font-size: 1.48em;
    line-height: 1.1;
    font-family: 'Poppins', 'Montserrat', 'Arial', sans-serif;
    font-weight: 900;
    letter-spacing: -0.01em;
    text-shadow: 0 0.06vw 0.25vw #fff7, 0 0.07vw 0.22vw #62f7fa2c;
}
.kunden-info-emoji {
    font-size: 1.45em;
    filter: drop-shadow(0 0 0.24vw #fff9);
    vertical-align: middle;
}
.kunden-info-blau {
    color: #19cbe0;
    font-weight: 900;
}
.kunden-info-subline {
    font-size: 0.79em;
    color: #19191c;
    letter-spacing: 0.01em;
    display: inline-block;
    margin-top: 0.3vw;
}

.kunden-info-details {
    font-size: 0.89em;
    font-weight: 700;
    margin-top: 0.5vw;
    margin-bottom: 0.18vw;
    color: #222;
    letter-spacing: 0.02em;
    z-index: 2;
    position: relative;
}

.kunden-info-highlight {
    background: #fefde0;
    padding: 0.14em 0.7em 0.14em 0.5em;
    border-radius: 1em;
    color: #00b2bb;
    font-weight: 700;
    margin-right: 0.35em;
    box-shadow: 0 0.06vw 0.17vw #24d1e533;
}

.kunden-info-cond {
    font-size: 0.81em;
    color: #222;
    font-weight: 400;
    opacity: 0.88;
    margin-top: 0.2vw;
    z-index: 2;
    position: relative;
    letter-spacing: 0.02em;
}
.kunden-info-cond-inner {
    background: rgba(255,255,255,0.21);
    border-radius: 1em;
    padding: 0.2em 1em 0.1em 0.7em;
    display: inline-block;
}
.kunden-info-cond-emoji {
    font-size: 1.2em;
    margin-right: 0.18em;
    vertical-align: middle;
    filter: drop-shadow(0 0 0.22vw #fff4);
}