/* =======================
   HERO
======================= */

.hero {
    position: relative;
    background-image:
    linear-gradient(rgba(64,64,64,0.80), rgba(64,64,64,0.80)),
    url("../pictures/desktop1.webp");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero {
    overflow: hidden;
}

.topbar {
    width: 100%;
    background-color: #009036;
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 70px;
    min-height: 50px;
}

.topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #FFFFFF;
    font-size: 16px;
    line-height: 1.2;
}

.topbar-icon {
    display: inline-block;
    flex: 0 0 auto;

    background-image: url("../images/icons1.png");
    background-repeat: no-repeat;
}

.icon-mail {
    width: 30px;
    height: 30px;
    background-position: 0px 3px;
}

.icon-phone {
    width: 30px;
    height: 30px;
    background-position: 0px -52px;
}

.icon-location {
    width: 30px;
    height: 30px;
    background-position: 5px -108px;
}

.mobile-topbar {
    display: none;
}

.hero-content-wrap {
    padding-top: 40px;
    padding-bottom: 300px;
}

.hero-logo-wrap {
    position: relative;
    width: 100%;
    margin-bottom: 60px;
}

.hero-logo-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -47%);

    width: 100vw;
    height: 68px;

    background-color: rgba(220,220,220,0.75);
}

.hero-logo {
    position: relative;
    width: 650px;
    height: 205px;
    margin: 0px auto;
    background-image: url("../images/logo_gross.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    z-index: 2;
}

.hero-headline {
    max-width: 1180px;
    margin: 0px auto;

    color: #FFFFFF;
    font-size: 31px;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
}

.hero-restwert {
    display: flex;
    align-items: center;
    justify-content: center;
	font-size: 31px;
    gap: 8px;

    width: fit-content;

    margin: 58px auto 0px auto;
    padding: 18px 24px;
    background-color: #009036;
    border-radius: 12px;
}

.restwert-black {
    color: #000000;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.2;
}

.restwert-white {
    color: #FFFFFF;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.2;
}

.hero-boxes-section {
    position: relative;
    z-index: 5;
    padding-bottom: 60px;
    background-color: #DCDCDC;
}

.hero-boxes-grid {
    position: relative;
    top: -200px;
    display: flex;
    gap: 28px;
    align-items: stretch;
    margin-bottom: -200px;
}

.hero-box {
    flex: 1 1 0;
    background-color: #FFFFFF;
    padding: 30px 30px 30px 30px;
    border-radius: 12px;
    box-shadow: 0px 2px 8px rgba(0,0,0,0.18);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-box h2 {
    margin: 0px 0px 25px 0px;
    color: #000000;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.08;
	text-transform: uppercase;
}

.hero-box h2 span {
    display: block;
    color: #009036;
    font-size: 28px;
    margin-bottom: 6px;
	text-transform: lowercase;
}

.hero-box-icon {
    display: block;
    background-image: url("../images/icons2.png");
    background-repeat: no-repeat;
    margin-bottom: 20px;
}

.icon-abholung {
    width: 160px;
    height: 90px;
    background-position: 0px -12px;
}

.icon-verguetung {
    width: 160px;
    height: 90px;
    background-position: 0px -151px;
}

.icon-verschrottung {
    width: 160px;
    height: 90px;
    background-position: 0px -291px;
}

.hero-box p {
    margin: 0px 0px 25px 0px;
    color: #000000;
    font-size: 16px;
    line-height: 1.3;
}

.hero-box p strong {
    font-weight: bold;
}

.hero-box-button {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0px;
    min-width: 156px;
    padding: 14px 20px 14px 10px;
    background-color: #E2001A;
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;
	
	transition: transform 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
}

.hero-box-button:hover {
	transform: scale(1.05);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

.hero-box-button:active {
    transform: scale(0.97);
}

.hero-box-button-icon {
    display: inline-block;
    width: 30px;
    height: 20px;
    background-image: url("../images/icons3.png");
    background-repeat: no-repeat;
    background-position: -5px -8px;
}

/* =======================
   Desktop 1024-1199
======================= */

@media only screen and (min-width: 1024px) and (max-width: 1199px) {

    .topbar-inner {
        gap: 40px;
    }

    .topbar-link {
        font-size: 15px;
    }

	.hero-logo-bar {
		height: 55px;
	}
	
    .hero-logo {
        width: 520px;
		height: 164px;
    }

    .hero-logo-wrap {
        margin-bottom: 50px;
    }

    .hero-headline {
        font-size: 28px;
    }

    .hero-restwert {
		font-size: 28px;
        padding: 16px 24px;
    }

    .restwert-black,
    .restwert-white {
        font-size: 24px;
    }

    .hero-box h2 {
        font-size: 30px;
    }

    .hero-box h2 span {
        font-size: 24px;
    }

}

/* =======================
   Mobile <=1023
======================= */

@media only screen and (max-width: 1023px) {

    .hero {
        background-image:
        linear-gradient(rgba(64,64,64,0.80), rgba(64,64,64,0.80)),
        url("../pictures/mobil1.webp");

        background-position: center top;
    }

    .topbar {
        display: none;
    }

    .mobile-topbar {
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;

		z-index: 1000;
		
        display: flex;
        align-items: center;
        justify-content: space-between;

        background-color: #009036;

        min-height: 50px;
    }

    .mobile-topbar-item {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;

        flex: 1 1 33.333%;

        color: #FFFFFF;
        font-size: 16px;
    }

    .hero-content-wrap {
        padding-top: 90px;
        padding-bottom: 80px;
    }

    .hero-logo-wrap {
        margin-bottom: 60px;
    }

    .hero-logo-bar {
		transform: translate(-50%, -45%);
		
        height: 52px;
    }

    .hero-logo {
        width: 500px;
		height: 161px;
		background-image: url("../images/logo.png");
    }
	
	.hero-headline {
		font-size: 28px;
		max-width: 320px;
	}
	
	.hero-headline span {
		display: none;
	}

    .hero-restwert {
        margin-top: 42px;
        padding: 16px 24px;
    }

    .restwert-black,
    .restwert-white {
        font-size: 22px;
    }
	
	.hero-box h2 {
        font-size: 30px;
    }

    .hero-box h2 span {
        font-size: 24px;
    }

    .hero-boxes-section {
        margin-top: 0px;
		padding-top: 30px;
        padding-bottom: 30px;
    }

    .hero-boxes-grid {
        display: block;
		
		top: 0px;
		margin-bottom: 0px;
    }

    .hero-box {
        margin-bottom: 30px;
    }

    .hero-box:last-child {
        margin-bottom: 0px;
    }

}

/* =======================
   Kleine Smartphones
======================= */

@media only screen and (max-width: 560px) {

    .hero {
        background-image:
        linear-gradient(rgba(64,64,64,0.80), rgba(64,64,64,0.80)),
        url("../pictures/mobil1-klein.webp");

        background-position: center top;
    }

    .mobile-topbar-item {
        font-size: 13px;
        gap: 8px;
    }

    .hero-content-wrap {
        padding-top: 90px;
        padding-bottom: 80px;
    }

    .hero-logo-wrap {
        margin-bottom: 40px;
    }

    .hero-logo-bar {
        height: 42px;
    }

    .hero-logo {
        width: 400px;
		height: 129px;
		background-image: url("../images/logo.png");
    }
	
	.hero-headline {
		font-size: 28px;
	}
	
	.hero-headline span {
		display: none;
	}

	.hero-restwert {
        margin-top: 42px;
        padding: 16px 24px;
    }

    .restwert-black,
    .restwert-white {
        font-size: 20px;
    }

    .hero-boxes-section {
        margin-top: 0px;
		padding-top: 30px;
        padding-bottom: 30px;
    }

    .hero-box {
        padding: 30px 20px;
    }

    .hero-box h2 {
        font-size: 28px;
    }

    .hero-box h2 span {
        font-size: 24px;
    }

    .hero-box p {
        font-size: 15px;
    }
}

@media only screen and (max-width: 400px) {
	
	.hero-logo-bar {
        height: 32px;
    }

    .hero-logo {
        width: 300px;
		height: 97px;
		background-image: url("../images/logo.png");
    }
	
	.hero-restwert {
        margin-top: 42px;
        padding: 16px 20px;
    }
	
}





/* =======================
   INTRO
======================= */

.intro {
    padding: 80px 0px 80px 0px;
    background-color: #FFFFFF;
}

.intro-title {
    margin: 0px 0px 10px 0px;
    color: #000000;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.15;
    text-transform: uppercase;
}

.intro-title span {
    text-transform: none;
}

.intro-subtitle {
    margin-bottom: 45px;
    color: #009036;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.2;
}

.intro-content {
    display: grid;
    grid-template-columns: 1fr 290px;
    column-gap: 60px;
    row-gap: 35px;
    align-items: start;
}

.intro-text-first {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.intro-image {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    width: 250px;
    justify-self: center;
}

.intro-text-second {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
}

.intro-image img {
    display: block;
    width: 100%;
    height: auto;
}

.intro-text p {
    margin: 0px 0px 25px 0px;
    color: #000000;
    font-size: 16px;
    line-height: 1.3;
}

.intro-text p:last-child {
    margin-bottom: 0px;
}

.intro a.link {
    color: #D5001C;
    text-decoration: underline;
}

.intro a.link:hover {
    text-decoration: none;
}


/* =======================
   Desktop 1024-1199
======================= */

@media only screen and (min-width: 1024px) and (max-width: 1199px) {

    .intro {
        padding: 60px 0px 60px 0px;
    }

    .intro-title {
        font-size: 30px;
    }

    .intro-subtitle {
        font-size: 24px;
    }

    .intro-content {
        grid-template-columns: 1fr 250px;
        column-gap: 50px;
        row-gap: 35px;
    }

    .intro-image {
        width: 215px;
    }

}


/* =======================
   Mobile <=1023
======================= */

@media only screen and (max-width: 1023px) {

    .intro {
        padding: 50px 0px 50px 0px;
    }

    .intro-title {
        font-size: 30px;
    }

    .intro-subtitle {
        margin-bottom: 35px;
        font-size: 24px;
    }

    .intro-content {
        display: flex;
        flex-direction: column;
        gap: 0px;
    }

    .intro-text-first {
        order: 1;
    }

    .intro-image {
        order: 2;
        width: 250px;
        margin: 35px auto;
    }

    .intro-text-second {
        order: 3;
    }

    .intro-text p {
        font-size: 16px;
    }

}


/* =======================
   Kleine Smartphones
======================= */

@media only screen and (max-width: 560px) {

    .intro-title {
        font-size: 28px;
    }

    .intro-subtitle {
        margin-bottom: 28px;
        font-size: 24px;
    }

    .intro-image {
        width: 250px;
        margin: 28px auto;
    }

    .intro-text p {
        font-size: 15px;
    }

}




/* =======================
   STANDORTE
======================= */

.standorte-hero {
    position: relative;
    padding: 160px 0px 490px 0px;
    background-image:
    linear-gradient(rgba(64,64,64,0.80), rgba(64,64,64,0.80)),
    url("../pictures/desktop2.webp");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.standorte-headline {
    color: #FFFFFF;
    font-size: 31px;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
}

.standorte-bottom {
    background-color: #DCDCDC;
    padding-bottom: 50px;
}

.standorte-box {
    position: relative;
    margin-top: -330px;
    padding: 50px 50px 50px 50px;
    background-color: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0px 2px 8px rgba(0,0,0,0.18);
}

.standorte-title {
    margin: 0px 0px 12px 0px;
    color: #000000;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.08;
	text-transform: uppercase;
}

.standorte-subtitle {
    margin-bottom: 40px;
    color: #009036;
    font-size: 28px;
    font-weight: bold;
}

.standorte-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 70px;
}

.standorte-left {
    flex: 1 1 auto;
}

.standorte-right {
    flex: 0 0 375px;
}

.standorte-right img {
    display: block;
    width: 100%;
    height: auto;
}

.orte-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 60px;
    row-gap: 0px;
    align-items: start;
}

.orte-group-1 { order: 1; }
.orte-group-2 { order: 4; padding-top:10px; }
.orte-group-3 { order: 2; }
.orte-group-4 { order: 5; padding-top:10px; }
.orte-group-5 { order: 3; }
.orte-group-6 { order: 6; padding-top:10px; }

.orte-group {
    display: flex;
    flex-direction: column;
	align-items: flex-start;
    gap: 10px;
}

.ort-link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    color: #000000;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.ort-link:hover {
    color: #D5001C;
}

.standorte-note {
    margin-top: 50px;
    font-size: 16px;
    line-height: 1.35;
    color: #000000;
    text-align: center;
}

.standorte-note a {
    color: #D5001C;
    text-decoration: underline;
}

.standorte-note a:hover {
    text-decoration: none;
}


/* =======================
   Desktop 1024-1199
======================= */

@media only screen and (min-width: 1024px) and (max-width: 1199px) {

	.standorte-headline {
		font-size: 28px;
	}

	.standorte-title {
		margin: 0px 0px 12px 0px;
		color: #000000;
		font-size: 30px;
		font-weight: bold;
		line-height: 1.08;
		text-transform: uppercase;
	}

	.standorte-subtitle {
		margin-bottom: 40px;
		color: #009036;
		font-size: 24px;
		font-weight: bold;
	}
	
}


/* =======================
   MOBILE <=1023
======================= */

@media only screen and (max-width: 1023px) {

    .standorte-hero {
        padding: 220px 0px 220px 0px;
        background-image:
        linear-gradient(rgba(64,64,64,0.80), rgba(64,64,64,0.80)),
        url("../pictures/mobil2.webp");
        background-position: center top;
    }

    .standorte-headline {
        font-size: 28px;
		margin: 0px auto;
		max-width: 320px;
    }

    .standorte-headline span {
        display: none;
    }

    .standorte-bottom {
		padding-top: 30px;
		padding-bottom: 30px;
	}
	
	.standorte-note {
		margin-top: 30px;
	}
	
    .standorte-box {
        margin-top: 0px;
        padding: 30px 30px;
    }

    .standorte-title {
        font-size: 30px;
    }

    .standorte-subtitle {
        margin-bottom: 34px;
        font-size: 24px;
    }

    .standorte-content {
        flex-direction: column;
        align-items: stretch;
        gap: 0px;
    }

    .standorte-right {
        order: 1;
        width: 100%;
        margin-bottom: 34px;
    }

    .standorte-left {
        order: 2;
    }

    .standorte-right img {
        max-width: 375px;
        margin: 0px auto;
    }

    .orte-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 34px;
    }

    .orte-group-1 { order: 1; padding-top:10px; }
    .orte-group-2 { order: 3; padding-top:10px; }
    .orte-group-3 { order: 5; padding-top:10px; }
    .orte-group-4 { order: 2; padding-top:10px; }
    .orte-group-5 { order: 4; padding-top:10px; }
    .orte-group-6 { order: 6; padding-top:10px; }

}

/* =======================
   Kleine Smartphones
======================= */

@media only screen and (max-width: 560px) {

    .standorte-hero {
        padding: 220px 0px 220px 0px;
        background-image:
        linear-gradient(rgba(64,64,64,0.80), rgba(64,64,64,0.80)),
        url("../pictures/mobil2-klein.webp");
        background-position: center top;
    }

    .standorte-hero {
        padding: 110px 0px 110px 0px;
    }

    .standorte-headline {
        font-size: 28px;
    }

    .standorte-box {
        padding: 30px 20px;
    }

    .standorte-title {
        font-size: 28px;
    }

    .standorte-subtitle {
        font-size: 24px;
    }

    .orte-grid {
        column-gap: 10px;
    }

    .ort-link {
        font-size: 15px;
    }

    .standorte-note {
        font-size: 14px;

        text-align: left;
    }
	
	.standorte-right {
		flex: none;
		width: 100%;
		line-height: 0;
	}
	
	.standorte-right img {
		display: block;
		width: 100%;
		max-width: 375px;
		height: auto;
		margin: 0 auto;
	}

}



/* =======================
   BASIC
======================= */

.basic {
    padding: 80px 0px 80px 0px;
    background-color: #FFFFFF;
}

.basic-intro {
    margin-bottom: 90px;
}

.basic-title {
    margin: 0px 0px 10px 0px;
    color: #000000;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.15;
    text-transform: uppercase;
}

.basic-subtitle {
    margin-bottom: 45px;
    color: #009036;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.2;
}

.basic-subtitle2 {
    margin-bottom: 25px;
    color: #009036;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.2;
}

.basic-intro-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 80px;
}

.basic-intro-text {
    flex: 1 1 0;
}

.basic-intro-text p {
    margin: 0px 0px 25px 0px;
    color: #000000;
    font-size: 16px;
    line-height: 1.3;
}

.basic-intro-text p:last-child {
    margin-bottom: 0px;
}

.basic-intro-image {
    flex: 0 0 500px;
}

.basic-intro-image img {
    display: block;
    width: 100%;
    height: auto;
}

.basic-calculation {
    margin-bottom: 55px;
}

.basic-calculation h3 {
    margin: 0px 0px 32px 0px;
    color: #000000;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.2;
}

.calculation-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 80px;
    row-gap: 60px;
}

.calculation-column {
    padding: 0px;
}

.calculation-column h4 {
    margin: 0px 0px 38px 0px;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.2;
}

.calculation-income h4,
.calculation-sum-income h5 {
    color: #009036;
}

.calculation-costs h4,
.calculation-sum-costs h5 {
    color: #E2001A;
}

.calculation-column p,
.calculation-result p,
.basic-after p {
    margin: 0px 0px 24px 0px;
    color: #000000;
    font-size: 16px;
    line-height: 1.3;
}

.calculation-parts {
    margin: 0px 0px 24px 0px;
    color: #000000;
    font-size: 16px;
    line-height: 1.3;
}

.calculation-parts ul {
    margin: 8px 0px 0px 18px;
    padding: 0px;
}

.calculation-parts li {
    margin-bottom: 3px;
}

.calculation-parts li:last-child {
    margin-bottom: 0px;
}

.calculation-sum {
    margin-top: 45px;
}

.calculation-sum h5 {
    margin: 0px 0px 30px 0px;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.2;
}

.calculation-sum p {
    margin: 0px;
    font-size: 28px;
    line-height: 1.2;
}

.calculation-result {
    grid-column: 1 / 3;
    padding: 0px;
}

.calculation-result h4 {
    margin: 0px 0px 30px 0px;
    color: #000000;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.2;
}

.calculation-result-final {
    color: #000000;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.2;
}

.basic-after {
    margin-bottom: 80px;
}

.basic-after p {
    margin: 0px 0px 25px 0px;
    color: #000000;
    font-size: 16px;
    line-height: 1.3;
}

.basic-after p:last-child {
    margin-bottom: 0px;
}

.basic-cta {
    margin-top: 80px;
}

.basic-cta p {
    margin: 0px 0px 40px 0px;
    color: #000000;
    font-size: 16px;
    line-height: 1.3;
}

.basic-cta-button {
	margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0px;
    padding: 18px 24px 18px 18px;
    background-color: #E2001A;
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.2;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
}

.basic-cta-button:hover {
	transform: scale(1.05);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

.basic-cta-button:active {
    transform: scale(0.97);
}

.basic-cta-button-icon {
    display: inline-block;
    width: 30px;
    height: 20px;
    background-image: url("../images/icons3.png");
    background-repeat: no-repeat;
    background-position: -5px -8px;
}


/* =======================
   Desktop 1024-1199
======================= */

@media only screen and (min-width: 1024px) and (max-width: 1199px) {

    .basic {
        padding: 60px 0px 60px 0px;
    }

    .basic-title {
        font-size: 30px;
    }

    .basic-subtitle, .basic-subtitle2 {
        font-size: 24px;
    }

    .basic-intro-content {
        gap: 50px;
    }

    .basic-intro-image {
        flex: 0 0 420px;
    }

    .basic-calculation h3 {
        font-size: 26px;
    }

    .calculation-box {
        column-gap: 50px;
        row-gap: 55px;
    }

    .calculation-column h4,
    .calculation-sum h5,
    .calculation-sum p,
    .calculation-result h4,
    .calculation-result-final {
        font-size: 24px;
    }

}


/* =======================
   MOBILE <=1023
======================= */

@media only screen and (max-width: 1023px) {

    .basic {
        padding: 50px 0px 50px 0px;
    }

    .basic-intro {
        margin-bottom: 80px;
    }

    .basic-title {
        font-size: 30px;
    }

    .basic-subtitle, .basic-subtitle2 {
        margin-bottom: 35px;
        font-size: 24px;
    }

    .basic-intro-content {
        display: flex;
        flex-direction: column;
        gap: 0px;
    }

    .basic-intro-text {
        order: 1;
    }

    .basic-intro-image {
        order: 2;
        flex: none;
        width: 100%;
        margin-top: 35px;
    }

    .basic-calculation {
        margin-bottom: 55px;
    }

    .basic-calculation h3 {
        font-size: 30px;
    }

    .calculation-box {
        display: flex;
        flex-direction: column;
        gap: 55px;
    }

    .calculation-income {
        order: 1;
    }

    .calculation-costs {
        order: 2;
    }

    .calculation-result {
        order: 3;
    }

    .calculation-column h4,
    .calculation-sum h5,
    .calculation-sum p,
    .calculation-result h4,
    .calculation-result-final {
        font-size: 28px;
    }

    .basic-after {
        margin-bottom: 80px;
    }

    .basic-cta {
        margin-top: 80px;
    }

}


/* =======================
   Kleine Smartphones
======================= */

@media only screen and (max-width: 560px) {

    .basic-title {
        font-size: 28px;
    }

    .basic-subtitle {
        font-size: 24px;
    }

    .basic-intro-text p,
    .basic-cta p {
        font-size: 15px;
    }

	.basic-calculation h3 {
        font-size: 28px;
    }

    .calculation-column h4,
    .calculation-sum h5,
    .calculation-sum p,
    .calculation-result h4,
    .calculation-result-final {
        font-size: 24px;
    }

    .calculation-column p,
    .calculation-parts,
    .calculation-result p,
    .basic-after p {
        font-size: 15px;
    }
	
	.basic-cta-button {
		padding: 18px 18px 18px 14px;
		font-size: 20px;
	}

}




/* =======================
   BEWERTUNGEN
======================= */

.bewertungen {
    background-color: #DCDCDC;
}

.bewertungen-bg {
    background-image:
    linear-gradient(rgba(64,64,64,0.80), rgba(64,64,64,0.80)),
    url("../pictures/desktop3.webp");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.bewertungen-bg .container {
    padding-top: 170px;
    padding-bottom: 350px;
}

.bewertungen-headline {
    max-width: 880px;
    margin: 0 auto;
    color: #FFFFFF;
    font-size: 31px;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
}

.bewertungen-content {
    margin-top: -190px;
    padding-bottom: 50px;
}

.bewertungen-boxes {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 50px;
}

.bewertungen-box {
    flex: 1 1 0;
    padding: 30px 30px 30px 30px;
    text-align: center;
}

.bewertungen-box-title {
    margin-bottom: 30px;
    color: #009036;
    font-size: 28px;
    font-weight: bold;
}

.bewertungen-icon {
    width: 160px;
    height: 90px;
    margin: 0 auto 38px auto;
    background-image: url("../images/icons2.png");
    background-repeat: no-repeat;
    background-position: 0px -419px;
}

.bewertungen-box-text {
    margin-bottom: 30px;
    color: #000000;
    font-size: 16px;
    line-height: 1.3;
    text-align: left;
}

.bewertungen-name {
    color: #7A7A7A;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.3;
}

.bewertungen-name span {
    color: #E3001B;
}

.bewertungen-hinweis {
    color: #000000;
    font-size: 16px;
    line-height: 1.3;
    text-align: center;
}



/* =======================
   Desktop 1024-1199
======================= */

@media only screen and (min-width: 1024px) and (max-width: 1199px) {

    .bewertungen-bg .container {
        padding-top: 170px;
        padding-bottom: 350px;
    }

    .bewertungen-headline {
        max-width: 800px;
        font-size: 28px;
    }

    .bewertungen-content {
        margin-top: -190px;
    }

    .bewertungen-box {
        padding: 30px 30px 30px 30px;
    }

    .bewertungen-box-title {
        font-size: 24px;
    }

}


/* =======================
   Mobile <=1023
======================= */

@media only screen and (max-width: 1023px) {

    .bewertungen-bg {
        background-image:
        linear-gradient(rgba(64,64,64,0.80), rgba(64,64,64,0.80)),
        url("../pictures/mobil3.webp");
        background-position: center top;
    }

    .bewertungen-bg .container {
        padding-top: 220px;
        padding-bottom: 220px;
    }

    .bewertungen-headline {
        max-width: 290px;
        font-size: 28px;
    }

    .bewertungen-headline span {
        display: none;
    }

    .bewertungen-content {
        margin-top: 30px;
        padding-bottom: 30px;
    }

    .bewertungen-boxes {
        flex-direction: column;
        gap: 0px;
        margin-bottom: 30px;
    }

    .bewertungen-box {
        width: 100%;
        padding: 30px 30px 30px 30px;
    }

    .bewertungen-box-title {
        font-size: 24px;
    }

}


/* =======================
   Kleine Smartphones
======================= */

@media only screen and (max-width: 560px) {

    .bewertungen-bg {
        background-image:
        linear-gradient(rgba(64,64,64,0.80), rgba(64,64,64,0.80)),
        url("../pictures/mobil3-klein.webp");
        background-position: center top;
    }

    .bewertungen-bg .container {
        padding-top: 110px;
        padding-bottom: 110px;
    }

    .bewertungen-headline {
        font-size: 28px;
    }

    .bewertungen-box {
        padding: 30px 20px 30px 20px;
    }

    .bewertungen-box-title {
        font-size: 24px;
    }

    .bewertungen-box-text,
    .bewertungen-name,
    .bewertungen-hinweis {
        font-size: 15px;
    }

}




/* =======================
   ABLAUF
======================= */

.ablauf {
    padding: 80px 0px 80px 0px;
    background-color: #FFFFFF;
}

.ablauf-intro {
    margin-bottom: 90px;
}

.ablauf-title {
    margin: 0px 0px 10px 0px;
    color: #000000;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.15;
    text-transform: uppercase;
}

.ablauf-subtitle {
    margin-bottom: 45px;
    color: #009036;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.2;
}

.ablauf-intro-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 80px;
}

.ablauf-intro-text {
    flex: 1 1 0;
}

.ablauf-intro-text p,
.ablauf-step p {
    margin: 0px 0px 25px 0px;
    color: #000000;
    font-size: 16px;
    line-height: 1.3;
}

.ablauf-intro-text p:last-child,
.ablauf-step p:last-child {
    margin-bottom: 0px;
}

.ablauf-intro-image {
    flex: 0 0 500px;
}

.ablauf-intro-image img {
    display: block;
    width: 100%;
    height: auto;
}

.ablauf a.link {
    color: #D5001C;
    text-decoration: underline;
}

.ablauf a.link:hover {
    text-decoration: none;
}

.ablauf-phone-button {
    margin: 30px 0px 55px 0px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0px;
    padding: 18px 24px 18px 18px;
    background-color: #E2001A;
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.2;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
}

.ablauf-phone-button:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

.ablauf-phone-button:active {
    transform: scale(0.97);
}

.ablauf-phone-button-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 30px;
    height: 25px;
    margin-right: 12px;
    background-image: url("../images/icons3.png");
    background-repeat: no-repeat;
    background-position: 0px -64px;
}

.ablauf-step {
    margin-bottom: 70px;
}

.ablauf-step:last-child {
    margin-bottom: 0px;
}

.ablauf-step h3 {
    margin: 0px 0px 25px 0px;
    color: #000000;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.2;
}

/* =======================
   Desktop 1024-1199
======================= */

@media only screen and (min-width: 1024px) and (max-width: 1199px) {

    .ablauf {
        padding: 60px 0px 60px 0px;
    }

    .ablauf-title {
        font-size: 30px;
    }

    .ablauf-subtitle {
        font-size: 24px;
    }

    .ablauf-intro-content {
        gap: 50px;
    }

    .ablauf-intro-image {
        flex: 0 0 430px;
    }
	
	.ablauf-step {
		margin-bottom: 60px;
	}

}

/* =======================
   Mobile <=1023
======================= */

@media only screen and (max-width: 1023px) {

    .ablauf {
        padding: 50px 0px 50px 0px;
    }

    .ablauf-intro {
        margin-bottom: 80px;
    }

    .ablauf-title {
        font-size: 30px;
    }

    .ablauf-subtitle {
        margin-bottom: 35px;
        font-size: 24px;
    }

    .ablauf-intro-content {
        display: flex;
        flex-direction: column;
        gap: 0px;
    }

    .ablauf-intro-text {
        order: 1;
    }

    .ablauf-intro-image {
        order: 2;
        flex: none;
        width: 100%;
        margin-top: 35px;
    }

    .ablauf-step {
        margin-bottom: 60px;
    }

    .ablauf-step h3 {
        font-size: 30px;
    }

}

/* =======================
   Kleine Smartphones
======================= */

@media only screen and (max-width: 560px) {

    .ablauf-title {
        font-size: 28px;
    }

    .ablauf-subtitle {
        font-size: 24px;
    }

    .ablauf-intro-text p,
    .ablauf-step p {
        font-size: 15px;
    }

    .ablauf-step h3 {
        font-size: 28px;
    }
	
	.ablauf-phone-button {
		padding: 18px 18px 18px 14px;
		font-size: 20px;
	}

}




/* =======================
   Kontakt
======================= */

.kontakt-hero {
    position: relative;
    padding: 160px 0px 490px 0px;
    background-image:
    linear-gradient(rgba(64,64,64,0.80), rgba(64,64,64,0.80)),
    url("../pictures/desktop4.webp");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.kontakt-headline {
    color: #FFFFFF;
    font-size: 31px;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
}

.kontakt-bottom {
    background-color: #DCDCDC;
    padding-bottom: 50px;
}

.kontakt-box {
    position: relative;
    margin-top: -330px;
    padding: 50px 50px 50px 50px;
    background-color: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0px 2px 8px rgba(0,0,0,0.18);
}

.kontakt-title {
    margin: 0px 0px 12px 0px;
    color: #000000;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.08;
	text-transform: uppercase;
}

.kontakt-subtitle {
    margin-bottom: 40px;
    color: #009036;
    font-size: 28px;
    font-weight: bold;
}

.kontakt-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 70px;
}

.kontakt-note {
    margin-top: 50px;
    font-size: 16px;
    line-height: 1.35;
    color: #000000;
    text-align: center;
}

.kontakt-section .kurz {
    display: none;
}

.kontakt-section .lang {
    display: inline;
}



/* =======================
   Desktop 1024-1199
======================= */

@media only screen and (min-width: 1024px) and (max-width: 1199px) {

	.kontakt-headline {
		font-size: 28px;
	}

	.kontakt-title {
		margin: 0px 0px 12px 0px;
		color: #000000;
		font-size: 30px;
		font-weight: bold;
		line-height: 1.08;
		text-transform: uppercase;
	}

	.kontakt-subtitle {
		margin-bottom: 40px;
		color: #009036;
		font-size: 24px;
		font-weight: bold;
	}
	
}


/* =======================
   MOBILE <=1023
======================= */

@media only screen and (max-width: 1023px) {

    .kontakt-hero {
        padding: 220px 0px 220px 0px;
        background-image:
        linear-gradient(rgba(64,64,64,0.80), rgba(64,64,64,0.80)),
        url("../pictures/mobil4.webp");
        background-position: center top;
    }

    .kontakt-headline {
        font-size: 28px;
		margin: 0px auto;
		max-width: 300px;
    }

    .kontakt-bottom {
		padding-top: 30px;
		padding-bottom: 30px;
	}
	
	.kontakt-note {
		margin-top: 30px;
	}
	
    .kontakt-box {
        margin-top: 0px;
        padding: 30px 30px;
    }

    .kontakt-title {
        font-size: 30px;
    }

    .kontakt-subtitle {
        margin-bottom: 34px;
        font-size: 24px;
    }

    .kontakt-content {
        flex-direction: column;
        align-items: stretch;
        gap: 0px;
    }
	
	.kontakt-section .kurz {
		display: inline;
	}

	.kontakt-section .lang {
		display: none;
	}
	
}

/* =======================
   Kleine Smartphones
======================= */

@media only screen and (max-width: 560px) {

    .kontakt-hero {
        padding: 220px 0px 220px 0px;
        background-image:
        linear-gradient(rgba(64,64,64,0.80), rgba(64,64,64,0.80)),
        url("../pictures/mobil4-klein.webp");
        background-position: center top;
    }

    .kontakt-hero {
        padding: 110px 0px 110px 0px;
    }

    .kontakt-headline {
        font-size: 28px;
    }

    .kontakt-box {
        padding: 30px 20px;
    }

    .kontakt-title {
        font-size: 28px;
    }

    .kontakt-subtitle {
        font-size: 24px;
    }

    .kontakt-note {
        font-size: 14px;
        text-align: left;
    }

}




/* =======================
   CHECKLISTE
======================= */

.checkliste {
    padding: 80px 0px 80px 0px;
    background-color: #FFFFFF;
}

.checkliste-intro {
    margin-bottom: 80px;
}

.checkliste-title {
    margin: 0px 0px 10px 0px;
    color: #000000;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.15;
    text-transform: uppercase;
}

.checkliste-subtitle {
    margin-bottom: 45px;
    color: #009036;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.2;
}

.checkliste-intro-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 80px;
}

.checkliste-intro-text {
    flex: 1 1 0;
}

.checkliste-intro-text p,
.checkliste-info p {
    margin: 0px 0px 25px 0px;
    color: #000000;
    font-size: 16px;
    line-height: 1.3;
}

.checkliste-intro-text ul {
    margin: 0px 0px 28px 0px;
    padding-left: 18px;
}

.checkliste-intro-text li {
    margin-bottom: 10px;
    color: #000000;
    font-size: 16px;
    line-height: 1.3;
}

.checkliste-intro-image {
    flex: 0 0 500px;
}

.checkliste-intro-image img {
    display: block;
    width: 100%;
    height: auto;
}

.checkliste h3 {
    margin: 0px 0px 25px 0px;
    color: #000000;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.2;
}

.checkliste-info {
    margin-bottom: 50px;
}



/* =======================
   Desktop 1024-1199
======================= */

@media only screen and (min-width: 1024px) and (max-width: 1199px) {

    .checkliste {
        padding: 60px 0px 60px 0px;
    }

    .checkliste-title {
        font-size: 30px;
    }

    .checkliste-subtitle {
        font-size: 24px;
    }

    .checkliste-intro-content {
        gap: 50px;
    }

    .checkliste-intro-image {
        flex: 0 0 420px;
    }

}


/* =======================
   Mobile <=1023
======================= */

@media only screen and (max-width: 1023px) {

    .checkliste {
        padding: 50px 0px 50px 0px;
    }

    .checkliste-intro {
        margin-bottom: 80px;
    }

    .checkliste-title {
        font-size: 30px;
    }

    .checkliste-subtitle {
        margin-bottom: 35px;
        font-size: 24px;
    }

    .checkliste-intro-content {
        display: flex;
        flex-direction: column;
        gap: 0px;
    }

    .checkliste-intro-text {
        order: 1;
    }

    .checkliste-intro-image {
        order: 2;
        flex: none;
        width: 100%;
        margin-top: 35px;
    }

    .checkliste h3 {
        font-size: 30px;
    }

}


/* =======================
   Kleine Smartphones
======================= */

@media only screen and (max-width: 560px) {

    .checkliste-title {
        font-size: 28px;
    }

    .checkliste-subtitle {
        font-size: 24px;
    }

    .checkliste-intro-text p,
    .checkliste-intro-text li,
    .checkliste-info p {
        font-size: 15px;
    }

    .checkliste h3 {
        font-size: 28px;
    }

}



/* ***************/
/* Baselink */
/* ***************/


a.baselink:link, a.baselink:visited {
	color: #000000;  
	font-family: arial, serif; 
	font-size: 16px;
	text-decoration: none;
}

a.baselink:hover, a.baselink:focus, a.baselink:active {
	text-decoration: none;
	color: #000000; 
}

@media only screen and (max-width: 560px) {
	
	a.baselink:link, a.baselink:visited {
		font-size: 15px;
	}
	
}