/* ==========================================================================
   RG Gebäudereinigung – Stylesheet
   1. Grundlagen (Reset, Schriften, Variablen)
   2. Selektoren alphabetisch (A–Z)
   3. Breakpoints (750px, 1000px, 1350px, 1650px, prefers-reduced-motion)
   ========================================================================== */

/* ### - GRUNDLAGEN - ### */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
@font-face {
    font-family: Inter;
    src: url(Inter_18pt-Regular.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: Inter;
    src: url(Inter_18pt-Bold.woff2) format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: Inter;
    src: url(Inter_18pt-Black.woff2) format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
:root {
    --sans: Inter, 'Open Sans', sans-serif;

    --radius: 10px;
    --padding-innen: 20px;
    --padding-seiten: 20px;
    --padding-obenunten: 50px;
    --content-gap: 20px;

    --h1: 3rem;
    --h2: 2rem;
    --h3: 1.5rem;
    --copy: 1rem;

    --blau: #0361AD;
    /* dunkleres Blau für Text auf Grün (Kontrast ≥ 4.5:1) */
    --blaudunkel: #024F8F;
    --blauhell: #C6E6FF;
    --gruen: #73E8B0;
    --gruenhell: #CCF9E4;
    --grau: #D0D2D3;
    --grauhell: #F2F2F3;
    --weiss: #FFFFFF;
    --schwarz: #111111;
    --rot: #B3261E;
}
html {
    scroll-padding-top: 120px;
}
:focus-visible {
    outline: 3px solid var(--blau);
    outline-offset: 3px;
}
.bg-blau :focus-visible {
    outline-color: var(--weiss);
}

/* ### - A - ### */
a {
    color: inherit;
}
.ablauf {
    list-style-type: none;
    font-size: var(--copy);
}
.ablauf li {
    display: grid;
    grid-template-columns: var(--h3) 1fr;
    gap: 10px;
}
.ablauf span {
    font-weight: 900;
}
address {
    font-style: normal;
}
.angebot-start-text p,
.angebot-start-text ul {
    font-size: var(--h3);
}
.angebot-start-text ul {
    list-style-type: "✓";
    margin: var(--copy) 1.5rem;
    line-height: 1.5;
}
.angebot-start-text ul li {
    padding-left: 10px;
}
.ansprechpartner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}
/* .radius setzt overflow: hidden – die Sprechblase muss aber herausragen dürfen */
.ansprechpartner.radius {
    overflow: visible;
}
.ansprechpartner .h2-sub {
    font-size: 0.85rem;
    letter-spacing: 1px;
    overflow-wrap: anywhere;
    hyphens: auto;
}
.ansprechpartner-foto,
.ansprechpartner-platzhalter {
    width: min(220px, 70%);
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 30%;
}
.ansprechpartner-platzhalter {
    display: grid;
    place-content: center;
    background-color: var(--blauhell);
    font-size: var(--h2);
    font-weight: 900;
}
.ansprechpartner-text {
    display: grid;
    grid-template-rows: max-content 1fr max-content;
    height: 100%;
    gap: 20px;
}

/* ### - B - ### */
.beitrag-text img {
    border-radius: var(--radius);
}
.beitrag-text ul,
.beitrag-text ol {
    margin-left: 1.5rem;
    font-size: var(--copy);
    line-height: 1.5;
}
.benefits {
    justify-content: space-between;
    list-style-type: none;
    font-size: var(--copy);
    display: flex;
    flex-direction: column;
    text-align: center;
}
.bg-blau { background-color: var(--blau); color: var(--weiss); }
.bg-blauhell { background-color: var(--blauhell);}
.bg-grau { background-color: var(--grau);}
.bg-grauhell { background-color: var(--grauhell);}
.bg-gruen { background-color: var(--gruen); color: var(--blaudunkel);}
.bg-gruenhell { background-color: var(--gruenhell);}
.bg-weiss { background-color: var(--weiss);}
body {
    background-color: #FAFAFA;
    font-family: var(--sans);
    font-weight: 400;
    color: var(--blau);
    font-size: 14px;
}
.button {
    background-color: var(--gruen);
    padding: 10px 15px;
    color: var(--blaudunkel);
    font-family: var(--sans);
    font-size: var(--copy);
    font-weight: 700;
    text-decoration: none;
    border: none;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    height: max-content;
    cursor: pointer;
    transition: background-color 0.2s;
}
.button:hover {
    background-color: var(--gruenhell);
}

/* ### - C - ### */
.close {
    background: none;
    border: none;
    cursor: pointer;
    justify-self: end;
}
.close img {
    height: 30px;
    width: auto;
    transition: 0.8s;
}
.close img.rotate {
    transform: rotate(-180deg);
}
.content {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: var(--content-gap);
}
/* verhindert, dass lange Inhalte/Bilder das Grid sprengen */
.content > *,
.form-grid > * {
    min-width: 0;
}
.content-text h2 {
    margin-bottom: var(--h1);
}
.content-text h3 {
    font-weight: 400;
    margin-bottom: var(--copy);
}
.cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ### - D - ### */

/* ### - E - ### */
.expand {
    width: 15px;
    height: auto;
    transition: transform 0.3s;
}

/* ### - F - ### */
/* Einblend-Animation nur mit JavaScript, sonst bleibt der Inhalt sichtbar */
.js .fade {
    transition: transform ease-out 0.4s;
    transform: translateY(100px);
}
.js .fade.active {
    transform: translateY(0px);
}
.flex-center {
    justify-content: center;
    align-items: center;
    text-align: center;
}
.flex-column {
    display: flex;
    flex-direction: column;
}
.flex-gap-10 {
    gap: 10px;
}
.flex-gap-20 {
    gap: 20px;
}
.flex-row {
    display: flex;
    flex-direction: row;
}
.flex-wrap {
    flex-wrap: wrap;
}
footer {
    padding: var(--padding-obenunten) var(--padding-seiten);
    color: var(--blau);
}
footer a {
    color: var(--blau);
    text-decoration: underline;
    text-underline-offset: 3px;
}
footer a:hover {
    text-decoration: underline;
}
footer ul {
    list-style-type: none;
    font-size: var(--copy);
}
.footer-legal {
    padding-top: var(--content-gap);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.footer-leiste {
    padding: 15px var(--padding-seiten);
    text-align: center;
}
.footer-leiste a {
    color: var(--weiss);
}
.footer-leiste p {
    font-size: 0.9rem;
}
.footer-titel {
    font-size: var(--copy);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 5px;
}
form {
    font-size: var(--copy);
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
}
form [aria-invalid="true"] {
    border: 2px solid var(--rot);
}
form button {
    justify-self: end;
}
form input[type="checkbox"],
form input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    border: 1px solid var(--blau);
    background-color: var(--weiss);
    width: 1.15em;
    height: 1.15em;
    cursor: pointer;
    display: grid;
    place-content: center;
}
form input[type="checkbox"] {
    border-radius: 3px;
}
form input[type="radio"] {
    border-radius: 50%;
}
form input[type="checkbox"]::before,
form input[type="radio"]::before {
    content: "";
    width: 0.6em;
    height: 0.6em;
    border-radius: inherit;
    background-color: var(--blau);
    transform: scale(0);
    transition: transform 0.15s;
}
form input[type="checkbox"]:checked::before,
form input[type="radio"]:checked::before {
    transform: scale(1);
}
form input[type="text"],
form input[type="tel"],
form input[type="email"],
form textarea {
    font-family: var(--sans);
    font-size: var(--copy);
    color: var(--schwarz);
    border-radius: var(--radius);
    background-color: var(--weiss);
    border: 1px solid var(--blau);
    padding: 10px;
    width: 100%;
}
form label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
form legend {
    margin-bottom: 20px;
}
form select {
    font-family: var(--sans);
    font-size: var(--copy);
    color: var(--schwarz);
    border-radius: var(--radius);
    background-color: var(--weiss);
    border: 1px solid var(--blau);
    padding: 10px;
    width: 100%;
}
form textarea {
    resize: vertical;
}
.form-error,
.form-success {
    padding: var(--padding-innen);
    border-radius: var(--radius);
    font-size: var(--copy);
}
.form-error {
    background-color: #FDECEA;
    color: var(--rot);
}
.form-error-inline {
    display: block;
    margin-top: 5px;
    color: var(--rot);
    font-size: 0.9rem;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: var(--padding-innen);
    grid-row-gap: 10px;
}
.form-hinweis a {
    color: var(--blau);
}
.form-schritt {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: 0;
    min-width: 0;
}
.form-success {
    background-color: var(--gruenhell);
}
.form-upload {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.form-upload .form-hinweis {
    font-size: 0.9rem;
}
.form-upload input[type="file"] {
    font-family: var(--sans);
    font-size: var(--copy);
    padding: 10px;
    border: 1px dashed var(--blau);
    border-radius: var(--radius);
    background-color: var(--weiss);
    max-width: 100%;
}
.form-upload label {
    font-weight: 700;
}

/* ### - G - ### */

/* ### - H - ### */
h1 {
    font-size: var(--h1);
    font-weight: 900;
    margin-bottom: 20px;
    hyphens: auto;
    text-wrap: balance;
    hyphenate-limit-chars: 10 4 4;
}
h2 {
    font-size: var(--h1);
    font-weight: 700;
    margin-bottom: var(--copy);
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
    text-wrap: balance;
}
.h2-sub {
    font-size: var(--copy);
    text-transform: uppercase;
    letter-spacing: 3px;
}
h3,
.h3 {
    font-size: var(--h3);
    font-weight: 700;
}
header {
    background-color: var(--weiss);
    padding: 10px;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}
.header-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    pointer-events: none;
}
.hero-slide.active {
    opacity: 1;
    pointer-events: auto;
}
.hero-slide img {
    display: block;
}
.hero-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1/1;
}
.hero-slider-pause {
    display: none;
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 1;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    place-content: center;
}
.js .hero-slider-pause {
    display: grid;
}
/* Pause-Symbol (zwei Balken) */
.hero-slider-pause span {
    width: 12px;
    height: 14px;
    border-left: 4px solid var(--blau);
    border-right: 4px solid var(--blau);
}
/* Play-Symbol (Dreieck) */
.hero-slider-pause[aria-pressed="true"] span {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 12px;
    border-color: transparent transparent transparent var(--blau);
}
.hero-slider-sizer {
    display: block;
    width: 100%;
    visibility: hidden;
    pointer-events: none;
}
.honeypot {
    position: absolute;
    left: -9999px;
}

/* ### - I - ### */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ### - J - ### */
.job {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--padding-innen);
}

/* ### - K - ### */
.kachel {
    gap: 15px;
}
.kachel-bild {
    display: block;
    overflow: hidden;
}
.kachel-link {
    color: inherit;
    text-decoration: none;
}
.kachel-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}
.karten-legende {
    list-style-type: none;
    font-size: var(--copy);
}
.karten-legende li {
    display: flex;
    align-items: center;
    gap: 8px;
}
.karussell {
    grid-column: span 12;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.karussell::-webkit-scrollbar {
    display: none;
}
.karussell-button-wrapper {
    display: flex;
    justify-content: space-evenly;
}
.karussell-pfeil {
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: var(--gruen);
    color: var(--blau);
    cursor: pointer;
    transition: background 0.2s;
    margin-top: var(--padding-innen);
    display: flex;
    justify-content: center;
    align-items: center;
}
.karussell-pfeil:disabled {
    opacity: 0;
    cursor: not-allowed;
    pointer-events: none;
}
.karussell-pfeil:hover { background: var(--gruenhell); }
.karussell-pfeil-links img {
    transform: rotate(90deg) translateY(2px);
    width: 50%;
}
.karussell-pfeil-rechts img {
    transform: rotate(-90deg) translateY(2px);
    width: 50%;
}
.karussell-wrapper {
    display: flex;
    gap: var(--content-gap);
}
.karussell-wrapper > .kundenstimme {
    flex-shrink: 0;
    scroll-snap-align: start;
    width: 100%;
}
.kontakt-buttons {
    margin-top: 5px;
}
/* Telefonnummer/E-Mail als Sprechblase bei Hover und Tastaturfokus */
.kontakt-info {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    z-index: 3;
    transform: translate(-50%, 4px);
    max-width: 240px;
    width: max-content;
    padding: 8px 12px;
    border-radius: var(--radius);
    background-color: var(--blau);
    color: var(--weiss);
    font-size: 0.9rem;
    line-height: 1.3;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}
/* Spitze der Sprechblase */
.kontakt-info::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: var(--blau);
}
.kontakt-item {
    position: relative;
    display: inline-block;
}
.kontakt-item:hover .kontakt-info,
.kontakt-item:focus-within .kontakt-info {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.kontaktweg {
    display: grid;
    grid-template-rows: max-content 1fr 1fr max-content;
    text-align: center;
}
.kontaktweg a {
    justify-self: center;
}
.kontaktweg img {
    height: 50px;
    width: auto;
    justify-self: center;
}
.kundenstimme {
    grid-column: span 12;
}
.kundenstimme-name {
    font-size: var(--copy);
}
.kundenstimme-text,
.kundenstimme-text p {
    font-size: var(--h3);
}

/* ### - L - ### */
.legende-pin {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--blau);
}
.legende-pin-gross {
    width: 18px;
    height: 18px;
    background-color: var(--gruen);
}
.leistung {
    display: grid;
    grid-template-rows: max-content 1fr max-content;
}
.leistung div {
    align-self: self-start;
}
.leistung div:last-child {
    align-self: self-end;
    padding-top: 0;
}
.leistung img {
    aspect-ratio: 16/9;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.leistung-icon {
    height: 40px;
    width: auto;
}
.js .leistungsbox-body {
    height: 0;
    overflow: hidden;
    transition: height 0.5s;
}
.js .leistungsbox-body.show {
    height: auto;
}
.leistungsbox-header button {
    display: grid;
    grid-template-columns: 50px 1fr max-content;
    gap: 20px;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-family: var(--sans);
    font-size: var(--copy);
    font-weight: 400;
    text-align: left;
}
.leistungsbox-header button[aria-expanded="true"] .expand {
    transform: rotate(180deg);
}
.leistungsbox-inner {
    padding-top: var(--padding-innen);
}
.leistungsitems {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
    margin-top: var(--h1);
}
.logo img {
    height: 50px;
    width: auto;
    transition: height 0.2s;
}

/* ### - M - ### */
main {
    margin-top: 70px;
}
main:focus {
    outline: none;
}
.marker {
    display: inline;
    --marker-url: url('marker.svg');
    background-image: var(--marker-url);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    background-position: left center;
    /* jede Zeile einzeln markieren */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 0.1em 0;
    transition: background-size 0.5s ease-out;
}
.marker.animated,
html:not(.js) .marker {
    background-size: 100% 100%;
}
.menu {
    border: none;
    background-color: var(--weiss);
    cursor: pointer;
    width: max-content;
    height: max-content;
    justify-self: end;
    align-self: center;
}
.menu img {
    height: 25px;
    width: auto;
}

/* ### - N - ### */
nav#main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    background-color: var(--blau);
    padding: var(--padding-innen);
    display: grid;
    grid-template-rows: max-content 1fr max-content;
    gap: 50px;
    transform: translateX(100vw);
    visibility: hidden;
    transition: transform 0.3s, visibility 0.3s;
}
nav#main-nav.open {
    transform: translateX(0);
    visibility: visible;
}
#main-nav a {
    color: var(--weiss);
    text-decoration: none;
}
#main-nav a.button {
    color: var(--blaudunkel);
}
#main-nav a[aria-current="page"] {
    text-decoration: underline;
    text-underline-offset: 6px;
}
.nav-main {
    font-size: var(--h1);
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style-type: none;
}
.nav-second {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style-type: none;
    /* Übergang für das Ausblenden am Footer (siehe Breakpoint 1000px) */
    transition: opacity 0.3s, visibility 0.3s;
}
.nav-second img {
    height: 12px;
    width: auto;
    margin-right: 10px;
}
.no-padding-top {
    padding-top: 0;
}

/* ### - O - ### */
.oeffnungszeiten {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 5px 20px;
    font-size: var(--copy);
    line-height: 1.5;
}

/* ### - P - ### */
p {
    font-size: var(--copy);
    line-height: 1.5;
    margin-bottom: var(--copy);
}
p:last-of-type {
    margin-bottom: 0;
}
.p-margin-0 p {
    margin-bottom: 0;
}
.padding-innen {
    padding: var(--padding-innen);
}
.padding-obenunten {
    padding: var(--padding-obenunten) 0;
}
.padding-seiten {
    padding: 0 var(--padding-seiten);
}
.partner img {
    width: 70%;
}
.pyramide {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
}
.pyramide-ebene {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--content-gap);
}
.pyramide-ebene > li {
    flex: 0 1 100%;
}
.pyramide-spitze .ansprechpartner-foto,
.pyramide-spitze .ansprechpartner-platzhalter {
    width: min(260px, 80%);
}

/* ### - Q - ### */

/* ### - R - ### */
.radio-card,
.checkbox-item {
    grid-column: span 12;
    padding: 10px 15px;
    border: 1px solid var(--blau);
    border-radius: var(--radius);
    background-color: var(--weiss);
}
.radio-card:has(input:checked),
.checkbox-item:has(input:checked) {
    background-color: var(--blauhell);
}
.radius {
    border-radius: var(--radius);
    overflow: hidden;
}

/* ### - S - ### */
section {
    padding: var(--padding-obenunten) var(--padding-seiten);
}
.skip-link {
    position: absolute;
    top: -100px;
    left: 10px;
    z-index: 10;
    padding: 10px 15px;
    background-color: var(--blau);
    color: var(--weiss);
    border-radius: var(--radius);
}
.skip-link:focus {
    top: 10px;
}
/* leere Abstandshalter nur im Desktop-Layout */
.spacer {
    display: none;
}
.span-1,
.span-3,
.span-4,
.span-6,
.span-8,
.span-12 {
    grid-column: span 12;
}
.span-2 {
    grid-column: span 6;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.standort-adresse + .standort-adresse {
    margin-top: var(--h3);
}
/* Mit JavaScript nur die gewählte Adresse zeigen, ohne JS alle untereinander */
.js .standort-adresse {
    display: none;
}
.js .standort-adresse.aktiv {
    display: block;
}
.js .standort-adresse + .standort-adresse {
    margin-top: 0;
}
.standort-tab {
    border: none;
    font-family: var(--sans);
    font-size: var(--copy);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
.standort-tab:hover {
    background-color: var(--gruenhell);
}
.standort-tab[aria-selected="true"] {
    background-color: var(--blau);
    color: var(--weiss);
}
.standort-titel {
    margin-bottom: var(--copy);
}
.standorte {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
    font-size: var(--copy);
    list-style-type: none;
}
.standorte + p {
    margin-top: var(--content-gap);
}
.standorte-karte-box {
    align-self: start;
}
.standortmain p {
    font-size: var(--h3);
    margin-bottom: var(--copy);
}
.standortmain p:last-of-type {
    margin-bottom: 0;
}

/* ### - T - ### */
.telefonnummer-gross {
    font-size: var(--h1);
    font-weight: 900;
    text-decoration: none;
    color: inherit;
}
.telefonnummer-gross:hover {
    text-decoration: underline;
}
.textseite a {
    overflow-wrap: anywhere;
}
.textseite h2 {
    font-size: var(--h3);
    margin: var(--h3) 0 0;
}
.textseite ul {
    margin-left: 1.5rem;
    font-size: var(--copy);
    line-height: 1.5;
}

/* ### - U - ### */

/* ### - V - ### */
.versprechen-nummer {
    font-size: var(--h1);
    font-weight: 900;
}

/* ### - W - ### */
.warum-item img {
    height: 50px;
    width: auto;
}

/* ### - X - ### */

/* ### - Y - ### */

/* ### - Z - ### */
.zdf-item span {
    font-size: var(--h1);
    font-weight: 900;
}
.zitat p {
    font-size: var(--h2);
    font-weight: 700;
    line-height: 1.2;
    text-wrap: balance;
}
.zoom {
    transition: transform 0.3s;
}
.zoom:hover,
a:focus-visible .zoom {
    transform: scale(1.05);
}

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */

/* ### - ab 750px - ### */
@media (min-width: 750px) {
    .karussell-wrapper > .kundenstimme {
        /* span-6: (Container - 11 Gaps) / 12 × 6 + 5 Gaps */
        width: calc((100% - 11 * var(--content-gap)) / 12 * 6 + 5 * var(--content-gap));
    }
    nav#main-nav {
        width: 50vw;
        right: 0;
        left: unset;
    }
    .pyramide-ebene > li {
        flex-basis: calc((100% - var(--content-gap)) / 2);
    }
    .radio-card.span-3,
    .checkbox-item.span-4 {
        grid-column: span 6;
    }
    .span-3,
    .span-4,
    .span-6 {
        grid-column: span 6;
    }
}

/* ### - ab 1000px - ### */
@media (min-width: 1000px) {
    :root {
        --padding-innen: 30px;
        --padding-seiten: 60px;
        --padding-obenunten: 100px;
        --content-gap: 40px;
    }
    html {
        scroll-padding-top: 160px;
    }
    .benefits {
        flex-direction: row;
    }
    .close,
    .menu {
        display: none;
    }
    /* Fixierte Kontakt-Buttons ausblenden, sobald der Footer sichtbar ist */
    .footer-sichtbar .nav-second {
        opacity: 0;
        visibility: hidden;
    }
    h1 {
        hyphens: none;
    }
    h2 {
        margin-bottom: var(--h2);
        hyphens: none;
    }
    header {
        padding: 20px;
    }
    .header-buttons {
        justify-content: end;
    }
    .hero-slider {
        aspect-ratio: auto;
        height: 100%;
    }
    #home .hero-slider-container {
        grid-row: 1/3;
    }
    .job {
        grid-template-columns: 1fr max-content;
    }
    .job div:last-of-type {
        align-items: center;
    }
    .karussell-wrapper > .kundenstimme {
        /* span-4: (Container - 11 Gaps) / 12 × 4 + 3 Gaps */
        width: calc((100% - 11 * var(--content-gap)) / 12 * 4 + 3 * var(--content-gap));
    }
    .logo img {
        height: 100px;
    }
    .logo img.small {
        height: 50px;
    }
    nav#main-nav {
        position: initial;
        width: auto;
        height: auto;
        overflow: visible;
        background-color: inherit;
        transform: none;
        visibility: visible;
        transition: none;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #main-nav a {
        color: var(--blau);
    }
    #main-nav a.button {
        color: var(--blaudunkel);
    }
    .nav-main {
        font-size: var(--copy);
        flex-direction: row;
        justify-content: center;
        gap: 40px;
    }
    .nav-second {
        position: fixed;
        bottom: 20px;
        left: 20px;
    }
    .pyramide-ebene > li {
        flex-basis: calc((100% - 3 * var(--content-gap)) / 4);
    }
    .spacer {
        display: block;
    }
    .span-1 {
        grid-column: span 1;
    }
    .span-2 {
        grid-column: span 2;
    }
    .span-3,
    .radio-card.span-3 {
        grid-column: span 3;
    }
    .span-4,
    .checkbox-item.span-4 {
        grid-column: span 4;
    }
    .span-6 {
        grid-column: span 6;
    }
    .span-8 {
        grid-column: span 8;
    }
    .standorte-karte {
        width: 70%;
    }
    /* Karte bleibt beim Scrollen durch die Einsatzgebiete sichtbar */
    .standorte-karte-box {
        position: sticky;
        top: 160px;
    }
}

/* ### - ab 1350px - ### */
@media (min-width: 1350px) {
    :root {
        --padding-innen: 30px;
        --padding-seiten: 100px;
        --padding-obenunten: 100px;
        --content-gap: 40px;

        --h1: 5rem;
        --h2: 3rem;
        --h3: 2rem;
        --copy: 1.2rem;
    }
    .expand {
        width: 25px;
    }
    .karussell-pfeil {
        width: 50px;
        height: 50px;
    }
    .leistung-icon {
        height: 60px;
    }
    .leistungsbox-header button {
        grid-template-columns: 70px 1fr max-content;
        font-size: var(--h3);
    }
    .zdf-item span {
        font-size: var(--h2);
    }
}

/* ### - ab 1650px - ### */
@media (min-width: 1650px) {
    :root {
        --padding-innen: 40px;
        --padding-seiten: 140px;
    }
}

/* ### - Bewegung reduzieren - ### */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .js .fade {
        transform: none;
    }
}