/**
 * Sektionsfarben – jede <section> hat genau eine Flächenfarbe.
 * Dazwischen: .section-curve (CSS-Bogen), danach beginnt die nächste Sektion in --curve-to.
 *
 * --hero: obere Farbe wölbt den Bogen nach unten.
 * --footer: untere Farbe wölbt den Bogen nach oben.
 */
:root {
   --section-hero: #efe8de;
   --section-sand: #f4f0ea;
   --section-warm: #ebe4d6;
   --section-cta: #d9cdb8;
   --section-footer: #3c3c3c;
   --section-curve-height: clamp(3.25rem, 8vw, 5.75rem);
   --section-wave-height: var(--section-curve-height);
}

.section-curve {
   display: block;
   width: 100%;
   height: var(--section-curve-height);
   position: relative;
   overflow: hidden;
   line-height: 0;
   font-size: 0;
}

/* Hero-Bogen: --curve-from bauchig nach unten, darunter --curve-to */
.section-curve--hero {
   background-color: var(--curve-to);
}

.section-curve--hero::before {
   content: "";
   position: absolute;
   left: 50%;
   top: 0;
   width: 112%;
   height: calc(var(--section-curve-height) * 2.35);
   transform: translate(-50%, -58%);
   background: var(--curve-from);
   border-radius: 50%;
}

/* Footer-Bogen: --curve-to bauchig nach oben in den Streifen */
.section-curve--footer {
   background-color: var(--curve-from);
}

.section-curve--footer::before {
   content: "";
   position: absolute;
   left: 50%;
   bottom: 0;
   width: 132%;
   height: calc(var(--section-curve-height) * 2.45);
   transform: translate(-50%, 55%);
   background: var(--curve-to);
   border-radius: 50%;
}

/* Bogen direkt vor dem Site-Footer: flach und dünn */
.section-curve--footer:has(+ footer),
main:has(+ .site-footer) > .section-curve--footer:last-child {
   --section-curve-height: clamp(0.85rem, 2.2vw, 1.35rem);
}

.section-curve--footer:has(+ footer)::before,
main:has(+ .site-footer) > .section-curve--footer:last-child::before {
   width: 108%;
   height: calc(var(--section-curve-height) * 1.75);
   transform: translate(-50%, 42%);
}

.section-curve--tall {
   --section-curve-height: clamp(4.5rem, 11vw, 7rem);
}

.section-curve + section,
.section-curve + footer {
   margin-top: 0;
}