:root {
    --ah-green: #a2ca88;
    --ah-orange: #f6af75;
}

.web .introduction {
    background: var(--color-main);
}

.web .page.kleine-ausflugshelden .btn:hover {
    color: var(--ah-orange);
    background: white;
}

.web .page.intenu .btn:hover {
    color: var(--intenu-blue);
    background: white;
}

.web .page.kleine-ausflugshelden .page-column:first-child {
	background-image: url(../images/web/ah-mockup.webp);
	background-position: center;
	background-size: contain;
	background-color: var(--ah-green);
	background-repeat: no-repeat;
}

.web .page.kleine-ausflugshelden h2 {
    color: var(--ah-green);
}

.web .page.kleine-ausflugshelden .btn {
    background: var(--ah-orange);
}

.web .page .page-inner.flex,
.web .page .page-inner.vert-center {
    gap: 25px;
}

.web h2 {
    margin: 0;
}



/** Intenu **/
.web .page.intenu h2 {
    color: var(--intenu-blue);
}

.web .page.intenu .btn {
    background: var(--intenu-blue);
}

.web .page.intenu .page-column:nth-child(2) {
    padding: var(--container-border-size) var(--container-border-size) var(--container-border-size) 0;
    background: var(--intenu-blue);
}

.web .page.intenu .page-column:nth-child(2) * {
    display: block;
    height: 100%;
    width: 100%;
}

.web .page.intenu .page-column:nth-child(2) div {
    background-image: url(../images/web/intenu-mockup.webp);
	background-position: center;
	background-size: contain;
	background-color: var(--intenu-blue);
	background-repeat: no-repeat;
}

@media (max-width: 799px) {
    .web .page:nth-child(3) {
        background-color: var(--ah-green);
    }
    
    .web .page:nth-child(3) .page-column:last-child {
        background-color: var(--color-background);
    }

    .web .page:nth-child(4) .page-column:first-child {
        order: 1;
    }
}