@font-face {
  font-family: "Robelia";
  src: url("../../fonts/Robelia.woff") format("woff");
}

@font-face {
  font-family: "Myriad Pro";
  src: url("../../fonts/MyriadPro-Regular.otf") format("opentype");
}

:root {
  --paper: #f4f3ed;
  --anthracite: #262626;
  --moss: #4a5a46;
  --white: #ffffff;
--beton: #a6aaa1;
  --line-light: rgba(244, 243, 237, 0.28);
  --line-dark: rgba(38, 38, 38, 0.2);

  --font-display: "Robelia", "Cormorant Garamond", Georgia, serif;
  --font-body: "Myriad Pro", "Segoe UI", Arial, sans-serif;

  --page-padding: clamp(1.25rem, 4vw, 4rem);
  --section-space: clamp(5rem, 10vw, 9rem);
  --grid-gap: clamp(1rem, 2vw, 2rem);
  --content-width: 92rem;
  --radius-cut: 0 0 0 1.75rem;
  --transition: 420ms cubic-bezier(.2, .7, .2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  color: var(--anthracite);
  background: var(--paper);

  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1rem + 0.18vw, 1.125rem);
  line-height: 1.65;

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

h1 {
  max-width: 15ch;
  margin-bottom: 1.75rem;
  font-size: clamp(3.5rem, 8vw, 8.6rem);
}

h2 {
  max-width: 11ch;
  margin-bottom: 1.5rem;
  font-size: clamp(2.8rem, 5vw, 5.8rem);
}
@media (max-width: 52rem) {

    h2,
    .section-heading h2,
    .section-heading--wide h2,
    .section-heading--full h2 {

        max-width: none;
        width: 100%;
    }

}

h3 {
  margin-bottom: .75rem;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 500;
  line-height: 1.15;
}

p {
  margin-bottom: 1.15rem;
}

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 1rem;
  left: 1rem;
  padding: .75rem 1rem;
  background: var(--paper);
  color: var(--anthracite);
  transform: translateY(-200%);
}
/* ===========================
   HEADER
=========================== */

.header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100px;

    background: #f4f3ed;

    border-bottom: 1px solid rgba(38, 38, 38, 0.08);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);

    z-index: 9999;
}

.header-container {
    position: relative;

    width: min(1500px, 92%);
    height: 100%;

    margin: auto;

    display: flex;
    justify-content: space-between;
    align-items: center;
}



/* ===========================
   BURGER-BUTTON
=========================== */

.menu-toggle {
    display: none;

    width: 48px;
    height: 48px;

    padding: 0;

    border: 0;
    background: transparent;

    cursor: pointer;

    z-index: 10001;
}

.menu-toggle span {
    display: block;

    width: 28px;
    height: 2px;

    margin: 6px auto;

    background: #262626;

    transition:
        transform 0.35s ease,
        opacity 0.25s ease;
}

/* Burger wird zum X */

.menu-toggle.is-active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ===========================
   TABLET UND MOBIL
=========================== */

@media (max-width: 900px) {

    .header {
        height: 88px;
    }

    .header-container {
        width: min(100% - 32px, 1500px);
    }

    .logo img {
        height: clamp(42px, 9vw, 68px);
    }

    .menu-toggle {
        display: block;
    }

    .navigation {
        position: fixed;

        top: 88px;
        right: 0;
        left: 0;

        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 0;

        padding: 32px 24px 40px;

        background: #f4f3ed;

        border-bottom: 1px solid rgba(38, 38, 38, 0.1);
        box-shadow: 0 18px 35px rgba(38, 38, 38, 0.08);

        opacity: 0;
        visibility: hidden;

        transform: translateY(-20px);

        transition:
            opacity 0.35s ease,
            visibility 0.35s ease,
            transform 0.35s ease;
    }

    .navigation.is-open {
        opacity: 1;
        visibility: visible;

        transform: translateY(0);
    }

    .navigation a {
        width: 100%;

        padding: 18px 0;

        font-size: 20px;

        border-bottom: 1px solid rgba(38, 38, 38, 0.12);
    }

    .navigation a::after {
        bottom: 10px;
        width: 48px;
    }

}

/* ===========================
   KLEINE SMARTPHONES
=========================== */

@media (max-width: 480px) {

    .header {
        height: 78px;
    }

    .navigation {
        top: 78px;
    }

    .logo img {
        height: clamp(38px, 12vw, 58px);
    }

    .menu-toggle {
        width: 42px;
        height: 42px;
    }

}



/* ===========================
   LOGO
=========================== */

.logo{
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo img{

    display: block;

    height: clamp(40px, 6vw, 85px);

    width: auto;

    max-width: 100%;

    object-fit: contain;

}

/* ===========================
   NAVIGATION
=========================== */

.navigation{

    display:flex;

    align-items:center;

    gap:55px;

}

.navigation a{

    position:relative;

    color:#262626;

    text-decoration:none;

    font-family:"Myriad Pro";

    font-size:16px;

    letter-spacing:.4px;

    transition:.3s;

}

.navigation a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:100%;

    height:2px;

    background:#4a5a46;

    transform:scaleX(0);

    transform-origin:right;

    transition:.35s;

}

.navigation a:hover::after,
.navigation a.active::after{

    transform:scaleX(1);

    transform-origin:left;

}

.navigation a:hover{

    color:#4a5a46;

}
.skip-link:focus {
  transform: translateY(0);
}
/* =========================================
   VERTIKALER HERO-CAROUSEL
========================================= */
@media (prefers-reduced-motion: reduce) {

    .hero-scroll-indicator img {
        animation: none;
    }

}
@media (max-width: 900px) {

    .hero-scroll-indicator {
        bottom: 1.5rem;
    }

    .hero-scroll-indicator img {
        width: 1.7rem;
    }

}

@media (max-width: 480px) {

    .hero-scroll-indicator {
        bottom: 1rem;

        width: 3rem;
        height: 3.5rem;
    }

    .hero-scroll-indicator img {
        width: 1.4rem;
    }

}
.hero-carousel {
    position: relative;

    width: 100%;
    height: calc(100svh - 100px);
    min-height: 620px;

    margin-top: 100px;

    overflow: hidden;

    background: var(--anthracite);
}

.slides {
    position: relative;

    width: 100%;
    height: 100%;
}

.slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;

    transform: translateY(100%);

    pointer-events: none;

    transition:
        transform 1100ms cubic-bezier(.76, 0, .24, 1),
        opacity 500ms ease;
}

/* Aktuell sichtbares Bild */

.slide.active {
    z-index: 2;

    opacity: 1;

    transform: translateY(0);

    pointer-events: auto;
}

/* Vorheriges Bild fährt nach oben heraus */

.slide.is-leaving {
    z-index: 1;

    opacity: 1;

    transform: translateY(-100%);
}
.unterseiten {
    height: 90vh;
    min-height: 600px;
}
/* =========================================
   BILDER
========================================= */

.slide img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: center;

    filter: grayscale(100%);

    transform: scale(1.04);

    transition:
        filter 800ms ease,
        transform 6500ms ease;
}

.slide.active img {
    transform: scale(1.1);
}

.hero-carousel:hover .slide.active img {
    filter: grayscale(0);
}
/* =========================================
   SUBPAGE HERO
========================================= */

.page-hero{

    position:relative;

    margin-top:100px;

    height:68svh;
    min-height:520px;
    max-height:760px;

    overflow:hidden;

    background:var(--anthracite);

}

.page-hero__image{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    filter:grayscale(100%);

}

.page-hero__overlay{

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(38,38,38,.82) 0%,
            rgba(38,38,38,.48) 48%,
            rgba(38,38,38,.10) 100%
        );

}

.page-hero__content{

    position:relative;
    z-index:2;

    height:100%;

    align-items:end;

    padding-bottom:clamp(4rem,8vh,6rem);

}

.page-hero__text{

    grid-column:1 / span 4;

    color:var(--paper);

}

.page-hero__text h1{

    max-width:11ch;

}

.page-hero__text .hero-text{

    max-width:38rem;
    margin-bottom:0;

}
@media (max-width:900px){

    .page-hero{

        margin-top:88px;

        height:60svh;
        min-height:480px;

    }

    .page-hero__text{

        grid-column:1 / -1;

    }

}
@media (max-width:480px){

    .page-hero{

        margin-top:78px;

        height:56svh;
        min-height:440px;

    }

}

/* =========================================
   SIGNET VOR H2
========================================= */

.has-marker {
    position: relative;
}

/* Desktop */

.has-marker::before {
    content: "";

    position: absolute;

    width: clamp(2.8rem, 0.82em, 4.8rem);
    aspect-ratio: 1;
    height: auto;

    top: 0.12em;
right: calc(100% + 0.1rem);
    background:
        url("../../images/Logos/specktrum_signet_solo_pos.png")
        center / contain no-repeat;

    pointer-events: none;
}
.has-marker--white::before{

    background-image: url("../../images/Logos/specktrum_signet_solo_neg.png");

}
@media (max-width: 70rem) {

    .has-marker {
        padding-left: 1.15em;
    }

    .has-marker::before {
        width: 0.78em;
        height: 0.78em;

        top: 0.14em;
        right: auto;
        left: 0;
    }

}
/* =========================================
   BILD-OVERLAY
========================================= */

.overlay {
    position: absolute;
    z-index: 1;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(38, 38, 38, .82) 0%,
            rgba(38, 38, 38, .55) 38%,
            rgba(38, 38, 38, .15) 72%,
            rgba(38, 38, 38, .05) 100%
        );
}

/* =========================================
   TEXT
========================================= */

.hero-content {
    position: absolute;
    z-index: 3;

    left: max(
        var(--page-padding),
        calc((100vw - var(--content-width)) / 2)
    );

    bottom: clamp(4rem, 10vh, 8rem);

    width: min(760px, calc(100% - 2 * var(--page-padding)));

    color: var(--paper);
}

.hero-subtitle {
    margin-bottom: 1.25rem;

    font-size: .8rem;
    font-weight: 600;

    letter-spacing: .2em;

    text-transform: uppercase;

    opacity: .8;
}

.hero-content h1 {
    max-width: 13ch;

    margin-bottom: 1.75rem;

    font-family: var(--font-display);

    font-size: clamp(3rem, 6.5vw, 6.8rem);
    font-weight: 400;

    line-height: .96;
    letter-spacing: -.035em;
}

.hero-text {
    max-width: 38rem;

    margin-bottom: 2rem;

    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    line-height: 1.5;
}

.hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 3.4rem;

    padding: .9rem 1.5rem;

    color: var(--paper);
    background: var(--moss);


    font-weight: 600;

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition);
}
.hero-button {
  border-radius: 0 1.75rem 0 1.75rem ;
}

.hero-button:hover {
    color: var(--anthracite);
    background: var(--paper);

    transform: translateY(-3px);
}
/* =========================================
   SCROLL-PFEIL IM HERO
========================================= */

.hero-scroll-indicator {
    position: absolute;
    z-index: 20;

    left: 50%;
    bottom: clamp(1.5rem, 4vh, 3rem);

    display: flex;
    align-items: center;
    justify-content: center;

    width: 3.5rem;
    height: 4.5rem;

    transform: translateX(-50%);

    cursor: pointer;
}

.hero-scroll-indicator img {
    display: block;

    width: clamp(1.5rem, 2vw, 2.25rem);
    height: auto;

    opacity: .85;

    animation: hero-scroll-arrow 1.8s ease-in-out infinite;

    transition:
        opacity 300ms ease,
        transform 300ms ease;
}

.hero-scroll-indicator:hover img {
    opacity: 1;
}

/* Ruhige Bewegung nach unten */

@keyframes hero-scroll-arrow {

    0% {
        transform: translateY(-5px);
        opacity: .45;
    }

    40% {
        transform: translateY(7px);
        opacity: 1;
    }

    70% {
        transform: translateY(7px);
        opacity: 1;
    }

    100% {
        transform: translateY(-5px);
        opacity: .45;
    }

}

/* =========================================
   TEXTANIMATION PRO SLIDE
========================================= */

.hero-content > * {
    opacity: 0;

    transform: translateY(2rem);

    transition:
        opacity 700ms ease,
        transform 900ms cubic-bezier(.2, .7, .2, 1);
}

.slide.active .hero-content > * {
    opacity: 1;

    transform: translateY(0);
}

.slide.active .hero-subtitle {
    transition-delay: 300ms;
}

.slide.active h1 {
    transition-delay: 420ms;
}

.slide.active .hero-text {
    transition-delay: 540ms;
}

.slide.active .hero-button {
    transition-delay: 660ms;
}

/* =========================================
   NAVIGATION
========================================= */

.carousel-navigation {
    position: absolute;
    z-index: 10;

    right: var(--page-padding);
    bottom: clamp(3rem, 8vh, 6rem);

    display: flex;
    flex-direction: column;

    gap: .9rem;
}

.dot {
    position: relative;

    width: 2.6rem;
    height: 2px;

    padding: 0;

    border: 0;

    background: rgba(244, 243, 237, .4);

    cursor: pointer;

    transition:
        width var(--transition),
        background var(--transition);
}

.dot::after {
    position: absolute;

    inset: -10px 0;

    content: "";
}

.dot.active {
    width: 4.25rem;

    background: var(--paper);
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .hero-carousel {
        height: calc(100svh - 88px);
        min-height: 650px;

        margin-top: 88px;
    }

    .hero-content {
        bottom: 5rem;
    }

    .hero-content h1 {
        max-width: 12ch;

        font-size: clamp(3rem, 9vw, 5.5rem);
    }

    .overlay {
        background:
            linear-gradient(
                to top,
                rgba(38, 38, 38, .88) 0%,
                rgba(38, 38, 38, .5) 55%,
                rgba(38, 38, 38, .12) 100%
            );
    }

    .carousel-navigation {
        right: 1.5rem;
        bottom: 2.5rem;
    }

}

/* =========================================
   MOBIL
========================================= */

@media (max-width: 480px) {

    .hero-carousel {
        height: calc(100svh - 78px);
        min-height: 620px;

        margin-top: 78px;
    }

    .hero-content {
        bottom: 3.5rem;

        width: calc(100% - 2.5rem);
    }

    .hero-content h1 {
        max-width: 13ch;

        margin-bottom: 1.25rem;

        font-size: clamp(2.7rem, 13vw, 4rem);
    }

    .hero-text {
        max-width: calc(100% - 1.5rem);

        margin-bottom: 1.5rem;

        font-size: 1rem;
    }

    .hero-button {
        min-height: 3rem;

        padding: .75rem 1.15rem;
    }

    .carousel-navigation {
        right: 1.25rem;
        bottom: 1.5rem;

        gap: .7rem;
    }

    .dot {
        width: 1.8rem;
    }

    .dot.active {
        width: 3rem;
    }

}

/* =========================================
   REDUZIERTE BEWEGUNG
========================================= */

@media (prefers-reduced-motion: reduce) {

    .slide {
        transition: opacity 300ms ease;
        transform: none;
    }

    .slide.is-leaving {
        transform: none;
    }

    .slide img {
        transform: none;
        transition: filter 300ms ease;
    }

}
.page-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--grid-gap);
  width: min(100% - (2 * var(--page-padding)), var(--content-width));
  margin-inline: auto;
}

.section {
    position: relative;
    padding-block: var(--section-space);
    overflow: visible;
}

.section--paper {
  color: var(--anthracite);
  background: var(--paper);
}

.section--anthracite {
  color: var(--paper);
  background: var(--anthracite);
}

.section--moss {
  color: var(--paper);
  background: var(--moss);
}

.eyebrow,
.section-index,
.footer-label {
  margin-bottom: 1.25rem;

  font-size: clamp(.8125rem, .78rem + .12vw, .875rem);
  font-weight: 600;
  line-height: 1.35;

  letter-spacing: .14em;
  text-transform: uppercase;
}


.brand {
  grid-column: 1 / span 2;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  width: fit-content;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .14em;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 2rem;
  aspect-ratio: 1;
  color: var(--paper);
  background: var(--moss);
  border-radius: 0 0 0 .75rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0;
}

.main-nav {
  grid-column: 4 / -1;
  display: flex;
  justify-content: flex-end;
  gap: clamp(1.25rem, 3vw, 3rem);
}

.main-nav__link {
  position: relative;
  padding-block: .4rem;
  font-size: .95rem;
}

.main-nav__link::after {
  position: absolute;
  right: 0;
  bottom: 0;

  left: 0;
  height: 1px;
  background: var(--moss);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition);
}

.main-nav__link:hover::after,
.main-nav__link.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-toggle {
  display: none;
  border: 0;
  background: transparent;
}



.hero-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.hero-slide img,
.image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 700ms ease, transform 900ms ease;
}

.hero-slider {
  overflow: hidden;
  border-radius: var(--radius-cut);
}

.hero-slider:hover img,
.image-frame:hover img {
  filter: grayscale(0);
  transform: scale(1.025);
}



.slider-button {
  display: grid;
  place-items: center;
  width: 2.1rem;
  aspect-ratio: 1;
  color: inherit;
  border: 1px solid rgba(244, 243, 237, .35);
  background: transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.section-intro {
    max-width: 46rem;
    margin-top: 2.5rem;
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
}

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

/* =========================================
   VOLLFLÄCHIGER BILD-ZWISCHENBEREICH
========================================= */

.image-statement {
    position: relative;
    width: 100%;
    height: clamp(300px, 80vh, 300px);
    overflow: hidden;
}

.image-statement__image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: center;

    filter: grayscale(1);
    transform: scale(1);

    transition:
        filter 800ms ease,
        transform 1200ms ease;
}

.image-statement:hover .image-statement__image {
    filter: grayscale(0);
    transform: scale(1.025);
}

.image-statement__overlay {
    position: absolute;
    z-index: 1;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(38, 38, 38, .78) 0%,
            rgba(38, 38, 38, .42) 48%,
            rgba(38, 38, 38, .12) 100%
        );
}

.image-statement__content {
    position: relative;
    z-index: 2;

    height: 100%;
    align-items: end;

    padding-block: clamp(4rem, 8vw, 4rem);

    color: var(--paper);
}

.image-statement__text {
    grid-column: 1 / span 4;
    align-self: end;
}

.image-statement__text h2 {
    max-width: 16ch;
    margin-bottom: 0;
}

.image-statement__text h2 span {
    display: block;
    margin-left: clamp(1rem, 7vw, 7rem);
}

.statement-light-edge {
    position: absolute;
    z-index: 3;

    top: 8%;
    bottom: 8%;
    left: 68%;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(244, 243, 237, .95),
            transparent
        );

    box-shadow: 0 0 18px rgba(244, 243, 237, .45);
}

@media (max-width: 52rem) {

    .image-statement {
        height: 650px;
    }

    .image-statement__overlay {
        background:
            linear-gradient(
                to top,
                rgba(38, 38, 38, .88) 0%,
                rgba(38, 38, 38, .35) 70%,
                rgba(38, 38, 38, .12) 100%
            );
    }

    .image-statement__text {
        grid-column: 1 / -1;
    }

    .image-statement__text h2 span {
        margin-left: 0;
    }

    .statement-light-edge {
        right: 12%;
        left: auto;
    }

}
.button-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.button {
  border-radius: 0 1.75rem 0 1.75rem ;
}
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 3.25rem;
  padding: .8rem 1.3rem;
  border: 1px solid transparent;
  font-weight: 600;
  transition: transform var(--transition), background var(--transition), color var(--transition);
}

.button:hover {
  transform: translateY(-3px);
}

.button--primary {
  color: var(--paper);
  background: var(--moss);
}

.button--primary:hover {
  background: var(--anthracite);
}

.button--light {
  color: var(--anthracite);
  background: var(--paper);
}

.button--light:hover {
  color: var(--anthracite);
  background: var(--beton);
  border-color: rgba(244, 243, 237, .3);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid currentColor;
}

.text-link::after {
  content: "↗";
  transition: transform var(--transition);
}

.text-link:hover::after {
  transform: translate(3px, -3px);
}

.text-link--light {
  color: var(--paper);
}

.intro .section-index {
  grid-column: 1;
}

.intro__headline {
  grid-column: 1 / span 3;
}

.intro__text {
  grid-column: 5 / -1;
  align-self: end;

  max-width: 34rem;

  font-size: clamp(1.125rem, 1.05rem + .25vw, 1.25rem);
  line-height: 1.65;
}
/* =========================================
   INTRO – STICKY SCROLL
========================================= */

.intro-scroll {
    overflow: visible;
}

.intro-scroll__grid {
    align-items: start;
}


/* Linke Spalte */

.intro-scroll__headline {
    grid-column: 1 / span 3;

    position: sticky;
    top: 140px;

    align-self: start;
}

.intro-scroll__headline h2 {
    max-width: 10ch;
    margin-bottom: 0;
}


/* Rechte Spalte */

.intro-scroll__list {
    grid-column: 4 / -1;

    border-top: 1px solid var(--beton);
}


/* Einzelne Scroll-Blöcke */

.intro-scroll__item {
    display: grid;

    grid-template-columns:
        minmax(3rem, 0.55fr)
        minmax(0, 4fr);

    column-gap: clamp(1.5rem, 3vw, 3rem);

    /*
       Die Höhe sorgt dafür, dass die Abschnitte
       nacheinander an der Überschrift vorbeiscrollen.
    */
min-height: clamp(15rem, 25vh, 15rem);
    align-content: center;

    padding-block: clamp(3rem, 7vw, 6rem);

    border-bottom: 1px solid var(--beton);
}


/* Nummer */

.intro-scroll__number {
    margin: 0.35rem 0 0;

    color: var(--moss);

    font-size: 0.9rem;
    line-height: 1.2;
    letter-spacing: 0.14em;
}


/* Inhalt */

.intro-scroll__content {
    min-width: 0;
}

.intro-scroll__content h3 {
    max-width: 23rem;

    margin: 0 0 1.25rem;

    font-size: clamp(
        1.65rem,
        1.3rem + 0.9vw,
        2.35rem
    );

    font-weight: 400;
    line-height: 1.2;
}

.intro-scroll__content p {
    max-width: 36rem;
    margin: 0;

    font-size: clamp(
        1.0625rem,
        1rem + 0.2vw,
        1.1875rem
    );

    line-height: 1.7;
}


/* =========================================
   KLEINERE DESKTOPS / TABLETS
========================================= */

@media (max-width: 70rem) {

    .intro-scroll__headline {
        top: 110px;
    }

    .intro-scroll__item {
        min-height: clamp(25rem, 55vh, 36rem);
    }

}


/* =========================================
   TABLET UND MOBIL
========================================= */

@media (max-width: 52rem) {

    .intro-scroll__grid {
        row-gap: 3rem;
    }

    .intro-scroll__headline,
    .intro-scroll__list {
        grid-column: 1 / -1;
    }

    .intro-scroll__headline {
        position: static;
    }

    .intro-scroll__headline h2 {
        max-width: 13ch;
    }

    .intro-scroll__item {
        min-height: auto;

        grid-template-columns:
            minmax(2.5rem, auto)
            minmax(0, 1fr);

        column-gap: 1.25rem;

        padding-block: clamp(2.5rem, 7vw, 4rem);
    }

}


/* =========================================
   KLEINE SMARTPHONES
========================================= */

@media (max-width: 36rem) {

    .intro-scroll__item {
        grid-template-columns: 1fr;
        row-gap: 1.25rem;
    }

    .intro-scroll__number {
        margin-top: 0;
    }

}
.section-heading {
    grid-column: 1 / -1;

    width: 100%;
    max-width: none;

    margin-bottom: clamp(3rem, 7vw, 6rem);
}

.section-heading h2 {
    width: 100%;
    max-width: 18ch;

    margin-bottom: 0;
}

.section-heading--wide {
  grid-column: 1 / span 5;
}

.services-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-light);
}


.service-card {
  position: relative;
	display: flex;
  flex-direction: column;

  min-height: auto;
  padding: 2rem 1.5rem 1.5rem;
  transition: background var(--transition), transform var(--transition);
}
.service-card .button {
  width: fit-content;
  margin-top: auto;
}


.service-card:hover {
  background: rgba(244, 243, 237, .08);
  transform: translateY(-.4rem);
}


.service-card__header {
    display: flex;
    align-items: center;
    gap: 1rem;

    margin-bottom: 3rem;
}

.service-card__icon {
    width: auto;
    height: 4rem;
    flex-shrink: 0;
}

.service-card__header h3 {
    margin: 0;
}

.service-card__number {
  opacity: .75;
color: var(--beton);
  font-size: .900rem;
  line-height: 1.2;
  letter-spacing: .14em;
}

.service-card p:not(.service-card__number) {
  max-width: 20rem;
  line-height: 1.6;
}

.service-card .text-link {
  position: absolute;
  bottom: 1.6rem;
}


/* =========================================
   SO BEGLEITET SPECKTRUM PROJEKTE
========================================= */

.project-support__grid {
    align-items: start;
    row-gap: clamp(4rem, 8vw, 7rem);
}


/* Linke Einleitung */

.project-support__intro {
    grid-column: 1 / span 3;
    position: sticky;
    top: 140px;
}

.project-support__intro h2 {
    max-width: 11ch;
}

.project-support__lead {
    max-width: 34rem;
    margin-bottom: 0;

    font-size: clamp(
        1.0625rem,
        1rem + .2vw,
        1.1875rem
    );

    line-height: 1.65;
}


/* Rechte Liste */

.project-support__list {
    grid-column: 4 / -1;

    border-top: 1px solid var(--beton);
}


/* Einzelner Punkt */

.project-support__item {
    display: grid;

    grid-template-columns:
        minmax(3rem, .6fr)
        minmax(0, 4fr);

    column-gap: clamp(1.5rem, 3vw, 3rem);

    padding-block: clamp(2rem, 4vw, 3.5rem);

    border-bottom: 1px solid var(--beton);
}


/* Nummerierung */

.project-support__number {
    margin: .2rem 0 0;

    color: var(--paper);

    font-size: .9rem;
    line-height: 1.2;
    letter-spacing: .14em;
}


/* Textbereich */

.project-support__content {
    min-width: 0;
}

.project-support__content h3 {
    max-width: 24rem;

    margin-bottom: .8rem;

    font-size: clamp(
        1.5rem,
        1.2rem + .8vw,
        2.1rem
    );

    font-weight: 400;
}

.project-support__content p {
    max-width: 36rem;
    margin-bottom: 0;

    line-height: 1.65;
}


/* Abschlusstext */

.project-support__footer {
    grid-column: 4 / -1;

    padding-top: clamp(1rem, 2vw, 2rem);
}

.project-support__footer p {
    max-width: 36rem;
    margin-bottom: 0;

    font-size: clamp(
        1.0625rem,
        1rem + .2vw,
        1.1875rem
    );

    line-height: 1.65;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 70rem) {

    .project-support__intro {
        position: static;
    }

}


/* =========================================
   TABLET UND MOBIL
========================================= */

@media (max-width: 52rem) {

    .project-support__grid {
        row-gap: 3rem;
    }

    .project-support__intro,
    .project-support__list,
    .project-support__footer {
        grid-column: 1 / -1;
    }

    .project-support__intro h2 {
        max-width: 13ch;
    }

    .project-support__item {
        grid-template-columns:
            minmax(2.5rem, auto)
            minmax(0, 1fr);

        column-gap: 1.25rem;

        padding-block: 2rem;
    }

    .project-support__footer {
        padding-top: 0;
    }

}


/* =========================================
   KLEINE SMARTPHONES
========================================= */

@media (max-width: 36rem) {

    .project-support__item {
        grid-template-columns: 1fr;
        row-gap: 1rem;
    }

    .project-support__number {
        margin-top: 0;
    }

}
/* =========================================
   PROJEKTDETAIL – BASIS
   Am Ende der main.css ergänzen.
========================================= */

.project-detail-hero .hero-content { max-width: 72rem; }
.project-detail-hero .hero-text { max-width: 44rem; }

.project-detail__grid { row-gap: clamp(2.5rem, 5vw, 5rem); }
.project-detail__intro { grid-column: 1 / -1; }
.project-detail__intro h2 { max-width: 16ch; }
.project-detail__copy { grid-column: 1 / span 4; }
.project-detail__lead {
  margin-bottom: 1.5rem;
  font-size: clamp(1.125rem, 1.02rem + .35vw, 1.35rem);
  line-height: 1.65;
}
.project-detail__copy p:last-child { margin-bottom: 0; }
.project-detail__facts {
  grid-column: 5 / -1;
  align-self: start;
  padding-top: .25rem;
  padding-left: clamp(1.5rem, 4vw, 4rem);
  border-left: 1px solid rgba(38, 38, 38, .2);
}
.project-detail__services {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.project-detail__services li {
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(38, 38, 38, .16);
  font-size: clamp(1rem, .95rem + .15vw, 1.1rem);
}

.project-detail-media { padding-top: 0; }
.project-detail-media__wide { grid-column: 1 / -1; margin: 0; }
.project-detail-media__wide img,
.project-gallery figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-cut);
}
.project-detail-media__wide img { aspect-ratio: 16 / 8; }

.project-process__grid { row-gap: clamp(3rem, 6vw, 6rem); }
.project-process__intro { grid-column: 1 / -1; }
.project-process__intro h2 { max-width: 18ch; }
.project-process__steps {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.project-process__step {
  padding-top: 1.4rem;
  border-top: 1px solid rgba(244, 243, 237, .28);
}
.project-process__number {
  display: block;
  margin-bottom: clamp(2rem, 4vw, 4rem);
  color: var(--beton);
  font-size: .8rem;
  letter-spacing: .14em;
}
.project-process__step h3 {
  margin-bottom: .8rem;
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 500;
}
.project-process__step p {
  margin-bottom: 0;
  color: rgba(244, 243, 237, .76);
  line-height: 1.65;
}
.project-process.section--paper {
    color: var(--anthracite);
}

.project-process.section--paper h2,
.project-process.section--paper h3,
.project-process.section--paper p,
.project-process.section--paper .project-process__number {
    color: var(--anthracite);
}

.project-process.section--paper .eyebrow {
    color: var(--moss);
}

.project-gallery__grid { align-items: stretch; row-gap: var(--grid-gap); }
.project-gallery figure { margin: 0; overflow: hidden; }
.project-gallery__portrait { grid-column: 1 / span 3; grid-row: span 2; }
.project-gallery__portrait img { aspect-ratio: 4 / 5; }
.project-gallery__landscape { grid-column: 4 / -1; }
.project-gallery__landscape img { aspect-ratio: 16 / 9; }

.project-result { padding-top: 0; }
.project-result__grid { align-items: end; }
.project-result__heading { grid-column: 1 / span 4; }
.project-result__heading h2 { max-width: 15ch; margin-bottom: 0; }
.project-result__copy { grid-column: 5 / -1; }
.project-result__copy p {
  max-width: 38rem;
  margin-bottom: 0;
  font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem);
  line-height: 1.7;
}

.next-project__link {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: var(--grid-gap);
}
.next-project__link .eyebrow { grid-column: 1 / -1; }
.next-project__title {
  grid-column: 1 / span 5;
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 6rem);
  line-height: .98;
}
.next-project__action {
  grid-column: 6;
  justify-self: end;
  padding-bottom: .45rem;
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.next-project__action::after { content: " →"; }
.next-project__link:hover .next-project__action {
  text-decoration: underline;
  text-underline-offset: .3em;
}

@media (max-width: 52rem) {
  .project-detail__intro,
  .project-detail__copy,
  .project-detail__facts,
  .project-process__intro,
  .project-process__steps,
  .project-gallery__portrait,
  .project-gallery__landscape,

  .project-result__heading,
  .project-result__copy,
  .next-project__link { grid-column: 1 / -1; }

  .project-detail__facts {
    padding-top: 1.5rem;
    padding-left: 0;
    border-top: 1px solid rgba(38, 38, 38, .2);
    border-left: 0;
  }
  .project-process__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 3.5rem;
  }
  .project-gallery__grid { grid-template-columns: 1fr; }
  .project-gallery__portrait,
  .project-gallery__landscape { grid-row: auto; }
  .project-gallery__portrait img,
  .project-gallery__landscape img { aspect-ratio: 16 / 10; }
  .project-result__grid { row-gap: 2.5rem; }
  .next-project__link { grid-template-columns: 1fr; }
  .next-project__link .eyebrow,
  .next-project__title,
  .next-project__action { grid-column: 1; }
  .next-project__action { justify-self: start; margin-top: 1.5rem; }
}

@media (max-width: 36rem) {
  .project-process__steps { grid-template-columns: 1fr; }
  .project-process__number { margin-bottom: 1.5rem; }
  .project-detail-media__wide img,
  .project-gallery__portrait img,
  .project-gallery__landscape img { aspect-ratio: 4 / 5; }
  .next-project__title { font-size: clamp(2.3rem, 13vw, 4rem); }
}
.next-project__button {
    grid-column: 6;

    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}
/* =========================================
   ERGÄNZENDE LEISTUNGEN
========================================= */

.services-additional {
    grid-column: 1 / -1;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3rem;

    padding-top: clamp(2.5rem, 5vw, 4.5rem);
    padding-bottom: clamp(1rem, 2vw, 2rem);
}

.services-additional__content {
    max-width: 52rem;
}

.services-additional h3 {
    margin: 0 0 0.8rem;

    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    font-weight: inherit;
}

.services-additional__list {
    margin: 0;

    font-size: clamp(1rem, 1.3vw, 1.2rem);
    line-height: 1.7;
}

.services-additional__button {
    flex-shrink: 0;
}
.project {
  margin-bottom: clamp(3rem, 7vw, 6rem);
}

.project--large {
  grid-column: 1 / -1;
}

.project-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
}

.image-frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-cut);
}

.project--large .image-frame {
  aspect-ratio: 16 / 7;
}

.project__label {
  position: absolute;
  z-index: 2;

  top: 1.25rem;
  left: 1.25rem;

  padding: .6rem .85rem;

  color: var(--paper);
  background: rgba(38, 38, 38, .78);

  font-size: .900rem;
  line-height: 1;
  letter-spacing: .08em;
}

.project__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  gap: 2rem;

  padding-top: 1.25rem;

  border-top: 1px solid var(--line-dark);
}

.project__meta p {
  max-width: 28rem;
  margin-bottom: 0;

  font-size: clamp(1rem, .96rem + .15vw, 1.0625rem);
  line-height: 1.55;

  text-align: right;
}

/* =========================================
   EDITORIAL DESIGN – PROJEKTSEITE
========================================= */

/* Kennzeichnung im Hero */

.project-concept-label {
    display: inline-block;

    margin-bottom: 1.25rem;
    padding: 0.55rem 0.8rem;

    border: 1px solid rgba(244, 243, 237, 0.55);

    color: #f4f3ed;

    font-size: 0.72rem;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}


/* Drei Editorial-Prinzipien */

.project-process__steps--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* =========================================
   EDITORIAL-GALERIE
========================================= */

.editorial-gallery__grid {
    row-gap: clamp(3rem, 3vw, 2rem);
}

.editorial-gallery__intro {
    grid-column: 1 / -1;
}

.editorial-gallery__intro h2 {
    max-width: 14ch;
}


/* Bilder und Bildtexte */

.editorial-gallery__item {
    margin: 0;
}

.editorial-gallery__item--wide {
    grid-column: 1 / -1;
}

.editorial-gallery__item--half {
    grid-column: span 3;
}

.editorial-gallery__item img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: cover;

    border-radius: 0 0 0 1.5rem;
}

.editorial-gallery__item--wide img {
    aspect-ratio: 16 / 9;
}

.editorial-gallery__item--half img {
    aspect-ratio: 4 / 5;
}

.editorial-gallery__item figcaption {
    padding-top: 1.25rem;
}

.editorial-gallery__item figcaption h3 {
    margin: 0 0 0.6rem;

    font-family: inherit;
    font-size: clamp(1.1rem, 1rem + 0.35vw, 1.35rem);
    font-weight: 500;
}

.editorial-gallery__item figcaption p {
    max-width: 34rem;
    margin: 0;

    line-height: 1.65;
}

/* =========================================
   EDITORIAL – ABSTÄNDE UND FARBWECHSEL
========================================= */

.editorial-gallery {
    padding-bottom: clamp(7rem, 30vw, 12rem);
}



.editorial-gallery__item figcaption {
    padding-top: clamp(1.5rem, 2.5vw, 2.25rem);
}

.editorial-gallery__item--wide {
    margin-bottom: clamp(1rem, 3vw, 3rem);
}


/* Ergebnisbereich in Moos */

.project-result.section--moss,
.project-note.section--moss {
    background: var(--moss);
    color: var(--paper);
}

.project-result.section--moss {
    padding-top: clamp(7rem, 10vw, 11rem);
    padding-bottom: clamp(5rem, 8vw, 8rem);
}

.project-note.section--moss {
    padding-top: 0;
    padding-bottom: clamp(7rem, 10vw, 11rem);
}

.project-result.section--moss .eyebrow,
.project-note.section--moss .eyebrow,
.project-result.section--moss h2,
.project-result.section--moss p,
.project-note.section--moss p {
    color: var(--paper);
}

.project-note.section--moss .project-note__content {
    border-top-color: rgba(244, 243, 237, 0.28);
}

.project-note.section--moss .project-note__content > p:last-child {
    color: rgba(244, 243, 237, 0.78);
}


/* Nächstes Projekt auf Paper */

.next-project.section--paper {
    background: var(--paper);
    color: var(--anthracite);
}

.next-project.section--paper .next-project__link,
.next-project.section--paper .next-project__title,
.next-project.section--paper .next-project__action,
.next-project.section--paper .eyebrow {
    color: var(--anthracite);
}


/* =========================================
   HINWEIS
========================================= */

.project-note {
    padding-top: 0;
}

.project-note__content {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));

    gap: var(--grid-gap);

    padding-top: clamp(1.5rem, 3vw, 2.5rem);

    border-top: 1px solid rgba(38, 38, 38, 0.18);
}

.project-note__content .eyebrow {
    grid-column: 1 / span 2;
}

.project-note__content > p:last-child {
    grid-column: 3 / -1;

    max-width: 44rem;
    margin: 0;

    color: rgba(38, 38, 38, 0.72);

    font-size: 0.95rem;
    line-height: 1.65;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 52rem) {

    .project-process__steps--three {
        grid-template-columns: 1fr;
    }

    .editorial-gallery__intro,
    .editorial-gallery__item--wide,
    .editorial-gallery__item--half,
    .project-note__content {
        grid-column: 1 / -1;
    }

    .editorial-gallery__item--wide img,
    .editorial-gallery__item--half img {
        aspect-ratio: 16 / 10;
    }

    .project-note__content {
        grid-template-columns: 1fr;
    }

    .project-note__content .eyebrow,
    .project-note__content > p:last-child {
        grid-column: 1;
    }
}

/* =========================================
   ÜBER SPECKTRUM
   Komplettblock für die Seite ueber-mich.html

   Hinweis:
   Diesen Block ans Ende der bestehenden main.css setzen.
   Frühere CSS-Blöcke für .about-* bitte vorher entfernen,
   damit keine doppelten Regeln gegeneinander arbeiten.
========================================= */


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

.about-hero .hero-content h1 {
    max-width: 11ch;
}

.about-hero .hero-text {
    max-width: 38rem;
}


/* =========================================
   WARUM SPECKTRUM
========================================= */

.about-origin {
    overflow: visible;
}

.about-origin__grid {
    align-items: center;
}

.about-origin__image {
    grid-column: 1 / span 3;

    min-height: clamp(34rem, 58vw, 48rem);
    margin: 0;
    overflow: hidden;

    border-radius: var(--radius-cut);
}

.about-origin__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}
@media (max-width: 36rem) {
    .about-origin__image {
        display: none;
    }
}

.about-origin__content {
    grid-column: 4 / -1;

    max-width: 38rem;
    padding-left: clamp(0rem, 3vw, 3rem);
}

.about-origin__content h2 {
    max-width: 10ch;
}

.about-origin__content p {
    max-width: 36rem;
}

.about-origin__content p + p {
    margin-top: 1.35rem;
}


/* =========================================
   ARBEITSWEISE – STICKY SCROLL
========================================= */

.about-method {
    overflow: visible;
}

.about-method__grid {
    align-items: start;
}

.about-method__headline {
    grid-column: 1 / span 3;

    position: sticky;
    top: 140px;

    align-self: start;
    padding-right: clamp(1rem, 3vw, 3rem);
}

.about-method__headline h2 {
    max-width: 9ch;
}

.about-method__headline > p:last-child {
    max-width: 29rem;
    color: rgba(244, 243, 237, .74);
}

.about-method__list {
    grid-column: 4 / -1;

    border-top: 1px solid rgba(244, 243, 237, .22);
}

.about-method__item {
    display: grid;
    grid-template-columns: minmax(3rem, .55fr) minmax(0, 4fr);
    column-gap: clamp(1.5rem, 3vw, 3rem);

    min-height: clamp(28rem, 60vh, 42rem);
    padding-block: clamp(3.5rem, 8vh, 6rem);

    border-bottom: 1px solid rgba(244, 243, 237, .22);
}

.about-method__number {
    padding-top: .35rem;

    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 1;

    color: rgba(244, 243, 237, .35);
}

.about-method__content {
    align-self: center;

    max-width: 34rem;
}

.about-method__content .eyebrow {
    color: rgba(244, 243, 237, .65);
}

.about-method__content h3 {
    max-width: 16ch;
    margin: 0 0 1.5rem;

    font-family: var(--font-display);
    font-size: clamp(2.25rem, 4vw, 4.7rem);
    font-weight: 400;
    line-height: 1.05;

    color: var(--paper);
}

.about-method__content p:last-child {
    max-width: 31rem;
    margin-bottom: 0;

    color: rgba(244, 243, 237, .76);
}


/* =========================================
   ZUSAMMENARBEIT – ZWEITER STICKY BEREICH
========================================= */

.about-values {
    overflow: visible;
}

.about-values__grid {
    align-items: start;
}

.about-values__intro {
    grid-column: 1 / span 3;

    position: sticky;
    top: 140px;

    align-self: start;
    padding-right: clamp(1rem, 3vw, 3rem);
}

.about-values__intro h2 {
    max-width: 10ch;
}

.about-values__intro > p:last-child {
    max-width: 31rem;
}

.about-values__cards {
    grid-column: 4 / -1;

    border-top: 1px solid rgba(38, 38, 38, .22);
}

.about-value-card {
    display: grid;
    grid-template-columns: minmax(3rem, .6fr) minmax(0, 3.4fr);
    column-gap: clamp(1.5rem, 3vw, 3rem);

    padding-block: clamp(2.75rem, 5vw, 4.5rem);

    border-bottom: 1px solid rgba(38, 38, 38, .22);
}

.about-value-card__index {
    padding-top: .1rem;

    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 3.5rem);
    line-height: 1;

    color: var(--moss);
}

.about-value-card h3,
.about-value-card p {
    grid-column: 2;
}

.about-value-card h3 {
    margin: 0 0 1rem;
}

.about-value-card p {
    max-width: 31rem;
    margin: 0;
}


/* =========================================
   BILDSTATEMENT
========================================= */

.about-statement {
    position: relative;

    min-height: clamp(34rem, 72vh, 52rem);
    overflow: hidden;

    color: var(--paper);
    background: var(--anthracite);
}

.about-statement__image,
.about-statement__overlay {
    position: absolute;
    inset: 0;
}

.about-statement__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    filter: grayscale(100%);
}

.about-statement__overlay {
    background:
        linear-gradient(
            90deg,
            rgba(38, 38, 38, .88) 0%,
            rgba(38, 38, 38, .52) 48%,
            rgba(38, 38, 38, .15) 100%
        );
}

.about-statement__grid {
    position: relative;
    z-index: 2;

    min-height: inherit;

    align-items: center;
}

.about-statement__quote {
    grid-column: 1 / span 5;

    margin: 0;
}

.about-statement__quote p {
    max-width: 12ch;
    margin: 0;

    font-family: var(--font-display);
    font-size: clamp(3rem, 7vw, 7.5rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.035em;

    color: var(--paper);
}


/* =========================================
   ATELIER & WERKBANK
   Großes Bild oben, zwei kleinere darunter
========================================= */

.about-studio {
    overflow: visible;
}

.about-studio__grid {
    align-items: center;
}

.about-studio__content {
    grid-column: 1 / span 3;

    max-width: 35rem;
    padding-right: clamp(0rem, 3vw, 3rem);
}

.about-studio__content h2 {
    max-width: 10ch;
}

.about-studio__content p {
    max-width: 33rem;
}

.about-studio__content p + p {
    margin-top: 1.35rem;
}

.about-studio__content .button {
    margin-top: 1.25rem;
}

.about-studio__gallery {
    grid-column: 4 / -1;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: clamp(2rem, 3vw, 3.5rem);
    row-gap: clamp(3rem, 5vw, 5rem);

    align-items: stretch;
}

.about-studio__image {
    position: relative;

    min-width: 0;
    min-height: clamp(15rem, 25vw, 24rem);
    margin: 0;
    overflow: hidden;

    border-radius: var(--radius-cut);
}

.about-studio__image--large {
    grid-column: 1 / -1;

    min-height: clamp(25rem, 42vw, 38rem);
}

.about-studio__image img {
    position: static;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: none;
}
.about-studio__image-small img {
    position: static;

    display: block;

    width: 50%;
    height: auto;
}

/* Falls im HTML weiterhin die Klasse image-frame steht,
   verhindert dieser Block ein Überlagern durch ältere Regeln. */

.about-studio__image.image-frame {
    position: relative;
    min-width: 0;
    margin: 0;
    overflow: hidden;
}

.about-studio__image.image-frame img {
    position: static;
    inset: auto;
    transform: none;
}


/* =========================================
   KURZ ÜBER MICH
========================================= */

.about-facts {
    overflow: visible;
}

.about-facts__grid {
    align-items: start;
}

.about-facts__intro {
    grid-column: 1 / span 3;

    position: sticky;
    top: 140px;

    align-self: start;
    padding-right: clamp(1rem, 3vw, 3rem);
}

.about-facts__intro h2 {
    max-width: 10ch;
}

.about-facts__list {
    grid-column: 4 / -1;

    border-top: 1px solid rgba(244, 243, 237, .22);
}

.about-fact {
    display: grid;
    grid-template-columns: minmax(2.5rem, .55fr) minmax(0, 4fr);
    gap: clamp(1rem, 2vw, 2rem);

    padding-block: clamp(1.9rem, 3vw, 2.9rem);

    border-bottom: 1px solid rgba(244, 243, 237, .22);
}

.about-fact span {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.5vw, 2.6rem);
    line-height: 1;

    color: rgba(244, 243, 237, .5);
}

.about-fact p {
    align-self: center;

    max-width: 34rem;
    margin: 0;

    color: var(--paper);
}


/* =========================================
   DESKTOP – STICKY KORREKTUR
========================================= */

@media (min-width: 52.01rem) {

    .about-method,
    .about-values,
    .about-facts {
        overflow: visible;
    }

    .about-method__grid,
    .about-values__grid,
    .about-facts__grid {
        overflow: visible;
    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 64rem) {

    .about-method__headline,
    .about-values__intro,
    .about-facts__intro {
        top: 120px;
    }

}


@media (max-width: 52rem) {

    .about-origin__image,
    .about-origin__content,
    .about-method__headline,
    .about-method__list,
    .about-values__intro,
    .about-values__cards,
    .about-studio__content,
    .about-studio__gallery,
    .about-facts__intro,
    .about-facts__list {
        grid-column: 1 / -1;
    }

    .about-origin__image {
        min-height: clamp(28rem, 90vw, 42rem);
        margin-bottom: clamp(2rem, 6vw, 4rem);
    }

    .about-origin__content {
        padding-left: 0;
    }

    .about-method__headline,
    .about-values__intro,
    .about-facts__intro {
        position: relative;
        top: auto;

        margin-bottom: clamp(3rem, 8vw, 5rem);
        padding-right: 0;
    }

    .about-method__item {
        min-height: auto;
    }

    .about-statement__quote {
        grid-column: 1 / -1;
    }

    .about-studio__content {
        margin-bottom: clamp(3rem, 8vw, 5rem);
        padding-right: 0;
    }

    .about-studio__gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        column-gap: clamp(1.5rem, 4vw, 2.5rem);
        row-gap: clamp(2rem, 6vw, 3.5rem);
    }

    .about-studio__image--large {
        min-height: clamp(24rem, 66vw, 36rem);
    }

    .about-studio__image:not(.about-studio__image--large) {
        min-height: clamp(15rem, 36vw, 23rem);
    }

}


/* =========================================
   SMARTPHONE
========================================= */

@media (max-width: 36rem) {

    .about-method__item {
        grid-template-columns: 1fr;
        row-gap: 1.5rem;

        padding-block: 3rem;
    }

    .about-method__number {
        font-size: 2rem;
    }

    .about-value-card {
        grid-template-columns: 1fr;
        row-gap: 1rem;

        padding-block: 2.5rem;
    }

    .about-value-card h3,
    .about-value-card p {
        grid-column: 1;
    }

    .about-statement {
        min-height: 34rem;
    }

    .about-statement__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(38, 38, 38, .82) 0%,
                rgba(38, 38, 38, .52) 100%
            );
    }

   .about-studio__gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        column-gap: 0.75rem;
        row-gap: 0.75rem;
    }

    .about-studio__image {
        grid-column: span 1;

        width: 100%;
        min-width: 0;
        min-height: 0;

        aspect-ratio: 4 / 5;
    }

    .about-studio__image--large {
        grid-column: 1 / -1;

        width: 100%;
        min-height: 0;

        aspect-ratio: 16 / 10;
    }

    .about-studio__image img,
    .about-studio__image-small img {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;
    }


    .about-fact {
        grid-template-columns: 1fr;
        row-gap: .75rem;
    }

}


/* =========================================
   REDUZIERTE BEWEGUNG
========================================= */

@media (prefers-reduced-motion: reduce) {

    .about-method__headline,
    .about-values__intro,
    .about-facts__intro {
        position: relative;
        top: auto;
    }

}
/* =========================================
   MOBIL
========================================= */

@media (max-width: 36rem) {

    .editorial-gallery__item--wide img,
    .editorial-gallery__item--half img {
        aspect-ratio: 4 / 5;
    }
}
/* =========================================
   LEISTUNGSBEREICHE: BILD UND TEXT
========================================= */
.about-teaser .services-grid {
    margin-top: clamp(3rem, 6vw, 6rem);
}
.about-teaser__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas: "image image image content content content";
    column-gap: clamp(2rem, 5vw, 6rem);
    align-items: center;
}

/* Bild links */

.about-teaser__image {
    grid-area: image;

    width: 100%;
    min-width: 0;

    aspect-ratio: 5 / 6;
}

/* Text rechts */

.about-teaser__content {
    grid-area: content;

    min-width: 0;
    padding: 0;
}

.about-teaser__content p:not(.eyebrow) {
    max-width: 36rem;
    margin-bottom: 2rem;

    font-size: clamp(
        1.0625rem,
        1rem + .2vw,
        1.1875rem
    );

    line-height: 1.65;
}


/* =========================================
   GESPIEGELTE VARIANTE:
   TEXT LINKS, BILD RECHTS
========================================= */

.about-teaser--reverse .about-teaser__grid {
    grid-template-areas: "content content content image image image";
}


/* =========================================
   TABLET UND MOBIL
========================================= */

@media (max-width: 52rem) {

    .about-teaser__grid,
    .about-teaser--reverse .about-teaser__grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "image"
            "content";

        row-gap: 3rem;
    }

    .about-teaser__image,
    .about-teaser__content {
        width: 100%;
        min-width: 0;
    }

    .about-teaser__content {
        padding: 0;
    }

}


/* =========================================
   KLEINE SMARTPHONES
========================================= */

@media (max-width: 36rem) {

    .about-teaser__image {
        aspect-ratio: 4 / 5;
    }

}


/* =========================================
   PROCESS STORY
========================================= */

.process-story {
    --process-top: 6rem;
    --process-row-height: clamp(4.25rem, 6.5vh, 5.5rem);

    /*
       Vier Scrollphasen:

       1. Schritt 02 kommt
       2. Schritt 03 kommt
       3. Schritt 04 kommt
       4. Schritt 04 schließt sich
    */

    height: calc(100svh + 280vh);

    position: relative;
    z-index: 1;

margin: clamp(6rem, 9vw, 9rem) 0 0;    padding: 0;

    background: var(--paper, #f4f3ed);
}


/* =========================================
   STICKY-BÜHNE
========================================= */

.process-story__stage {
    position: sticky;
    top: var(--process-top);

    height: calc(100svh - var(--process-top));

    overflow: hidden;

    background: var(--paper, #f4f3ed);

    transform: translate3d(0, 0, 0);
    will-change: transform;
}

/* =========================================
   INNERES GRID
========================================= */

.process-story__grid {
    height: 100%;

    display: grid;
    grid-template-rows: auto minmax(0, 1fr);

    padding-top: clamp(2rem, 4vh, 4rem);
    padding-bottom: 0;
}


/* =========================================
   EINLEITUNG
========================================= */

.process-story__intro {
    grid-column: 1 / -1;

    position: relative;
    z-index: 20;

    width: 100%;

    padding-bottom: clamp(2rem, 4vh, 3.5rem);

    background: var(--paper, #f4f3ed);
}

.process-story__intro h2 {
    width: 100%;
    max-width: none;

    margin-bottom: 0;
}

.process-story__lead {
    width: 100%;
    max-width: none;

    margin:
        clamp(1.5rem, 3vh, 2.5rem)
        0
        0;

    font-size: clamp(
        1.0625rem,
        0.98rem + 0.3vw,
        1.25rem
    );

    line-height: 1.65;
}


/* =========================================
   SCHRITTBEREICH
========================================= */

.process-story__steps {
    grid-column: 1 / -1;

    position: relative;

    min-height: 0;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    list-style: none;

    border-top: 1px solid var(--beton, #a6aaa1);
}


/* =========================================
   EINZELNE SCHRITTE
========================================= */

.process-story__step {
    --step-y: 0px;
    --step-clip-bottom: 0px;

    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    transform: translate3d(
        0,
        var(--step-y),
        0
    );

    clip-path: inset(
        0
        0
        var(--step-clip-bottom)
        0
    );

    will-change: transform, clip-path;

    background: var(--paper, #f4f3ed);
}

.process-story__step:nth-child(1) {
    z-index: 1;
}

.process-story__step:nth-child(2) {
    z-index: 2;
}

.process-story__step:nth-child(3) {
    z-index: 3;
}

.process-story__step:nth-child(4) {
    z-index: 4;
}


/* =========================================
   ÜBERSCHRIFT
========================================= */

.process-story__heading {
    display: grid;

    grid-template-columns:
        minmax(3.5rem, 0.6fr)
        minmax(0, 5.4fr);

    align-items: center;

    column-gap: clamp(1.5rem, 3vw, 3.5rem);

    min-height: var(--process-row-height);

    background: var(--paper, #f4f3ed);

    border-bottom: 1px solid var(--beton, #a6aaa1);
}

.process-story__number {
    color: var(--moss, #4a5a46);

    font-size: 0.9rem;
    line-height: 1;
    letter-spacing: 0.14em;
}

.process-story__heading h3 {
    margin: 0;



    font-weight: 400;
    line-height: 1.1;
}


/* =========================================
   BESCHREIBUNG
========================================= */

.process-story__content {
    display: grid;

    grid-template-columns:
        minmax(3.5rem, 0.6fr)
        minmax(0, 5.4fr);

    column-gap: clamp(1.5rem, 3vw, 3.5rem);

    height: calc(100% - var(--process-row-height));

    padding-top: clamp(2.5rem, 7vh, 6rem);
    padding-bottom: clamp(3rem, 8vh, 7rem);

    background: var(--paper, #f4f3ed);
}

.process-story__content p {
    grid-column: 2;

    width: 100%;
    max-width: 48rem;

    margin: 0;

  

    line-height: 1.6;
}


/* =========================================
   DIREKT FOLGENDE SECTION
========================================= */
.process-story + .image-statement,
.process-story + .about-teaser {
    --process-overlap: 0px;

    position: relative;
    z-index: 30;

    margin-top: calc(-1 * var(--process-overlap));
}

/*
   Nur für das Beispiel aus dem HTML.
   Bei deiner echten Folge-Section nicht nötig.
*/

.next-section {
    min-height: 80vh;

    padding-top: clamp(5rem, 10vw, 10rem);
    padding-bottom: clamp(5rem, 10vw, 10rem);

    background: var(--paper, #f4f3ed);
}


/* =========================================
   KLEINERE DESKTOPS
========================================= */

@media (max-width: 70rem) {

    .process-story {
        --process-top: 5.5rem;
        --process-row-height: 4.75rem;

        height: calc(100svh + 300vh);
    }

    .process-story__grid {
        padding-top: clamp(1.5rem, 3vh, 2.5rem);
    }

    .process-story__intro {
        padding-bottom: 2rem;
    }

    .process-story__lead {
        margin-top: 1.5rem;
    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 52rem) {

    .process-story {
        --process-top: 5rem;
        --process-row-height: 4.5rem;

        height: calc(100svh + 280vh);
    }

    .process-story__heading,
    .process-story__content {
        grid-template-columns:
            minmax(2.5rem, auto)
            minmax(0, 1fr);

        column-gap: 1.25rem;
    }

    .process-story__content {
        padding-top: clamp(2rem, 5vh, 3.5rem);
    }

    .process-story__heading h3 {
        font-size: clamp(1.45rem, 5vw, 2.2rem);
    }

    .process-story__content p {
        font-size: clamp(1.05rem, 2.8vw, 1.25rem);
    }

}


/* =========================================
   SMARTPHONE
========================================= */

@media (max-width: 36rem) {

    .process-story {
        --process-top: 4.5rem;
        --process-row-height: 4rem;

        height: calc(100svh + 255vh);
    }

    .process-story__grid {
        padding-top: 1.25rem;
    }

    .process-story__intro {
        padding-bottom: 1.5rem;
    }

    .process-story__lead {
        margin-top: 1.25rem;

        font-size: 1rem;
        line-height: 1.5;
    }

    .process-story__heading,
    .process-story__content {
        grid-template-columns:
            2rem
            minmax(0, 1fr);

        column-gap: 0.75rem;
    }

    .process-story__heading h3 {
        font-size: clamp(1.25rem, 5.5vw, 1.75rem);
    }

    .process-story__number {
        font-size: 0.75rem;
    }

    .process-story__content {
        padding-top: 1.75rem;
        padding-bottom: 2.5rem;
    }

    .process-story__content p {
        font-size: 1rem;
        line-height: 1.5;
    }

}


/* =========================================
   REDUZIERTE BEWEGUNG
========================================= */

@media (prefers-reduced-motion: reduce) {

    .process-story {
        height: auto;
    }

    .process-story__stage {
        position: relative;
        top: auto;

        height: auto;

        overflow: visible;
    }

    .process-story__grid {
        height: auto;

        display: grid;
        grid-template-rows: auto auto;
    }

    .process-story__steps {
        height: auto;

        overflow: visible;
    }

    .process-story__step {
        position: relative;
        top: auto;
        right: auto;
        left: auto;

        height: auto;

        transform: none !important;
        clip-path: none !important;

        border-bottom: 1px solid var(--beton, #a6aaa1);
    }

    .process-story__content {
        height: auto;

        padding-top: 1rem;
        padding-bottom: 3rem;
    }

}

.process-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-dark);
}
/* =========================================
   ABLAUF – ÜBERSCHRIFT ÜBER GESAMTE BREITE
========================================= */

.process .section-heading--wide {
    grid-column: 1 / -1;

    width: 100%;
    max-width: none;

    margin-bottom: clamp(3rem, 6vw, 5rem);
}
.section-heading--full h2 {
    max-width: none;
}

.process .section-heading--wide h2 {
    width: 100%;
    max-width: 22ch;
    margin-bottom: 0;
}

.process-step {
  min-height: 21rem;
  padding: 1.5rem;
  border-right: 1px solid var(--line-dark);
}

.process-step:first-child {
  border-left: 1px solid var(--line-dark);
}

.process-step__number {
  display: block;
  margin-bottom: 5rem;
  color: var(--moss);
   opacity: .75;

  font-size: .900rem;
  line-height: 1.2;
  letter-spacing: .14em;
}

.contact-cta__grid {
  align-items: end;
}

.contact-cta__copy {
  grid-column: 1 / span 4;
}

.contact-cta__action {
  grid-column: 5 / -1;
}

/* ==========================================
   CTA
========================================== */

.cta-contact__grid{

    align-items:center;
    gap:clamp(3rem,5vw,6rem);

}

.cta-contact__image{

    grid-column:1 / span 3;

}

.cta-contact__image img{

    width:100%;
    display:block;

    aspect-ratio:4 / 5;
    object-fit:cover;

    border-radius:0 0 0 2.25rem;

}

.cta-contact__content{

    grid-column:4 / -1;

}

.cta-contact__content h2{

    max-width:10ch;

}

.cta-contact__text{

    max-width:34rem;

}

.cta-contact__buttons{

    display:flex;
    flex-wrap:wrap;
    gap:1rem;

    margin-top:2.5rem;

}

@media(max-width:70rem){

    .cta-contact__image,
    .cta-contact__content{

        grid-column:1 / -1;

    }

    .cta-contact__image{

        max-width:40rem;

    }

}

@media(max-width:48rem){

    .cta-contact__buttons{

        flex-direction:column;
        align-items:flex-start;

    }

}

/* =========================================
   FOOTER
========================================= */



.site-footer {
  padding-block: 4rem 2rem;
  color: var(--paper);
  background: var(--anthracite);
}

.site-footer__grid {
  row-gap: 4rem;
}

/* Desktop-Footer */

.footer-desktop {
  display: contents;
}

.footer-mobile {
  display: none;
}

.site-footer__brand {
  grid-column: 1 / span 2;
}

.logo--footer {
  margin-bottom: 1rem;
}

.logo--footer img {
  width: auto;
  height: 130px;
}

.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.site-footer__nav--navigation {
  grid-column: 3;
}

.site-footer__nav--legal {
  grid-column: 4;
}

.site-footer__contact {
  grid-column: 5 / -1;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.site-footer a {
  transition: opacity var(--transition);
}

.site-footer a:hover {
  opacity: .68;
	
}

.site-footer__bottom {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-light);
  font-size: .85rem;
}

/* =========================================
   FOOTER – TABLET UND MOBIL
========================================= */

@media (max-width: 52rem) {

  .site-footer {
    padding-block: 3rem 1.5rem;
  }

  .site-footer__grid {
    row-gap: 0;
  }

  .footer-desktop {
    display: none;
  }

  .footer-mobile {
    display: block;
    grid-column: 1 / -1;
    width: 100%;
  }

  .footer-mobile__brand {
    padding-bottom: 2rem;
  }

  .footer-mobile .logo--footer {
    margin-bottom: 0;
  }

  .footer-mobile .logo--footer img {
    height: 100px;
  }

  .footer-accordion {
    border-top: 1px solid var(--line-light);
  }

  .footer-accordion:last-of-type {
    border-bottom: 1px solid var(--line-light);
  }

  .footer-accordion summary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 3.75rem;
    margin: 0;
    padding: 1rem 2.25rem 1rem 0;
    list-style: none;
    cursor: pointer;
  }

  .footer-accordion summary::-webkit-details-marker {
    display: none;
  }

  .footer-accordion summary::before,
  .footer-accordion summary::after {
    position: absolute;
    right: .25rem;
    width: 1rem;
    height: 1px;
    background: currentColor;
    content: "";
    transition: transform var(--transition);
  }

  .footer-accordion summary::after {
    transform: rotate(90deg);
  }

  .footer-accordion[open] summary::after {
    transform: rotate(0);
  }

  .footer-accordion__content {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 0 0 1.5rem;
  }

  .footer-accordion__content a {
    width: fit-content;
  }

  .footer-mobile__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line-light);
    font-size: .85rem;
  }

  .footer-mobile__bottom p {
    margin-bottom: 0;
  }
}
/* =========================================
   FOOTER-LOGO-ANIMATION
========================================= */

.logo--footer img {
    transform-origin: center center;

    animation-name: footer-logo-rotation;
    animation-duration: 6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}


/*
Das Logo dreht sich während der ersten Sekunde.
Danach bleibt es für ungefähr fünf Sekunden stehen.
*/

@keyframes footer-logo-rotation {

    0% {
        transform: rotate(0deg);
    }

    30% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(360deg);
    }

}


/* =========================================
   „NACH OBEN“-LINK
========================================= */

.back-to-top {
    display: inline-flex;
    align-items: center;
    gap: .55rem;

    width: fit-content;

    transition:
        opacity var(--transition),
        transform 320ms cubic-bezier(.2, .7, .2, 1);
}

.back-to-top img {
    display: block;

    width: 17px;
    height: 17px;

    object-fit: contain;

    transition: transform 320ms cubic-bezier(.2, .7, .2, 1);
}

.back-to-top:hover {
    opacity: .72;
    transform: translateY(-1px);
}

.back-to-top:hover img {
    transform: translateY(-3px);
}


/* =========================================
   TABLET UND MOBIL
========================================= */

@media (max-width: 52rem) {

    .back-to-top {
        gap: .45rem;
    }

    .back-to-top img {
        width: 15px;
        height: 15px;
    }

}


/* =========================================
   REDUZIERTE BEWEGUNG
========================================= */

@media (prefers-reduced-motion: reduce) {

    .logo--footer img {
        animation: none;
    }

    .back-to-top,
    .back-to-top img {
        transition: none;
    }

}

.reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition:
    opacity 900ms ease,
    transform 1000ms cubic-bezier(.7, .7, .7, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 70rem) {
  h1 {
    font-size: clamp(3.4rem, 7vw, 6.3rem);
  }

  .services-grid,
  .process-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-card:nth-child(3),
  .service-card:nth-child(4),
  .process-step:nth-child(3),
  .process-step:nth-child(4) {
    border-top: 1px solid var(--line-light);
  }
}

@media (max-width: 52rem) {
  :root {
    --section-space: 5rem;
  }

  .page-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

 

  .brand {
    grid-column: 1;
  }

  .nav-toggle {
    grid-column: 2;
    display: inline-flex;
    justify-self: end;
    align-items: center;
    gap: .7rem;
    cursor: pointer;
  }

  .nav-toggle__icon,
  .nav-toggle__icon::before {
    display: block;
    width: 1.4rem;
    height: 1px;
    background: currentColor;
    transition: transform var(--transition);
  }

  .nav-toggle__icon {
    position: relative;
  }

  .nav-toggle__icon::before {
    position: absolute;
    top: -.4rem;
    content: "";
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__icon {
    transform: rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__icon::before {
    top: 0;
    transform: rotate(90deg);
  }

  .main-nav {
    position: fixed;
    inset: 4.8rem 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 1.25rem var(--page-padding) 2rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line-dark);
    transform: translateY(-130%);
    transition: transform var(--transition);
  }

  .main-nav.is-open {
    transform: translateY(0);
  }

  .main-nav__link {
    padding-block: 1rem;
    border-bottom: 1px solid var(--line-dark);
  }

  .hero {
    min-height: auto;
  }

  .hero__copy,
  .hero__visual,
  .intro .section-index,
  .intro__headline,
  .intro__text,
  .section-heading,
  .section-heading--wide,
  .services-grid,
  .project--large,
  .project-grid,
  .about-teaser__image,
  .about-teaser__content,
  .process-list,
  .contact-cta__copy,
  .contact-cta__action {
    grid-column: 1 / -1;
  }

  .hero__copy {
    padding-top: 3rem;
  }

  .hero__visual {
    min-height: 34rem;
  }

  .intro__headline {
    margin-bottom: 2rem;
  }

  .services-grid,
  .process-list,
  .project-grid {
    grid-template-columns: 1fr;
  }
/* =========================================
   INDEX – PROJEKTKARTEN IM ALTEN AUFBAU
========================================= */

.projects .project-grid .project-card {
    grid-column: auto;
    width: 100%;
    min-width: 0;
}

/* Alle Karten innerhalb des Zweier-Grids
   nehmen genau eine Spalte ein */

.projects .project-grid .project-card--portrait,
.projects .project-grid .project-card--landscape,
.projects .project-grid .project-card--square,
.projects .project-grid .project-card--wide {
    grid-column: span 1;
}
	/* Oben rechts */

.projects .project-grid .project-card--portrait .project-card__image {
    aspect-ratio: 4 / 5;
}

/* Unten links und rechts */

.projects .project-grid .project-card--square .project-card__image,
.projects .project-grid .project-card--wide .project-card__image {
    aspect-ratio: 4 / 5;
}

/* Großes Projekt in der Mitte */

.projects .project-card--index-large .project-card__image {
    aspect-ratio: 16 / 8;
}
	@media (max-width: 52rem) {

    .projects .project-grid {
        grid-template-columns: 1fr;
    }

    .projects .project-grid .project-card,
    .projects .project-card--index-large {
        grid-column: 1 / -1;
    }

    .projects .project-grid .project-card__image,
    .projects .project-card--index-large .project-card__image {
        aspect-ratio: 16 / 10;
    }

}

@media (max-width: 36rem) {

    .projects .project-grid .project-card__image,
    .projects .project-card--index-large .project-card__image {
        aspect-ratio: 4 / 5;
    }

}
	.project-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--grid-gap);
}

.project-card {
    width: 100%;
}

.project-card--large {
    grid-column: 1 / -1;
}
	.project-grid .project-card .project-card__image {
    aspect-ratio: 4 / 5;
}

.project-card--large .project-card__image {
    aspect-ratio: 16 / 8;
}
	/* =========================================
   INDEX – PROJEKTAUSWAHL
========================================= */

.projects__layout {
    row-gap: clamp(5rem, 10vw, 10rem);
}

.projects .project-grid {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: var(--grid-gap);
    row-gap: clamp(4rem, 7vw, 7rem);

    align-items: start;
}


/* Größenklassen der Projektseite neutralisieren */

.projects .project-grid .project-card {
    grid-column: auto;

    width: 100%;
    min-width: 0;
}


/* Einleitung */

.projects__intro {
    min-width: 0;

    padding-right: clamp(1rem, 4vw, 4rem);
}

.projects__intro h2 {
    max-width: 9ch;
}

.projects__intro > p:last-child {
    max-width: 32rem;
    margin-bottom: 0;

    line-height: 1.7;
}


/* Bilder in allen drei Karten gleich groß */

.projects .project-card__image {
    width: 100%;
    aspect-ratio: 4 / 3;
}


/* Bestehende Höhen der Modifier überschreiben */

.projects .project-card--portrait .project-card__image,
.projects .project-card--landscape .project-card__image,
.projects .project-card--square .project-card__image,
.projects .project-card--wide .project-card__image {
    height: auto;
    min-height: 0;

    aspect-ratio: 4 / 3;
}


/* Tablet */

@media (max-width: 52rem) {

    .projects .project-grid {
        grid-template-columns: 1fr;
    }

    .projects__intro {
        padding-right: 0;
    }

    .projects .project-card__image {
        aspect-ratio: 16 / 10;
    }

}


/* Smartphone */

@media (max-width: 36rem) {

    .projects__layout {
        row-gap: 4rem;
    }

    .projects .project-grid {
        row-gap: 4rem;
    }

    .projects .project-card__image {
        aspect-ratio: 4 / 5;
    }

}
	
  .service-card,
  .process-step {
    min-height: auto;
    padding: 2rem 1.25rem 5rem;
    border: 1px solid var(--line-light);
    border-top: 0;
  }

  .service-card:first-child,
  .process-step:first-child {
    border-top: 1px solid var(--line-light);
  }

  .service-card__icon {
    margin-bottom: 2rem;
  }

  .process-step__number {
    margin-bottom: 2rem;
  }

  .project__meta {
    flex-direction: column;
    gap: .25rem;
  }

  .project__meta p {
    text-align: left;
  }

  .about-teaser__content {
    padding: 3rem 0 0;
  }

  .contact-cta__copy {
    margin-bottom: 1rem;
  }
}

@media (max-width: 36rem) {
  h1 {
    font-size: clamp(3rem, 15vw, 4.6rem);
  }

  h2 {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .hero__visual {
    min-height: 28rem;
  }

  .hero-overlay-image {
    width: 42%;
  }

  .button-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .project--large .image-frame,
  .image-frame {
    aspect-ratio: 4 / 5;
  }
}


.service-card__icon--illustration {
    width: auto;
    height: 5rem;

    margin: 0 auto 2rem;

    display: flex;
    align-items: center;
    justify-content: center;
}

.service-card__icon--illustration img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

/* =========================================
   PROJEKTSEITE – EINLEITUNG
========================================= */

.projects-intro__grid {
    align-items: start;
}

.projects-intro__headline {
    grid-column: 1 / span 3;
}

.projects-intro__headline h2 {
    max-width: 10ch;
    margin-bottom: 0;
}

.projects-intro__text {
    grid-column: 4 / -1;

    max-width: 38rem;
    padding-top: clamp(2rem, 6vw, 6rem);
}

.projects-intro__text p {
    font-size: clamp(
        1.0625rem,
        1rem + .2vw,
        1.1875rem
    );

    line-height: 1.7;
}

.projects-intro__text p:last-child {
    margin-bottom: 0;
}


/* =========================================
   PROJEKTSEITE – ÜBERSICHT
========================================= */

.projects-overview {
    padding-top: 1.2rem;
}

.projects-overview__intro {
    grid-column: 1 / -1;

    max-width: 100%;

    margin-bottom: clamp(4rem, 8vw, 8rem);
}

.projects-overview__intro h2 {
    max-width: 100%;
}

.projects-overview__lead {

    max-width: 100%;
    margin-bottom: 0;

    font-size: clamp(
        1.0625rem,
        1rem + .2vw,
        1.1875rem
    );

    line-height: 1.7;

}


/* =========================================
   PROJEKTSEITE – GALERIE
========================================= */

.projects-gallery {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));

    gap:
        clamp(4rem, 8vw, 8rem)
        var(--grid-gap);
}


/* =========================================
   PROJEKTSEITE – PROJEKTKARTE
========================================= */

.project-card {
    position: relative;

    min-width: 0;
}

.project-card__link {
    display: block;

    color: inherit;
}

.project-card__image {
    position: relative;

    width: 100%;
    overflow: hidden;

    background: var(--beton);

    border-radius: var(--radius-cut);
}

.project-card__image img {
    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: center;

    filter: grayscale(1);

    transform: scale(1.025);

    transition:
        filter 800ms ease,
        transform 1000ms cubic-bezier(.2, .7, .2, 1);
}

.project-card__link:hover .project-card__image img {
    filter: grayscale(0);

    transform: scale(1.06);
}


/* =========================================
   PROJEKTSEITE – BILDPROPORTIONEN
========================================= */

.project-card--featured {
    grid-column: 1 / -1;
}

.project-card--featured .project-card__image {
    aspect-ratio: 16 / 8;
}

.project-card--portrait {
    grid-column: span 5;
}

.project-card--portrait .project-card__image {
    aspect-ratio: 4 / 5;
}

.project-card--landscape {
    grid-column: span 7;
}

.project-card--landscape .project-card__image {
    aspect-ratio: 16 / 10;
}

.project-card--square {
    grid-column: span 5;
}

.project-card--square .project-card__image {
    aspect-ratio: 1 / 1;
}

.project-card--wide {
    grid-column: span 7;
}

.project-card--wide .project-card__image {
    aspect-ratio: 16 / 9;
}


/* =========================================
   PROJEKTSEITE – PROJEKTNUMMER
========================================= */

.project-card__index {
    position: absolute;
    z-index: 2;

    top: 1.25rem;
    left: 1.25rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 2.75rem;
    height: 2.75rem;

    padding-inline: .6rem;

    color: var(--paper);
    background: rgba(38, 38, 38, .8);

    border: 1px solid rgba(244, 243, 237, .2);

    font-size: .8rem;
    line-height: 1;
    letter-spacing: .12em;
}


/* =========================================
   PROJEKTSEITE – STATUS
========================================= */

.project-card__status {
    position: absolute;
    z-index: 2;

    right: 1.25rem;
    bottom: 1.25rem;

    display: inline-flex;
    align-items: center;

    min-height: 2.5rem;

    padding: .65rem .85rem;

    color: var(--paper);
    background: rgba(74, 90, 70, .92);

    font-size: .75rem;
    font-weight: 600;
    line-height: 1;

    letter-spacing: .12em;
    text-transform: uppercase;
}


/* =========================================
   PROJEKTSEITE – INHALT
========================================= */

.project-card__content {
    display: grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(0, 1fr);

    column-gap: clamp(2rem, 4vw, 5rem);
    row-gap: 1.5rem;

    padding-top: 1.5rem;
}

.project-card__heading {
    min-width: 0;
}

.project-card__category {
    margin-bottom: .8rem;

    color: var(--moss);

    font-size: .8rem;
    font-weight: 600;
    line-height: 1.3;

    letter-spacing: .14em;
    text-transform: uppercase;
}

.project-card__heading h3 {
    max-width: 18ch;
    margin-bottom: 0;

    font-family: var(--font-body);

    font-size: clamp(
        1.25rem,
        2vw,
        1.75rem
    );

    font-weight: 500;
    line-height: 1.15;
    letter-spacing: 0;

    transition:
        transform 420ms cubic-bezier(.2, .7, .2, 1),
        color 300ms ease;
}

.project-card__link:hover .project-card__heading h3 {
    color: var(--moss);

    transform: translateY(-4px);
}

.project-card__description {
    align-self: end;

    min-width: 0;
}

.project-card__description p {
    max-width: 34rem;
    margin-bottom: 0;

    line-height: 1.65;
}


/* =========================================
   PROJEKTSEITE – LEISTUNGEN
========================================= */

.project-card__services {
    grid-column: 1 / 2;

    display: flex;
    flex-wrap: wrap;

    gap: .6rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

.project-card__services li {
    display: inline-flex;
    align-items: center;

    min-height: 2rem;

    padding: .45rem .7rem;

    border: 1px solid var(--beton);

    font-size: .82rem;
    line-height: 1;
}

.project-card__services li::before {
    width: .35rem;
    height: .35rem;

    margin-right: .5rem;

    background: var(--moss);

    border-radius: 50%;

    content: "";
}


/* =========================================
   PROJEKTSEITE – AKTIONSLINK
========================================= */

.project-card__action {
    grid-column: 2 / -1;

    position: relative;

    justify-self: end;
    align-self: end;

    display: inline-flex;
    align-items: center;

    padding-bottom: .35rem;

    border-bottom: 1px solid currentColor;

    font-size: .95rem;
    font-weight: 600;
}

.project-card__action::after {
    margin-left: .65rem;

    content: "→";

    transition:
        transform 360ms cubic-bezier(.2, .7, .2, 1);
}

.project-card__link:hover .project-card__action::after {
    transform: translateX(.35rem);
}


/* =========================================
   PROJEKTSEITE – BESONDERE KARTEN
========================================= */

.project-card--in-progress .project-card__image img {
    filter: grayscale(1);
}

.project-card--in-progress .project-card__link {
    cursor: default;
}

.project-card--in-progress .project-card__heading h3 {
    color: inherit;
    transform: none;
}

.project-card--concept .project-card__category {
    color: var(--anthracite);
}

.project-card--concept .project-card__services li::before {
    background: var(--anthracite);
}


/* =========================================
   PROJEKTSEITE – GROSSE KARTE
========================================= */

.project-card--featured .project-card__content {
    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(18rem, .75fr);
}

.project-card--featured .project-card__heading h3 {
    max-width: 18ch;
}

.project-card--featured .project-card__description {
    align-self: start;

    padding-top: clamp(.5rem, 2vw, 1.5rem);
}


/* =========================================
   PROJEKTSEITE – PORTFOLIO-HINWEIS
========================================= */

.projects-note__grid {
    align-items: end;
}

.projects-note__content {
    grid-column: 1 / span 3;
}

.projects-note__content h2 {
    max-width: 10ch;
    margin-bottom: 0;
}

.projects-note__text {
    grid-column: 4 / -1;

    max-width: 36rem;
}

.projects-note__text p {
    margin-bottom: 0;

    font-size: clamp(
        1.0625rem,
        1rem + .2vw,
        1.1875rem
    );

    line-height: 1.7;
}


/* =========================================
   PROJEKTSEITE – HOVER NUR MIT MAUS
========================================= */

@media (hover: hover) and (pointer: fine) {

    .project-card__link:hover .project-card__image {
        box-shadow: 0 20px 45px rgba(38, 38, 38, .1);
    }

}


/* =========================================
   PROJEKTSEITE – KLEINERE DESKTOPS
========================================= */

@media (max-width: 70rem) {

    .projects-gallery {
        gap:
            clamp(4rem, 7vw, 6rem)
            var(--grid-gap);
    }

    .project-card__content,
    .project-card--featured .project-card__content {
        grid-template-columns: 1fr;
    }

    .project-card__description {
        padding-top: 0;
    }

    .project-card__services,
    .project-card__action {
        grid-column: 1;
    }

    .project-card__action {
        justify-self: start;
    }

}


/* =========================================
   PROJEKTSEITE – TABLET
========================================= */

@media (max-width: 52rem) {

    .projects-intro__headline,
    .projects-intro__text,
    .projects-overview__heading,
    .projects-note__content,
    .projects-note__text {
        grid-column: 1 / -1;
    }

    .projects-intro__text {
        max-width: none;
        padding-top: 2rem;
    }

    .projects-overview__heading {
        margin-bottom: 3.5rem;
    }

    .projects-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        row-gap: 4.5rem;
    }

    .project-card--featured,
    .project-card--portrait,
    .project-card--landscape,
    .project-card--square,
    .project-card--wide {
        grid-column: 1 / -1;
    }

    .project-card--featured .project-card__image,
    .project-card--landscape .project-card__image,
    .project-card--wide .project-card__image {
        aspect-ratio: 16 / 10;
    }

    .project-card--portrait .project-card__image {
        aspect-ratio: 4 / 5;
    }

    .project-card--square .project-card__image {
        aspect-ratio: 1 / 1;
    }

    .project-card__content,
    .project-card--featured .project-card__content {
        grid-template-columns: 1fr;
        row-gap: 1.25rem;
    }

    .project-card__services,
    .project-card__action {
        grid-column: 1;
    }



    .projects-note__grid {
        row-gap: 2.5rem;
    }

}


/* =========================================
   PROJEKTSEITE – SMARTPHONE
========================================= */

@media (max-width: 36rem) {

    .projects-gallery {
        grid-template-columns: 1fr;

        row-gap: 4rem;
    }

    .project-card--featured .project-card__image,
    .project-card--portrait .project-card__image,
    .project-card--landscape .project-card__image,
    .project-card--square .project-card__image,
    .project-card--wide .project-card__image {
        aspect-ratio: 4 / 5;
    }

    .project-card__index {
        top: .9rem;
        left: .9rem;

        min-width: 2.4rem;
        height: 2.4rem;

        font-size: .72rem;
    }

    .project-card__status {
        right: .9rem;
        bottom: .9rem;

        min-height: 2.2rem;

        padding: .55rem .7rem;

        font-size: .68rem;
    }

    .project-card__content {
        padding-top: 1.25rem;
    }

  
    .project-card__services {
        gap: .45rem;
    }

    .project-card__services li {
        min-height: 1.9rem;

        padding: .4rem .6rem;

        font-size: .76rem;
    }

}


/* =========================================
   PROJEKTSEITE – REDUZIERTE BEWEGUNG
========================================= */

@media (prefers-reduced-motion: reduce) {

    .project-card__image img,
    .project-card__heading h3,
    .project-card__action::after {
        transition: none;
    }

    .project-card__link:hover .project-card__image img {
        transform: none;
    }

    .project-card__link:hover .project-card__heading h3 {
        transform: none;
    }

}
/* =========================================
   PROJEKTSEITE – WERKBANK
========================================= */

.workbench {
    overflow: hidden;
}

.workbench__grid {
    row-gap: clamp(3.5rem, 7vw, 7rem);
}


/* =========================================
   WERKBANK – EINLEITUNG
========================================= */

.workbench__intro {
    grid-column: 1 / -1;
}

.workbench__intro h2 {
    max-width: none;
}

.workbench__lead {
    max-width: none;
    margin-bottom: 0;

    font-size: clamp(
        1.0625rem,
        1rem + .2vw,
        1.1875rem
    );

    line-height: 1.7;
}


/* =========================================
   WERKBANK – GALERIE
========================================= */

.workbench__gallery {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: var(--grid-gap);
}


/* =========================================
   WERKBANK – KARTEN
========================================= */

.workbench-card {
    min-width: 0;
}

.workbench-card--large {
    grid-row: span 2;
}

.workbench-card__link {
    display: block;
    height: 100%;

}

.workbench-card__image {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: var(--beton);

    border-radius: var(--radius-cut);
}

.workbench-card--large .workbench-card__image {
    height: 100%;
    min-height: 42rem;

    aspect-ratio: auto;
}

.workbench-card__image img {
    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: center;

    filter: grayscale(1);

    transform: scale(1.025);

    transition:
        filter 800ms ease,
        transform 1000ms cubic-bezier(.2, .7, .2, 1);
}

.workbench-card__link:hover .workbench-card__image img {
    filter: grayscale(0);
    transform: scale(1.06);
}


/* =========================================
   WERKBANK – NUMMER
========================================= */

.workbench-card__number {
    position: absolute;
    z-index: 2;

    top: 1.25rem;
    left: 1.25rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 2.75rem;
    height: 2.75rem;

    padding-inline: .6rem;

    color: var(--paper);
    background: rgba(38, 38, 38, .78);

    border: 1px solid rgba(244, 243, 237, .22);

    font-size: .8rem;
    line-height: 1;
    letter-spacing: .12em;
}


/* =========================================
   WERKBANK – TEXTE
========================================= */

.workbench-card__content {
    padding-top: 1.4rem;
}

.workbench-card__category {
    margin-bottom: .7rem;

    color: var(--beton);

    font-size: .8rem;
    font-weight: 600;
    line-height: 1.3;

    letter-spacing: .14em;
    text-transform: uppercase;
}

.workbench-card__content h3 {
    max-width: 20ch;

    margin-bottom: .75rem;

    font-weight: 500;
}

.workbench-card__content p:last-child {
    max-width: 34rem;
    margin-bottom: 0;


    line-height: 1.65;
}


/* =========================================
   WERKBANK – ABSCHLUSS
========================================= */

.workbench__footer {
    grid-column: 1 / -1;

    display: flex;
    justify-content: flex-end;

    padding-top: clamp(1rem, 2vw, 2rem);
}


/* =========================================
   WERKBANK – TABLET
========================================= */

@media (max-width: 52rem) {

    .workbench__intro,
    .workbench__gallery,
    .workbench__footer {
        grid-column: 1 / -1;
    }

    .workbench__gallery {
        grid-template-columns: 1fr;
        row-gap: 4rem;
    }

    .workbench-card--large {
        grid-row: auto;
    }

    .workbench-card--large .workbench-card__image,
    .workbench-card__image {
        height: auto;
        min-height: 0;

        aspect-ratio: 16 / 10;
    }

    .workbench__footer {
        justify-content: flex-start;
    }

}


/* =========================================
   WERKBANK – SMARTPHONE
========================================= */

@media (max-width: 36rem) {

    .workbench-card--large .workbench-card__image,
    .workbench-card__image {
        aspect-ratio: 4 / 5;
    }

    .workbench-card__number {
        top: .9rem;
        left: .9rem;

        min-width: 2.4rem;
        height: 2.4rem;

        font-size: .72rem;
    }

}
/* =========================================
   WERKBANK – FIGURE-SLIDER
========================================= */

.editorial-gallery__slider {
    grid-column: 1 / -1;
    margin-top: clamp(4rem, 6vw, 6rem);

    width: 100%;
    min-width: 0;
}


/* Sichtbarer Bereich */

.editorial-gallery__viewport {
    width: 100%;
    min-width: 0;

    overflow: hidden;
}


/* Laufende Reihe */

.editorial-gallery__track {
    --slider-gap: var(--grid-gap);

    display: flex;
    flex-wrap: nowrap;

    gap: var(--slider-gap);

    width: 100%;

    transform: translateX(0);

    transition:
        transform 850ms cubic-bezier(.2, .7, .2, 1);

    will-change: transform;
}


/* Vorhandene Grid-Regeln der Half-Figures neutralisieren */

.editorial-gallery__slider .editorial-gallery__item,
.editorial-gallery__slider .editorial-gallery__item--half {
    grid-column: auto;

    flex: 0 0 calc(
        (100% - var(--slider-gap)) / 2
    );

    width: auto;
    min-width: 0;
    margin: 0;
}


/* Einheitliche Bildhöhe */

.editorial-gallery__slider .editorial-gallery__item img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 4 / 3;

    object-fit: cover;
    object-position: center;
}


/* =========================================
   STEUERUNG
========================================= */

.editorial-gallery__controls {
    display: grid;
    grid-template-columns: auto minmax(8rem, 1fr) auto;
    align-items: center;

    gap: clamp(1rem, 2vw, 1.75rem);

    margin-top: clamp(2rem, 4vw, 3rem);
}


/* Pfeile */

.editorial-gallery__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.75rem;
    height: 2.75rem;

    padding: 0;

    color: var(--anthracite);
    background: transparent;

    border: 1px solid rgba(38, 38, 38, .28);
    border-radius: 50%;

    cursor: pointer;

    font: inherit;
    font-size: 1.1rem;
    line-height: 1;

    transition:
        color 220ms ease,
        background-color 220ms ease,
        border-color 220ms ease,
        transform 220ms ease;
}

.editorial-gallery__arrow:hover {
    color: var(--paper);
    background: var(--moss);
    border-color: var(--moss);
}

.editorial-gallery__arrow:active {
    transform: scale(.94);
}

.editorial-gallery__arrow:focus-visible {
    outline: 2px solid var(--moss);
    outline-offset: .25rem;
}


/* Horizontale Fortschrittsleiste */

.editorial-gallery__progress {
    position: relative;

    width: 100%;
    height: 2px;

    overflow: hidden;

    background: rgba(38, 38, 38, .18);
}

.editorial-gallery__progress-bar {
    position: absolute;
    inset: 0 auto 0 0;

    width: 20%;

    background: var(--moss);

    transform-origin: left center;

    transition:
        width 650ms cubic-bezier(.2, .7, .2, 1),
        transform 650ms cubic-bezier(.2, .7, .2, 1);
}


/* =========================================
   TABLET UND SMARTPHONE
========================================= */

@media (max-width: 52rem) {

    .editorial-gallery__slider .editorial-gallery__item,
    .editorial-gallery__slider .editorial-gallery__item--half {
        flex-basis: 100%;
    }

    .editorial-gallery__slider .editorial-gallery__item img {
        aspect-ratio: 16 / 10;
    }

}


@media (max-width: 36rem) {

    .editorial-gallery__controls {
        grid-template-columns: auto minmax(4rem, 1fr) auto;
    }

    .editorial-gallery__arrow {
        width: 2.5rem;
        height: 2.5rem;
    }

}


/* Bewegung reduzieren */

@media (prefers-reduced-motion: reduce) {

    .editorial-gallery__track,
    .editorial-gallery__progress-bar {
        transition: none;
    }

}

/* =========================================================
   KONTAKTSEITE
   Diesen Block ans Ende der main.css setzen.

   Wichtig:
   Einen älteren .contact-* Block vorher vollständig entfernen,
   damit keine doppelten Regeln gegeneinander arbeiten.
========================================================= */

.contact-hero {
    position: relative;
    min-height: calc(78svh - 100px);
    margin-top: 100px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    color: var(--paper);
    background: var(--anthracite);
}

.contact-hero__background,
.contact-hero__overlay {
    position: absolute;
    inset: 0;
}

.contact-hero__background img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

.contact-hero__overlay {
    background: linear-gradient(
        90deg,
        rgba(38, 38, 38, .84) 0%,
        rgba(38, 38, 38, .52) 48%,
        rgba(38, 38, 38, .12) 100%
    );
}

.contact-hero__content {
    position: relative;
    z-index: 2;
    min-height: inherit;
    align-items: end;
    padding-top: clamp(6rem, 12vh, 10rem);
    padding-bottom: clamp(4rem, 8vh, 7rem);
}

.contact-hero__text {
    grid-column: 1 / span 5;
    color: var(--paper);
}

.contact-hero__text .eyebrow,
.contact-hero h1 {
    color: var(--paper);
}

.contact-hero h1 {
    max-width: 12ch;
    margin-bottom: 1.75rem;
    font-size: clamp(3.5rem, 7.5vw, 8.5rem);
    line-height: .94;
}

.contact-hero__intro {
    max-width: 38rem;
    margin-bottom: 0;
    color: rgba(244, 243, 237, .86);
    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
    line-height: 1.55;
}

/* INTRO */

.contact-intro {
    background: var(--paper);
}

.contact-intro__grid {
    align-items: start;
    row-gap: 3rem;
}

.contact-intro__heading {
    grid-column: 1 / span 3;
}

.contact-intro__heading h2 {
    max-width: 10ch;
    margin-bottom: 0;
}

.contact-intro__text {
    grid-column: 4 / -1;
    max-width: 42rem;
    padding-top: clamp(1rem, 4vw, 4rem);
}

.contact-intro__text p {
    margin-bottom: 0;
}

.contact-intro__text p + p {
    margin-top: 1.75rem;
}

.contact-intro__lead {
    font-size: clamp(1.25rem, 1.1rem + .55vw, 1.75rem);
    line-height: 1.45;
}

/* FORMULARBEREICH */

.contact-main {
    padding-top: 2rem;
    background: var(--paper);
}

.contact-main__grid {
    align-items: start;
    row-gap: clamp(3rem, 6vw, 6rem);
}

.contact-form-wrap {
    grid-column: 1 / span 4;
    min-width: 0;
    padding: clamp(2rem, 5vw, 4.5rem);
    background: var(--white);
    border-radius: 0 0 0 3rem;
}

.contact-form-wrap__header {
    max-width: 44rem;
    margin-bottom: clamp(3rem, 6vw, 5rem);
}

.contact-form-wrap__header h2 {
    max-width: 12ch;
    margin-bottom: 0;
}

.contact-form {
    position: relative;
}

.contact-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.contact-form__row + .contact-form__row {
    margin-top: 1.875rem;
}

.contact-form__field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.contact-form__field + .contact-form__field {
    margin-top: 1.875rem;
}

.contact-form__row .contact-form__field + .contact-form__field {
    margin-top: 0;
}

.contact-form__field label,
.contact-form__field legend {
    margin-bottom: .7rem;
    color: var(--anthracite);
    font-size: .91rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.contact-form__optional {
    margin-left: .4rem;
    color: rgba(38, 38, 38, .55);
    font-size: .78rem;
    font-weight: 400;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    min-height: 3.5rem;
    padding: .9rem 0;
    border: 0;
    border-bottom: 1px solid rgba(38, 38, 38, .35);
    border-radius: 0;
    outline: none;
    color: var(--anthracite);
    background: transparent;
    font: inherit;
    transition: border-color 180ms ease, outline-color 180ms ease;
}

.contact-form textarea {
    min-height: 11rem;
    padding-top: 1rem;
    resize: vertical;
    line-height: 1.55;
}

.contact-form select {
    cursor: pointer;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(38, 38, 38, .45);
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    border-color: var(--moss);
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.contact-form select:focus-visible {
    outline: 2px solid rgba(74, 90, 70, .24);
    outline-offset: .3rem;
}

/* PROJEKTAUSWAHL */

.contact-form__project {
    margin: 2.8rem 0;
    padding: 0;
    border: 0;
}

.contact-form__project legend {
    padding: 0;
}

.contact-form__choices {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: .45rem;
}

.contact-choice {
    position: relative;
    display: inline-flex;
    margin: 0;
    cursor: pointer;
}

.contact-choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

.contact-choice span {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: .65rem 1.05rem;

    border: 1px solid rgba(38, 38, 38, .25);
    border-radius: 0 0 0 1.75em;

    color: var(--anthracite);
    font-size: .91rem;
    font-weight: 400;

    transition:
        color 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease;
}

.contact-choice:hover span {
    border-color: var(--moss);
}

.contact-choice input:checked + span {
    color: var(--paper);
    background: var(--moss);
    border-color: var(--moss);
}

.contact-choice input:focus-visible + span {
    outline: 2px solid var(--moss);
    outline-offset: .2rem;
}

/* DATENSCHUTZ */

.contact-form__privacy {
    margin-top: 2.25rem;
}

.contact-checkbox {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    align-items: start;
    gap: .75rem;
    cursor: pointer;
}

.contact-checkbox input {
    width: 1.125rem;
    height: 1.125rem;
    min-height: 0;
    margin-top: .2rem;
    padding: 0;
    accent-color: var(--moss);
}

.contact-checkbox > span {
    color: rgba(38, 38, 38, .72);
    font-size: .86rem;
    line-height: 1.55;
}

.contact-checkbox a {
    color: var(--anthracite);
    text-decoration: underline;
    text-underline-offset: .2rem;
}

.contact-checkbox a:hover {
    color: var(--moss);
}

/* FORMULARABSCHLUSS */

.contact-form__footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 2.6rem;
}

.contact-form__required {
    margin: 0;
    color: rgba(38, 38, 38, .55);
    font-size: .81rem;
}

.contact-form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* SIDEBAR */

.contact-sidebar {
    grid-column: 5 / -1;
    position: sticky;
    top: 8.125rem;
    min-width: 0;
    color: var(--paper);
    background: var(--moss);
    border-radius: 0 0 0 2.65rem;
}

.contact-sidebar__inner {
    padding: clamp(2rem, 4vw, 3.75rem);
}

.contact-sidebar .eyebrow,
.contact-sidebar h2,
.contact-sidebar p,
.contact-sidebar a {
    color: var(--paper);
}

.contact-sidebar h2 {
    max-width: 9ch;
    margin-bottom: 2.2rem;
    font-size: clamp(2.3rem, 3.6vw, 4rem);
    line-height: 1;
}

.contact-sidebar__mail {
    display: inline-block;
    max-width: 100%;
    padding-bottom: .3rem;
    border-bottom: 1px solid rgba(244, 243, 237, .55);
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    overflow-wrap: anywhere;
    transition: border-color 180ms ease;
}

.contact-sidebar__mail:hover {
    border-color: transparent;
}

.contact-sidebar__details {
    margin-top: clamp(3rem, 6vw, 2.5rem);
}

.contact-sidebar__item {
    padding: 1.35rem 0;
    border-top: 1px solid rgba(244, 243, 237, .22);
}

.contact-sidebar__item:last-child {
    border-bottom: 1px solid rgba(244, 243, 237, .22);
}

.contact-sidebar__label {
    display: block;
    margin-bottom: .55rem;
    color: rgba(244, 243, 237, .62);
    font-size: .72rem;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.contact-sidebar__item p {
    margin: 0;
    line-height: 1.5;
}

.contact-sidebar__note {
    margin-top: 2.5rem;
    padding-left: 1.25rem;
    border-left: 1px solid rgba(244, 243, 237, .45);
}

.contact-sidebar__note p {
    margin: 0;
    color: rgba(244, 243, 237, .82);
    font-size: .92rem;
    line-height: 1.55;
}

/* HILFREICHE ANGABEN */


.contact-help__layout {
    row-gap: clamp(3.5rem, 7vw, 6.5rem);
}

.contact-help__header {
    grid-column: 1 / -1;
    max-width: 54rem;
}

.contact-help__header h2 {
    max-width: 14ch;
    margin-bottom: 0;
}

.contact-help__grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(38, 38, 38, .25);
}

.contact-help__item {
    min-height: 17.5rem;
    padding: 1.75rem clamp(1rem, 2vw, 2.2rem) 1.9rem 0;
    border-right: 1px solid rgba(38, 38, 38, .25);
}

.contact-help__item:not(:first-child) {
    padding-left: clamp(1rem, 2vw, 2.2rem);
}

.contact-help__item:last-child {
    border-right: 0;
}

.contact-help__number {
    display: block;
    margin-bottom: clamp(3rem, 6vw, 2rem);
    color: rgba(38, 38, 38, .55);
    font-size: .76rem;
    letter-spacing: .1em;
}

.contact-help__item h3 {
    margin-bottom: 1rem;
    color: var(--anthracite);
    font-size: clamp(1.45rem, 2vw, 2rem);
}

.contact-help__item p {
    max-width: 17rem;
    margin: 0;
    color: rgba(38, 38, 38, .76);
    line-height: 1.55;
}

/* ABSCHLUSS */

.contact-closing {
    padding-block: clamp(5.5rem, 11vw, 10.5rem);
    color: var(--paper);
    background: var(--anthracite);
}

.contact-closing__grid {
    align-items: end;
    row-gap: 3rem;
}

.contact-closing__text {
    grid-column: 1 / span 4;
}

.contact-closing__text .eyebrow,
.contact-closing__text h2 {
    color: var(--paper);
}

.contact-closing__text h2 {
    max-width: 13ch;
    margin-bottom: 0;
    font-size: clamp(3rem, 6.2vw, 7rem);
    line-height: .98;
}

.contact-closing__copy {
    grid-column: 5 / -1;
}

.contact-closing__copy p {
    margin-bottom: 2rem;
    color: rgba(244, 243, 237, .77);
    line-height: 1.6;
}

/* KLEINERE DESKTOPS */

@media (max-width: 70rem) {
    .contact-form-wrap {
        grid-column: 1 / span 4;
        padding: clamp(2rem, 4vw, 3.5rem);
    }

    .contact-sidebar {
        grid-column: 5 / -1;
    }

    .contact-help__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-help__item:nth-child(2) {
        border-right: 0;
    }

    .contact-help__item:nth-child(n + 3) {
        border-top: 1px solid rgba(38, 38, 38, .25);
    }
}

/* TABLET */

@media (max-width: 900px) {
    .contact-hero {
        min-height: calc(44rem - 88px);
        margin-top: 88px;
    }

    .contact-hero__overlay {
        background: linear-gradient(
            to top,
            rgba(38, 38, 38, .86) 0%,
            rgba(38, 38, 38, .38) 72%,
            rgba(38, 38, 38, .14) 100%
        );
    }

    .contact-hero__text {
        grid-column: 1 / -1;
    }

    .contact-intro__heading {
        grid-column: 1 / span 3;
    }

    .contact-intro__text {
        grid-column: 4 / -1;
    }

    .contact-form-wrap,
    .contact-sidebar {
        grid-column: 1 / -1;
    }

    .contact-sidebar {
        position: relative;
        top: auto;
    }

    .contact-sidebar__details {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 3.5rem;
        border-top: 1px solid rgba(244, 243, 237, .22);
        border-bottom: 1px solid rgba(244, 243, 237, .22);
    }

    .contact-sidebar__item {
        padding: 1.5rem;
        border-top: 0;
        border-right: 1px solid rgba(244, 243, 237, .22);
    }

    .contact-sidebar__item:first-child {
        padding-left: 0;
    }

    .contact-sidebar__item:last-child {
        padding-right: 0;
        border-right: 0;
        border-bottom: 0;
    }
}

/* MOBILE */

@media (max-width: 52rem) {
    .contact-hero {
        min-height: calc(42rem - 88px);
    }

    .contact-intro__heading,
    .contact-intro__text,
    .contact-form-wrap,
    .contact-sidebar,
    .contact-help__header,
    .contact-help__grid,
    .contact-closing__text,
    .contact-closing__copy {
        grid-column: 1 / -1;
    }

    .contact-intro__text {
        max-width: none;
        padding-top: 0;
    }

    .contact-form-wrap,
    .contact-sidebar {
        border-radius: 0 0 0 2rem;
    }

    .contact-sidebar__details {
        display: block;
        border-bottom: 0;
    }

    .contact-sidebar__item,
    .contact-sidebar__item:first-child,
    .contact-sidebar__item:last-child {
        padding: 1.3rem 0;
        border-top: 1px solid rgba(244, 243, 237, .22);
        border-right: 0;
    }

    .contact-sidebar__item:last-child {
        border-bottom: 1px solid rgba(244, 243, 237, .22);
    }

    .contact-closing__copy {
        max-width: 34rem;
    }
}

/* KLEINE MOBILE GERÄTE */

@media (max-width: 36rem) {
    .contact-hero {
        min-height: calc(39rem - 78px);
        margin-top: 78px;
    }

    .contact-hero__content {
        padding-top: 4rem;
        padding-bottom: 3.5rem;
    }

    .contact-hero h1 br,
    .contact-closing h2 br {
        display: none;
    }

    .contact-form-wrap {
        padding: 2rem 1.35rem 2.4rem;
    }

    .contact-form__row {
        grid-template-columns: 1fr;
        gap: 1.875rem;
    }

    .contact-form__row .contact-form__field + .contact-form__field {
        margin-top: 0;
    }

    .contact-form__choices {
        display: grid;
        grid-template-columns: 1fr;
    }

    .contact-choice span {
        justify-content: center;
        width: 100%;
    }

    .contact-form__footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .contact-form__footer .button {
        width: 100%;
    }

    .contact-help__grid {
        grid-template-columns: 1fr;
    }

    .contact-help__item,
    .contact-help__item:not(:first-child) {
        min-height: 0;
        padding: 1.75rem 0 2.5rem;
        border-right: 0;
        border-bottom: 1px solid rgba(38, 38, 38, .25);
    }

    .contact-help__item:nth-child(n + 3) {
        border-top: 0;
    }

    .contact-help__number {
        margin-bottom: 2.5rem;
    }

    .contact-help__item p {
        max-width: 27rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact-choice span,
    .contact-form input,
    .contact-form textarea,
    .contact-form select,
    .contact-sidebar__mail {
        transition: none;
    }
}
.contact-help {
    padding-top: 1rem;
}
/* =========================================================
   KONTAKTFORMULAR – STATUS UND BESTÄTIGUNG
========================================================= */


/* Formular und Erfolgsmeldung nutzen denselben Platz */

.contact-form-panel,
.contact-success {
    width: 100%;
}


/* Sanftes Ausblenden des Formulars */

.contact-form-panel {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 280ms ease,
        transform 280ms ease;
}

.contact-form-panel.is-leaving {
    opacity: 0;
    transform: translateY(-1rem);

    pointer-events: none;
}


/* Erfolgsmeldung */

.contact-success {
    min-height: 42rem;

    display: flex;
    align-items: center;

    opacity: 0;
    transform: translateY(1.25rem);
}

.contact-success[hidden] {
    display: none;
}

.contact-success.is-visible {
    opacity: 1;
    transform: translateY(0);

    animation: contact-success-in 450ms ease forwards;
}

.contact-success__inner {
    width: 100%;
    max-width: 42rem;

    padding-block: clamp(2rem, 5vw, 5rem);
}

.contact-success .eyebrow {
    margin-bottom: 1.2rem;
}

.contact-success h2 {
    max-width: 11ch;
    margin-bottom: 2rem;

    color: var(--anthracite);

    font-size: clamp(3rem, 5.2vw, 6rem);
    line-height: .98;
}

.contact-success__lead {
    max-width: 38rem;
    margin: 0;

    color: var(--anthracite);

    font-size: clamp(1.15rem, 1.05rem + .4vw, 1.5rem);
    line-height: 1.55;
}

.contact-success__divider {
    width: 100%;
    height: 1px;

    margin-block: clamp(2.5rem, 5vw, 4.5rem);

    background: rgba(38, 38, 38, .2);
}

.contact-success__next {
    max-width: 35rem;
}

.contact-success__label {
    margin-bottom: .8rem;

    color: var(--moss);

    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.contact-success__next p:last-child {
    margin-bottom: 0;

    color: rgba(38, 38, 38, .75);

    line-height: 1.6;
}

.contact-success__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 1.6rem;

    margin-top: clamp(2.75rem, 5vw, 4.5rem);
}

.contact-success__link {
    color: var(--anthracite);

    border-bottom: 1px solid rgba(38, 38, 38, .45);

    font-size: .94rem;

    transition:
        color 180ms ease,
        border-color 180ms ease;
}

.contact-success__link:hover {
    color: var(--moss);
    border-color: var(--moss);
}


/* Fehlermeldung */

.contact-form__message {
    margin-top: 2rem;
    padding: 1rem 1.15rem;

    font-size: .9rem;
    line-height: 1.55;
}

.contact-form__message[hidden] {
    display: none;
}

.contact-form__message--error {
    color: var(--anthracite);
    background: rgba(166, 170, 161, .3);

    border-left: 3px solid var(--moss);
}

.contact-form__message a {
    color: inherit;

    text-decoration: underline;
    text-underline-offset: .2rem;
}


/* Button während des Versands */

#contact-submit:disabled {
    cursor: wait;
    opacity: .7;
}

.contact-submit__loading[hidden],
.contact-submit__default[hidden] {
    display: none;
}


/* Einblendanimation */

@keyframes contact-success-in {

    from {
        opacity: 0;
        transform: translateY(1.25rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* Mobile */

@media (max-width: 36rem) {

    .contact-success {
        min-height: 36rem;
    }

    .contact-success h2 br {
        display: none;
    }

    .contact-success__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .contact-success__actions .button {
        width: 100%;
    }

    .contact-success__link {
        align-self: flex-start;
    }

}


/* Reduzierte Bewegung */

@media (prefers-reduced-motion: reduce) {

    .contact-form-panel,
    .contact-success,
    .contact-success__link {
        transition: none;
    }

    .contact-success.is-visible {
        animation: none;

        opacity: 1;
        transform: none;
    }

}
/* =========================================================
   IMPRESSUM
   Diesen Block ans Ende der main.css setzen.
========================================================= */

.legal-hero {
    margin-top: 100px;
    padding-block: clamp(6rem, 11vw, 11rem) clamp(4.5rem, 8vw, 8rem);
    background: var(--paper);
}

.legal-hero__grid {
    align-items: end;
}

.legal-hero__content {
    grid-column: 2 / span 4;
}

.legal-hero__content h1 {
    max-width: none;
    margin-bottom: 1.5rem;
}

.legal-hero__intro {
    max-width: 42rem;
    margin-bottom: 0;
    font-size: clamp(1.1rem, 1rem + .35vw, 1.35rem);
    line-height: 1.6;
}

.legal-main {
    padding-top: 0;
    overflow: visible;
}

.legal-main__grid {
    align-items: start;
}

.legal-nav {
    grid-column: 1 / span 2;
    position: sticky;
    top: 140px;
    align-self: start;
    padding-right: clamp(1rem, 3vw, 3rem);
}

.legal-nav__inner {
    padding-top: .35rem;
}

.legal-nav nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .7rem;
}

.legal-nav nav a {
    position: relative;
    width: fit-content;
    color: rgba(38, 38, 38, .72);
    line-height: 1.35;
    transition: color 220ms ease;
}

.legal-nav nav a::after {
    position: absolute;
    right: 0;
    bottom: -.2rem;
    left: 0;
    height: 1px;
    background: var(--moss);
    content: "";
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 280ms ease;
}

.legal-nav nav a:hover {
    color: var(--moss);
}

.legal-nav nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.legal-list {
    grid-column: 3 / -1;
    border-top: 1px solid var(--line-dark);
}

.legal-item {
    display: grid;
    grid-template-columns: minmax(3rem, .55fr) minmax(0, 4.45fr);
    column-gap: clamp(1.5rem, 3vw, 3rem);
    padding-block: clamp(3rem, 6vw, 6rem);
    border-bottom: 1px solid var(--line-dark);
    scroll-margin-top: 130px;
}

.legal-item__number {
    margin: .35rem 0 0;
    color: var(--moss);
    font-size: .82rem;
    line-height: 1;
    letter-spacing: .14em;
}

.legal-item__content {
    min-width: 0;
}

.legal-item__content h2 {
    max-width: 18ch;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
    font-size: clamp(2.6rem, 4.5vw, 5rem);
    line-height: 1.02;
}

.legal-item__content > p {
    max-width: 46rem;
}

.legal-item__content > p:last-child {
    margin-bottom: 0;
}

.legal-address {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin: 0;
    font-style: normal;
    line-height: 1.65;
}

.legal-address strong {
    margin-bottom: .35rem;
    font-weight: 600;
}

.legal-details {
    max-width: 46rem;
    margin: 0;
}

.legal-details__row {
    display: grid;
    grid-template-columns: minmax(7rem, .8fr) minmax(0, 2.2fr);
    gap: 1rem;
    padding-block: 1.15rem;
    border-top: 1px solid rgba(38, 38, 38, .16);
}

.legal-details__row:last-child {
    border-bottom: 1px solid rgba(38, 38, 38, .16);
}

.legal-details dt {
    color: rgba(38, 38, 38, .62);
}

.legal-details dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.legal-details a {
    border-bottom: 1px solid rgba(38, 38, 38, .38);
    transition: color 220ms ease, border-color 220ms ease;
}

.legal-details a:hover {
    color: var(--moss);
    border-color: var(--moss);
}

.legal-closing {
    padding-block: clamp(6rem, 11vw, 11rem);
}

.legal-closing__grid {
    align-items: end;
    row-gap: 3rem;
}

.legal-closing__text {
    grid-column: 1 / span 4;
}

.legal-closing__text .eyebrow,
.legal-closing__text h2 {
    color: var(--paper);
}

.legal-closing__text h2 {
    max-width: 12ch;
    margin-bottom: 0;
}

.legal-closing__action {
    grid-column: 5 / -1;
}

.legal-closing__action p {
    max-width: 32rem;
    margin-bottom: 2rem;
    color: rgba(244, 243, 237, .76);
}

@media (max-width: 900px) {
    .legal-hero {
        margin-top: 88px;
    }

    .legal-hero__content {
        grid-column: 1 / -1;
    }

    .legal-nav {
        top: 115px;
    }
}

@media (max-width: 52rem) {
    .legal-hero__content,
    .legal-nav,
    .legal-list,
    .legal-closing__text,
    .legal-closing__action {
        grid-column: 1 / -1;
    }

    .legal-hero {
        padding-block: clamp(5rem, 14vw, 8rem) clamp(4rem, 11vw, 6rem);
    }

    .legal-main__grid {
        row-gap: 3.5rem;
    }

    .legal-nav {
        position: static;
        padding-right: 0;
    }

    .legal-nav nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .8rem 1.5rem;
    }

    .legal-item {
        grid-template-columns: minmax(2.5rem, auto) minmax(0, 1fr);
        column-gap: 1.25rem;
    }

    .legal-closing__grid {
        row-gap: 2.5rem;
    }
}

@media (max-width: 36rem) {
    .legal-hero {
        margin-top: 78px;
    }

    .legal-nav nav {
        grid-template-columns: 1fr;
    }

    .legal-item {
        grid-template-columns: 1fr;
        row-gap: 1.25rem;
        padding-block: 3rem;
    }

    .legal-item__number {
        margin-top: 0;
    }

    .legal-item__content h2 {
        max-width: none;
        font-size: clamp(2.4rem, 12vw, 3.7rem);
    }

    .legal-details__row {
        grid-template-columns: 1fr;
        gap: .3rem;
    }
}
/* =========================================
   404-SEITE
========================================= */

.error404 {
    min-height: calc(100svh - 100px);
    margin-top: 100px;

    display: flex;
    align-items: center;

    overflow: hidden;
}

.error404__grid {
    position: relative;

    min-height: clamp(34rem, 72vh, 52rem);

    align-items: center;
}

.error404__content {
    grid-column: 2 / span 4;

    position: relative;
    z-index: 2;

    max-width: 54rem;
}

.error404__content h1 {
    max-width: 11ch;
    margin-bottom: 2rem;

    font-size: clamp(2.8rem, 5vw, 5.8rem);
    line-height: 1.1;
}

.error404__lead {
    max-width: 39rem;

    margin-bottom: 1.25rem;

    font-size: clamp(
        1.15rem,
        1.05rem + .35vw,
        1.4rem
    );

    line-height: 1.55;
}

.error404__copy {
    max-width: 34rem;

    margin-bottom: 0;

    color: rgba(38, 38, 38, .7);
}

.error404__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 1rem 1.5rem;

    margin-top: clamp(2.5rem, 5vw, 4rem);
}

.error404__number {
    grid-column: 4 / -1;

    position: absolute;
    z-index: 1;

    right: 0;

    color: rgba(74, 90, 70, .08);

    font-family: var(--font-display);
    font-size: clamp(14rem, 32vw, 38rem);
    line-height: .75;
    letter-spacing: -.06em;

    pointer-events: none;
    user-select: none;
}


/* Tablet */

@media (max-width: 900px) {

    .error404 {
        min-height: calc(100svh - 88px);
        margin-top: 88px;
    }

    .error404__content {
        grid-column: 1 / -1;
    }

    .error404__number {
        grid-column: 1 / -1;

        right: -4rem;
    }

}


/* Smartphone */
@media (max-width: 52rem) {

    .error404__content {
        grid-column: 1 / -1;
    }

}

@media (max-width: 480px) {

    .error404 {
        min-height: calc(100svh - 78px);
        margin-top: 78px;
    }

    .error404__grid {
        min-height: 34rem;
    }

    .error404__content h1 {
        max-width: 10ch;

        font-size: clamp(3rem, 14vw, 4.6rem);
    }

    .error404__actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .error404__number {
        right: -2rem;
        bottom: 3rem;

        font-size: clamp(12rem, 56vw, 20rem);
    }

}
/* =========================================
   SERVICE CARDS – EINHEITLICHE TRENNLINIEN
========================================= */

/* Linienfarbe je nach Hintergrund */
.section--paper {
    --service-line: var(--moss);
}

.section--moss,
.section--anthracite {
    --service-line: rgba(244, 243, 237, 0.28);
}


/* Grundsystem Desktop: 3 Spalten */

.services-grid {
    border-top: 1px solid var(--service-line);
}

.services-grid .service-card {
    border: 0;
}

/* Nur zwischen den Karten eine vertikale Linie */
.services-grid .service-card + .service-card {
    border-left: 1px solid var(--service-line);
}


/* Sonderklasse nicht mehr anders behandeln */
.services-grid--beton {
    border-top-color: var(--service-line);
}

.services-grid--beton .service-card,
.services-grid--beton .service-card:first-child {
    border-right: 0;
    border-left: 0;
}

.services-grid--beton .service-card + .service-card {
    border-left: 1px solid var(--service-line);
}


/* =========================================
   TABLET / KLEINER DESKTOP – 2 SPALTEN
========================================= */

@media (max-width: 70rem) and (min-width: 52.01rem) {

    .services-grid .service-card {
        border-left: 0;
        border-right: 0;
    }

    /* rechte Karte jeder Zeile */
    .services-grid .service-card:nth-child(even) {
        border-left: 1px solid var(--service-line);
    }

    /* ab zweiter Zeile */
    .services-grid .service-card:nth-child(n + 3) {
        border-top: 1px solid var(--service-line);
    }

}


/* =========================================
   MOBIL – NUR HORIZONTALE TRENNLINIEN
========================================= */

@media (max-width: 52rem) {

    .services-grid {
        border-top: 1px solid var(--service-line);
    }

    .services-grid .service-card,
    .services-grid .service-card:first-child,
    .services-grid .service-card + .service-card,
    .services-grid--beton .service-card,
    .services-grid--beton .service-card:first-child {
        border: 0;
        border-bottom: 1px solid var(--service-line);
    }

}
@media (max-width: 52rem) {

    .service-intro .about-teaser__grid {
        display: flex;
        flex-direction: column;
    }

    .service-intro .about-teaser__content {
        order: 1;
    }

    .service-intro .about-teaser__image {
        order: 2;
    }
}
@media (max-width: 52rem) {

    /* Bei mehreren Service-Grids untereinander:
       mobil keine zusätzliche obere Linie */
    .services-grid.services-grid--continuation {
        border-top: none !important;
    }

}
/* =========================================
   MIKROANIMATIONEN
========================================= */

/* 1. Header wird beim Scrollen kompakter */

.header,
.header .logo img,
.header-container {
  transition:
    height 420ms cubic-bezier(.2, .7, .2, 1),
    box-shadow 420ms cubic-bezier(.2, .7, .2, 1),
    background-color 420ms cubic-bezier(.2, .7, .2, 1),
    transform 420ms cubic-bezier(.2, .7, .2, 1);
}

.header.header--compact {
  height: 82px;
  background: rgba(244, 243, 237, .96);
  box-shadow: 0 10px 30px rgba(38, 38, 38, .08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.header.header--compact .logo img {
  height: 64px;
}


/* 2. Ruhiger, einheitlicher Button-Hover */

.button,
.hero-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  transition:
    transform 360ms cubic-bezier(.2, .7, .2, 1),
    background-color 360ms cubic-bezier(.2, .7, .2, 1),
    color 360ms cubic-bezier(.2, .7, .2, 1),
    border-color 360ms cubic-bezier(.2, .7, .2, 1),
    box-shadow 360ms cubic-bezier(.2, .7, .2, 1);
}

.button::before,
.hero-button::before {
  position: absolute;
  z-index: -1;
  inset: 0;

  background: currentColor;

  content: "";

  opacity: .07;
  transform: translateY(105%);

  transition: transform 420ms cubic-bezier(.2, .7, .2, 1);
}

.button:hover,
.hero-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(38, 38, 38, .12);
}

.button:hover::before,
.hero-button:hover::before {
  transform: translateY(0);
}

.button:active,
.hero-button:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(38, 38, 38, .1);
}


/* 3. Sanfte Parallax-Bewegung bei Projektbildern */

.project__image,
.image-frame {
  --parallax-x: 0px;
  --parallax-y: 0px;

  transform: translateZ(0);
}

.project__image img,
.image-frame img {
  transform:
    translate3d(var(--parallax-x), var(--parallax-y), 0)
    scale(1.035);

  transition:
    transform 650ms cubic-bezier(.2, .7, .2, 1),
    filter 700ms ease;
  will-change: transform;
}

.project__image:hover img,
.image-frame:hover img {
  transform:
    translate3d(var(--parallax-x), var(--parallax-y), 0)
    scale(1.07);
}


/* 4. Accordion-Pfeil nur auf Tablet und Mobil */

@media (max-width: 52rem) {

  .footer-accordion summary::before {
    display: none;
  }

  .footer-accordion summary::after {
    right: .35rem;

    width: .7rem;
    height: .7rem;

    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    background: transparent;

    transform: translateY(-25%) rotate(45deg);
    transform-origin: center;

    transition: transform 360ms cubic-bezier(.2, .7, .2, 1);
  }

  .footer-accordion[open] summary::after {
    transform: translateY(25%) rotate(225deg);
  }

}


/* Tablet: kompakter Header */

@media (max-width: 900px) {

  .header.header--compact {
    height: 74px;
  }

  .header.header--compact .logo img {
    height: 54px;
  }

  .header.header--compact + main .hero-carousel {
    /* Verhindert keinen Layout-Sprung, da der Header fixed positioniert ist. */
  }

}


/* Smartphone: kompakter Header */

@media (max-width: 480px) {

  .header.header--compact {
    height: 68px;
  }

  .header.header--compact .logo img {
    height: 48px;
  }

}


/* Auf Touch-Geräten keine künstliche Bildbewegung */

@media (hover: none), (pointer: coarse) {

  .project__image img,
  .image-frame img,
  .project__image:hover img,
  .image-frame:hover img {
    transform: scale(1.035);
  }

}

/* Bewegungsreduktion respektieren */
@media (prefers-reduced-motion: reduce) {
  .header,
  .header .logo img,
  .button,
  .hero-button,
  .button::before,
  .hero-button::before,
  .project__image img,
  .image-frame img,
  .footer-accordion summary::after {
    transition: none !important;
  }
  .button:hover,
  .hero-button:hover {
    transform: none;
  }
  .project__image img,
  .image-frame img,
  .project__image:hover img,
  .image-frame:hover img {
    transform: none;
  }
}
/* =========================================
   HOVER NUR AUF DESKTOP
========================================= */
@media (hover: hover) and (pointer: fine) {
    .hero-carousel:hover .slide.active img,
    .image-statement:hover .image-statement__image,
    .project-card__link:hover .project-card__image img,
    .workbench-card__link:hover .workbench-card__image img,
    .image-frame:hover img,
    .project__image:hover img {
        filter: grayscale(0);
    }
}
/* =========================================
   TOUCHGERÄTE
========================================= */

@media (hover: none), (pointer: coarse) {
    .slide img,
    .image-statement__image,
    .project-card__image img,
    .workbench-card__image img,
    .image-frame img,
    .project__image img,
    .page-hero__image {
        filter: grayscale(0) !important;
    }
}
@media (max-width: 36rem) {

    .about-teaser__content h2 {
        max-width: 100%;
        font-size: clamp(2.2rem, 10vw, 3rem);
    }

}

/* =========================================
   Scrolling Schritte Startseite
========================================= */

@media (max-width: 36rem) {

    .process-story {
        height: auto;
        margin: 0;
        padding: 0;
    }

    .process-story__stage {
        position: relative;
        top: auto;

        height: auto;

        overflow: visible;

        transform: none !important;
    }

    .process-story__grid {
        height: auto;

        display: grid;
        grid-template-rows: auto auto;

        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .process-story__steps {
        height: auto;
        overflow: visible;
    }

    .process-story__step {
        position: relative;

        top: auto;
        right: auto;
        left: auto;

        width: 100%;
        height: auto;

        transform: none !important;
        clip-path: none !important;

        border-bottom: 1px solid var(--beton);
    }

    .process-story__heading {
        min-height: auto;

        padding-block: 1.5rem;
    }

    .process-story__content {
        height: auto;

        padding-top: 1.5rem;
        padding-bottom: 2.5rem;
    }

    .process-story__content p {
        grid-column: 2;
    }
}


/* =========================================
   HERO SCROLL-INDICATOR – MOBILE AUSBLENDEN
========================================= */

@media (max-width: 36rem) {

    .hero-scroll-indicator {
        display: none;
    }

}