/* ========================================
   STARTSEITE – HOLZBAU GROBEL
======================================== */


/* ========================================
   HERO – DESKTOP
======================================== */

/* ---------- Hero Hintergrund ---------- */

.home-hero {
    position: relative;
    isolation: isolate;

    color: var(--color-white);
    background-color: var(--color-ink);

background-image:
    linear-gradient(90deg,
        rgba(25, 25, 25, 0.90) 0%,
        rgba(25, 25, 25, 0.70) 28%,
        rgba(25, 25, 25, 0.20) 65%,
        rgba(25, 25, 25, 0.10) 100%),
    linear-gradient(0deg,
        rgba(25, 25, 25, 0.30) 0%,
        transparent 65%),
    url("./../img/ueber-mich/holzbau-grobel-handwerksarbeit-hero-1920.webp");

    /* ---------- Hintergrundgröße Desktop ---------- */

    background-size: 50%;


    /* ---------- Hintergrundposition Desktop ---------- */

    background-position: right 0% bottom 80%;
    background-repeat: no-repeat;
}


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

.home-hero-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    min-height: 690px;
    min-height: max(690px, calc(100svh - 78px));

    padding-top: clamp(7rem, 15vh, 10rem);
    padding-bottom: 3.5rem;
}


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

.home-hero-content {
    width: 100%;
}


/* ---------- Einleitung ---------- */

.home-hero-eyebrow {
    display: flex;
    align-items: center;

    gap: 0.75rem;

    margin-bottom: 2rem;

    color: var(--color-copper);

    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.5;

    letter-spacing: 0.25em;
    text-transform: uppercase;
}

/* ---------- Linie vor Einleitung ---------- */

.home-hero-eyebrow::before {
    content: "";

    display: block;
    flex-shrink: 0;

    width: 28px;
    height: 1px;

    background-color: var(--color-copper);
}


/* ========================================
   HERO HAUPTÜBERSCHRIFT
======================================== */

.home-hero-title {
    max-width: 1150px;

    color: var(--color-white);

    font-family: "Montserrat", Arial, sans-serif;
    font-size: clamp(3.2rem, 5.5vw, 4.6rem);
    font-weight: 800;
    line-height: 0.99;

    letter-spacing: -0.055em;
    text-transform: uppercase;
}


/* ---------- Kupferfarbene Hervorhebung ---------- */

.home-hero-highlight {
    color: var(--color-copper);
}


/* ---------- Zeilenumbrüche Desktop ---------- */

.hero-break-mobile {
    display: none;
}


/* ========================================
   HERO UNTERER BEREICH
======================================== */

.home-hero-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 3rem;

    width: 100%;

    margin-top: 2.5rem;
    padding-top: 2rem;

    border-top: 1px solid rgba(255, 255, 255, 0.20);
}


/* ---------- Beschreibung ---------- */

.home-hero-description {
    max-width: 430px;

    color: rgba(255, 255, 255, 0.85);

    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.7;
}


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

/* ---------- Button Container ---------- */

.home-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap: 0.75rem;
}


/* ---------- Allgemeine Button-Gestaltung ---------- */

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

    gap: 1rem;

    min-height: 48px;
    padding: 0.85rem 1.25rem;

    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;

    text-decoration: none;
    white-space: nowrap;

    transition:
        background-color 250ms ease,
        color 250ms ease,
        border-color 250ms ease;
}


/* ---------- Primärer Button ---------- */

.home-hero-button-primary {
    background-color: var(--color-white);
    border: 1px solid var(--color-white);

    color: var(--color-ink);
}

.home-hero-button-primary:hover {
    background-color: var(--color-copper);
    border-color: var(--color-copper);

    color: var(--color-ink);
}


/* ---------- Sekundärer Button ---------- */

.home-hero-button-secondary {
    background-color: transparent;

    border: 1px solid rgba(255, 255, 255, 0.55);

    color: var(--color-white);
}

.home-hero-button-secondary:hover {
    background-color: var(--color-white);
    border-color: var(--color-white);

    color: var(--color-ink);
}


/* ---------- Button-Pfeile ---------- */

.home-hero-button span {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1;
}


/* ========================================
   TABLET – BIS 1023 PX
======================================== */

@media (max-width: 1023px) {

    /* ---------- Hero Hintergrund Tablet ---------- */

    .home-hero {
        background-size:
            100% 100%,
            100% 100%,
            cover;

        background-position:
            center,
            center,
            65% center;
    }

    /* ---------- Container ---------- */

    .home-hero-container {
        min-height: 740px;

        padding-top: 12rem;
        padding-bottom: 2.5rem;
    }

    /* ---------- Einleitung ---------- */

    .home-hero-eyebrow {
        color: var(--color-white);

        font-size: 0.6rem;
        letter-spacing: 0.2em;
    }

    /* ---------- Überschrift ---------- */

    .home-hero-title {
        max-width: 850px;

        font-size: clamp(2.4rem, 5.8vw, 3.2rem);
        line-height: 1.05;
    }

    .home-hero-highlight {
        color: #d0a46b;
    }

    /* ---------- Zeilenumbrüche ---------- */

    .hero-break-intro,
    .hero-break-holz {
        display: none;
    }

    /* ---------- Unterer Bereich ---------- */

    .home-hero-bottom {
        gap: 2rem;
    }

    /* ---------- Beschreibung ---------- */

    .home-hero-description {
        max-width: 320px;
        font-size: 0.85rem;
    }

    /* ---------- Buttons ---------- */

    .home-hero-actions {
        gap: 0.5rem;
    }

    .home-hero-button {
        padding: 0.75rem 1rem;
        font-size: 0.75rem;
    }

}


/* ========================================
   SMARTPHONE – BIS 767 PX
======================================== */

@media (max-width: 767px) {

    /* ---------- Hero Hintergrund ---------- */

    .home-hero {
        /* ---------- Hintergrundgröße Smartphone ---------- */

        background-size:
            100% 100%,
            100% 100%,
            cover;

        /* ---------- Hintergrundposition Smartphone ---------- */

        background-position:
            center,
            center,
            65% center;
    }

    /* ---------- Container ---------- */

    .home-hero-container {
        min-height: 740px;

        padding-top: 16rem;
        padding-bottom: 2.5rem;
    }

    /* ---------- Einleitung ---------- */

    .home-hero-eyebrow {
        max-width: 320px;

        gap: 0.65rem;

        margin-bottom: 1.5rem;

        font-size: 0.58rem;
        letter-spacing: 0.18em;
    }

    .home-hero-eyebrow::before {
        width: 20px;
    }

    /* ---------- Hauptüberschrift ---------- */

    .home-hero-title {
        max-width: 320px;

        font-size: clamp(1.95rem, 8.2vw, 2.5rem);
        font-weight: 800;
        line-height: 1.04;

        letter-spacing: -0.05em;
    }

    /* ---------- Zeilenumbrüche Smartphone ---------- */

    .hero-break-intro,
    .hero-break-holz,
    .hero-break-mobile {
        display: initial;
    }

    .hero-break-desktop {
        display: none;
    }

    /* ---------- Unterer Bereich ---------- */

    .home-hero-bottom {
        flex-direction: column;
        align-items: flex-start;

        gap: 1.75rem;

        margin-top: 2.25rem;
        padding-top: 1.75rem;
    }

    /* ---------- Beschreibung ---------- */

    .home-hero-description {
        max-width: 100%;

        font-size: 0.9rem;
        line-height: 1.75;
    }

    /* ---------- Buttons ---------- */

    .home-hero-actions {
        flex-direction: column;
        align-items: flex-start;

        gap: 0.75rem;
    }

    .home-hero-button {
        min-height: 48px;

        padding: 0.85rem 1.25rem;

        font-size: 0.8rem;
    }

}


/* ========================================
   KLEINE SMARTPHONES – BIS 359 PX
======================================== */

@media (max-width: 359px) {

    /* ---------- Container ---------- */

    .home-hero-container {
        min-height: 760px;

        padding-top: 16rem;
    }

    /* ---------- Überschrift ---------- */

    .home-hero-title {
        font-size: 1.85rem;
    }

    /* ---------- Einleitung ---------- */

    .home-hero-eyebrow {
        font-size: 0.53rem;
        letter-spacing: 0.14em;
    }

    /* ---------- Beschreibung ---------- */

    .home-hero-description {
        font-size: 0.85rem;
    }

}


/* ========================================
   BARRIEREFREIHEIT
======================================== */

/* ---------- Tastaturfokus ---------- */

.home-hero-button:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: 4px;
    box-shadow: 0 0 0 7px var(--color-ink);
}


/* ---------- Reduzierte Animationen ---------- */

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

    .home-hero-button {
        transition: none;
    }

}


/* ========================================
   STARTSEITE – UNTERNEHMENSVORSTELLUNG
======================================== */


/* ========================================
   DESKTOP – GRUNDGESTALTUNG
======================================== */

/* ---------- Abschnitt ---------- */

.home-intro {
    background-color: var(--color-cream);
    color: var(--color-ink);

    padding-block: 8rem;
}


/* ========================================
   ZWEISPALTIGES LAYOUT
======================================== */

/* ---------- Grid ---------- */

.home-intro-grid {
    display: grid;

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

    gap: 3rem;
    align-items: start;
}


/* ========================================
   LINKE SPALTE – EINLEITUNG
======================================== */

/* ---------- Kleine Überschrift ---------- */

.home-intro-eyebrow {
    display: flex;
    align-items: center;

    gap: 0.75rem;

    margin: 0;
    padding-top: 0.4rem;

    color: var(--color-wood);

    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.5;

    letter-spacing: 0.22em;
    text-transform: uppercase;
}


/* ---------- Dekorative Linie ---------- */

.home-intro-eyebrow::before {
    content: "";

    display: block;
    flex-shrink: 0;

    width: 28px;
    height: 1px;

    background-color: var(--color-wood);
}


/* ========================================
   RECHTE SPALTE – TEXT
======================================== */

/* ---------- Inhalt ---------- */

.home-intro-content {
    min-width: 0;
}


/* ---------- Überschrift ---------- */

.home-intro-heading {
    max-width: 800px;

    margin: 0;

    color: var(--color-ink);

    font-family: "Montserrat", Arial, sans-serif;
    font-size: clamp(1.7rem, 2.5vw, 2.3rem);
    font-weight: 400;
    line-height: 1.4;

    letter-spacing: -0.045em;
    text-transform: none;
}


/* ---------- Kupferfarbene Hervorhebung ---------- */

.home-intro-heading span {
    color: var(--color-wood);
}


/* ========================================
   KENNZAHLEN
======================================== */

/* ---------- Kennzahlen-Grid ---------- */

.home-intro-stats {
    display: grid;

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

    margin: 4.5rem 0 0;
    padding: 0;

    border-top: 1px solid rgba(25, 25, 25, 0.15);

    list-style: none;
}


/* ---------- Einzelne Kennzahl ---------- */

.home-intro-stat {
    display: flex;
    flex-direction: column;

    gap: 0.5rem;

    padding-top: 1.5rem;
    padding-right: 1.5rem;
}


/* ---------- Trennlinien ---------- */

.home-intro-stat:not(:last-child) {
    border-right: 1px solid rgba(25, 25, 25, 0.15);
}


/* ---------- Abstand ab zweiter Spalte ---------- */

.home-intro-stat:not(:first-child) {
    padding-left: 1.75rem;
}


/* ---------- Zahl ---------- */

.home-intro-stat strong {
    display: block;

    color: var(--color-ink);

    font-size: clamp(2.2rem, 3.5vw, 3.4rem);
    font-weight: 800;
    line-height: 1.1;

    letter-spacing: -0.05em;
}


/* ---------- Beschreibung ---------- */

.home-intro-stat span {
    color: rgba(25, 25, 25, 0.65);

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.6;
}


/* ========================================
   TABLET – BIS 1023 PX
======================================== */

@media (max-width: 1023px) {

    /* ---------- Abschnitt ---------- */

    .home-intro {
        padding-block: 6rem;
    }

    /* ---------- Layout ---------- */

    .home-intro-grid {
        grid-template-columns: 1fr;

        gap: 2rem;
    }

    /* ---------- Überschrift ---------- */

    .home-intro-heading {
        max-width: 750px;

        font-size: clamp(1.7rem, 3.3vw, 2.2rem);
    }

    /* ---------- Kennzahlen ---------- */

    .home-intro-stats {
        margin-top: 3.5rem;
    }

    /* ---------- Zahl ---------- */

    .home-intro-stat strong {
        font-size: 2.7rem;
    }

}


/* ========================================
   SMARTPHONE – BIS 767 PX
======================================== */

@media (max-width: 767px) {

    /* ---------- Abschnitt ---------- */

    .home-intro {
        padding-block: 4.5rem;
    }

    /* ---------- Layout ---------- */

    .home-intro-grid {
        gap: 1.75rem;
    }

    /* ---------- Kleine Überschrift ---------- */

    .home-intro-eyebrow {
        font-size: 0.6rem;
        letter-spacing: 0.18em;
    }

    .home-intro-eyebrow::before {
        width: 20px;
    }

    /* ---------- Hauptüberschrift ---------- */

    .home-intro-heading {
        font-size: clamp(1.4rem, 5.6vw, 1.8rem);
        line-height: 1.5;

        letter-spacing: -0.035em;
    }

    /* ---------- Kennzahlen-Grid ---------- */

    .home-intro-stats {
        grid-template-columns: 1fr;

        margin-top: 3rem;
    }

    /* ---------- Kennzahl ---------- */

    .home-intro-stat {
        display: grid;

        grid-template-columns: 90px minmax(0, 1fr);
        align-items: center;

        gap: 1rem;

        padding: 1.25rem 0;
    }

    /* ---------- Trennlinien ---------- */

    .home-intro-stat:not(:last-child) {
        border-right: none;

        border-bottom: 1px solid rgba(25, 25, 25, 0.15);
    }

    /* ---------- Spaltenabstand zurücksetzen ---------- */

    .home-intro-stat:not(:first-child) {
        padding-left: 0;
    }

    /* ---------- Zahl ---------- */

    .home-intro-stat strong {
        font-size: 2.4rem;
    }

    /* ---------- Beschreibung ---------- */

    .home-intro-stat span {
        font-size: 0.8rem;
    }

}


/* ========================================
   KLEINE SMARTPHONES – BIS 359 PX
======================================== */

@media (max-width: 359px) {

    /* ---------- Überschrift ---------- */

    .home-intro-heading {
        font-size: 1.35rem;
    }

    /* ---------- Kennzahlen ---------- */

    .home-intro-stat {
        grid-template-columns: 80px minmax(0, 1fr);

        gap: 0.75rem;
    }

    .home-intro-stat strong {
        font-size: 2.1rem;
    }

}

/* ========================================
   STARTSEITE – LEISTUNGEN
======================================== */


/* ========================================
   LEISTUNGEN – DESKTOP
======================================== */

/* ---------- Abschnitt ---------- */

.home-services {
    padding-block: 7rem;

    background-color: var(--color-stone);
    color: var(--color-ink);
}


/* ========================================
   ABSCHNITTSKOPF
======================================== */

/* ---------- Layout ---------- */

.home-services-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 2rem;

    margin-bottom: 3.5rem;
}


/* ---------- Überschriftengruppe ---------- */

.home-services-heading-group {
    min-width: 0;
}


/* ---------- Kleine Überschrift ---------- */

.home-services-eyebrow {
    display: flex;
    align-items: center;

    gap: 0.75rem;

    margin: 0 0 1.5rem;

    color: var(--color-wood);

    font-size: 0.7rem;
    font-weight: 700;

    letter-spacing: 0.22em;
    text-transform: uppercase;
}


/* ---------- Dekorative Linie ---------- */

.home-services-eyebrow::before {
    content: "";

    width: 28px;
    height: 1px;

    flex-shrink: 0;

    background-color: var(--color-wood);
}


/* ---------- Hauptüberschrift ---------- */

.home-services-heading {
    margin: 0;

    color: var(--color-ink);

    font-family: "Montserrat", Arial, sans-serif;
    font-size: clamp(2.5rem, 4.5vw, 4rem);
    font-weight: 800;
    line-height: 1.02;

    letter-spacing: -0.055em;
    text-transform: uppercase;
}


/* ========================================
   BUTTON – ALLE LEISTUNGEN
======================================== */

.home-services-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 1rem;

    min-height: 48px;
    padding: 0.85rem 1.25rem;

    flex-shrink: 0;

    border: 1px solid rgba(25, 25, 25, 0.22);

    color: var(--color-ink);

    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;

    transition:
        background-color 250ms ease,
        border-color 250ms ease,
        color 250ms ease;
}


/* ---------- Button Hover ---------- */

.home-services-all:hover {
    background-color: var(--color-wood);
    border-color: var(--color-wood);

    color: var(--color-white);
}


/* ---------- Pfeil ---------- */

.home-services-all span {
    font-size: 1.2rem;
    line-height: 1;
}


/* ========================================
   LEISTUNGSLISTE
======================================== */

/* ---------- Liste ---------- */

.home-services-list {
    margin: 0;
    padding: 0;

    list-style: none;

    border-top: 1px solid rgba(25, 25, 25, 0.15);
}


/* ---------- Einzelne Leistung ---------- */

.home-services-item {
    display: grid;

    grid-template-columns:
        3.5rem minmax(0, 1.25fr) minmax(0, 0.9fr) 2.75rem;

    align-items: center;

    gap: 2rem;

    padding-block: 2.5rem;

    border-bottom: 1px solid rgba(25, 25, 25, 0.15);
}


/* ========================================
   LEISTUNGSNUMMER
======================================== */

.home-services-number {
    color: var(--color-copper);

    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.5;
}


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

.home-services-title {
    margin: 0;

    color: var(--color-ink);

    font-size: clamp(1.35rem, 2.15vw, 1.9rem);
    font-weight: 600;
    line-height: 1.2;

    letter-spacing: -0.045em;
}


/* ========================================
   LEISTUNGSBESCHREIBUNG
======================================== */

.home-services-description {
    margin: 0;

    color: rgba(25, 25, 25, 0.65);

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.65;
}


/* ========================================
   PFEIL-BUTTON
======================================== */

.home-services-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;
    margin-right: .6rem;

    justify-self: end;

    border: 1px solid rgba(25, 25, 25, 0.18);

    color: var(--color-ink);

    font-size: 1.25rem;
    text-decoration: none;

    transition:
        background-color 250ms ease,
        border-color 250ms ease,
        color 250ms ease,
        transform 250ms ease;
}


/* ---------- Pfeil Hover ---------- */

.home-services-arrow:hover {
    background-color: var(--color-wood);
    border-color: var(--color-wood);

    color: var(--color-white);
}

.home-services-arrow:hover span {
    transform: translateX(3px);
}

.home-services-arrow span {
    transition: transform 250ms ease;
}


/* ========================================
   TABLET – BIS 1023 PX
======================================== */

@media (max-width: 1023px) {

    /* ---------- Abschnitt ---------- */

    .home-services {
        padding-block: 5.5rem;
    }

    /* ---------- Abschnittskopf ---------- */

    .home-services-header {
        gap: 1.5rem;

        margin-bottom: 2.5rem;
    }

    /* ---------- Überschrift ---------- */

    .home-services-heading {
        font-size: clamp(2.3rem, 5vw, 3.3rem);
    }

    /* ---------- Leistungszeilen ---------- */

    .home-services-item {
        grid-template-columns:
            2.75rem minmax(0, 1fr) 2.75rem;

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

        padding-block: 2rem;
    }

    /* ---------- Nummer ---------- */

    .home-services-number {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: start;
    }

    /* ---------- Leistungsüberschrift ---------- */

    .home-services-title {
        grid-column: 2;
        grid-row: 1;

        font-size: 1.6rem;
    }

    /* ---------- Beschreibung ---------- */

    .home-services-description {
        grid-column: 2;
        grid-row: 2;

        font-size: 0.85rem;
    }

    /* ---------- Pfeil ---------- */

    .home-services-arrow {
        grid-column: 3;
        grid-row: 1 / 3;
        align-self: center;
    }

}


/* ========================================
   SMARTPHONE – BIS 767 PX
======================================== */

@media (max-width: 767px) {

    /* ---------- Abschnitt ---------- */

    .home-services {
        padding-block: 4.5rem;
    }

    /* ---------- Abschnittskopf ---------- */

    .home-services-header {
        flex-direction: column;
        align-items: flex-start;

        gap: 2rem;

        margin-bottom: 2.5rem;
    }

    /* ---------- Kleine Überschrift ---------- */

    .home-services-eyebrow {
        font-size: 0.6rem;
        letter-spacing: 0.18em;
    }

    .home-services-eyebrow::before {
        width: 20px;
    }

    /* ---------- Hauptüberschrift ---------- */

    .home-services-heading {
        font-size: clamp(2rem, 8vw, 2.8rem);
        line-height: 1.08;
    }

    /* ---------- Alle Leistungen ---------- */

    .home-services-all {
        min-height: 44px;

        font-size: 0.8rem;
    }

    /* ---------- Leistungszeilen ---------- */

    .home-services-item {
        grid-template-columns:
            2rem minmax(0, 1fr) 2.5rem;

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

        padding-block: 1.75rem;
    }

    /* ---------- Nummer ---------- */

    .home-services-number {
        font-size: 0.75rem;
    }

    /* ---------- Leistungsüberschrift ---------- */

    .home-services-title {
        font-size: 1.15rem;
        line-height: 1.3;

        letter-spacing: -0.025em;
    }

    /* ---------- Beschreibung ---------- */

    .home-services-description {
        font-size: 0.8rem;
        line-height: 1.6;
    }

    /* ---------- Pfeil ---------- */

    .home-services-arrow {
        width: 38px;
        height: 38px;

        font-size: 1.1rem;
    }

}


/* ========================================
   KLEINE SMARTPHONES – BIS 359 PX
======================================== */

@media (max-width: 359px) {

    /* ---------- Hauptüberschrift ---------- */

    .home-services-heading {
        font-size: 1.85rem;
    }

    /* ---------- Leistungszeilen ---------- */

    .home-services-item {
        grid-template-columns:
            1.5rem minmax(0, 1fr) 2.25rem;

        column-gap: 0.5rem;
    }

    /* ---------- Leistungsüberschrift ---------- */

    .home-services-title {
        font-size: 1.05rem;
    }

    /* ---------- Pfeil ---------- */

    .home-services-arrow {
        width: 34px;
        height: 34px;
    }

}


/* ========================================
   BARRIEREFREIHEIT
======================================== */

/* ---------- Tastaturfokus ---------- */

.home-services-all:focus-visible,
.home-services-arrow:focus-visible {
    outline: 3px solid var(--color-copper-hover);
    outline-offset: 4px;
}


/* ---------- Reduzierte Animationen ---------- */

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

    .home-services-all,
    .home-services-arrow,
    .home-services-arrow span {
        transition: none;
    }

}

/* ========================================
   LEISTUNGEN – INTERAKTIONEN
======================================== */

/* ---------- Gesamte Leistungszeile ---------- */

.home-services-item {
    position: relative;

    transition: background-color 250ms ease;
}

/* ---------- Gesamte Zeile anklickbar ---------- */

.home-services-arrow::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    cursor: pointer;
}

/* ---------- Bewegung vorbereiten ---------- */

.home-services-number,
.home-services-title,
.home-services-description {
    transition: transform 300ms ease;
}


/* ========================================
   HOVER – DESKTOP
======================================== */

@media (hover: hover) and (pointer: fine) {

    /* ---------- Hintergrund hervorheben ---------- */

    .home-services-item:hover {
        background-color: rgba(116, 84, 63, 0.05);

        cursor: pointer;
    }

    /* ---------- Inhalt nach rechts bewegen ---------- */

    .home-services-item:hover .home-services-number,
    .home-services-item:hover .home-services-title,
    .home-services-item:hover .home-services-description {
        transform: translateX(8px);
    }

    /* ---------- Pfeil hervorheben ---------- */

    .home-services-item:hover .home-services-arrow {
        background-color: var(--color-wood);
        border-color: var(--color-wood);

        color: var(--color-white);
    }

    /* ---------- Pfeil bewegen ---------- */

    .home-services-item:hover .home-services-arrow span {
        transform: translateX(4px);
    }

}


/* ========================================
   TASTATUR – FOKUS
======================================== */

.home-services-item:focus-within {
    outline: 2px solid var(--color-copper-hover);
    outline-offset: -2px;

    background-color: rgba(116, 84, 63, 0.05);
}


/* ========================================
   REDUZIERTE ANIMATIONEN
======================================== */

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

    .home-services-item,
    .home-services-number,
    .home-services-title,
    .home-services-description {
        transition: none;
    }

    .home-services-item:hover .home-services-number,
    .home-services-item:hover .home-services-title,
    .home-services-item:hover .home-services-description {
        transform: none;
    }

}

/* ========================================
   STARTSEITE – IHR ANSPRECHPARTNER
======================================== */


/* ========================================
   DESKTOP – GRUNDGESTALTUNG
======================================== */

/* ---------- Abschnitt ---------- */

.home-about {
    padding-block: 6rem;

    background-color: var(--color-cream);
    color: var(--color-ink);
}


/* ========================================
   ZWEISPALTIGES LAYOUT
======================================== */

/* ---------- Grid ---------- */

.home-about-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr) minmax(0, 1.05fr);

    align-items: center;

    gap: clamp(3rem, 7vw, 8rem);
}


/* ========================================
   LINKE SPALTE – BILD
======================================== */

/* ---------- Bildcontainer ---------- */

.home-about-media {
    width: 100%;
    min-width: 0;

    overflow: hidden;
}


/* ---------- Bild ---------- */

.home-about-image {
    display: block;

    width: 100%;
    height: 100%;

    aspect-ratio: 4 / 5;

    object-fit: contain;
    object-position: center;

    transition: transform 600ms ease;
}


/* ---------- Dezente Bildinteraktion ---------- */

@media (hover: hover) and (pointer: fine) {

    .home-about-media:hover .home-about-image {
        transform: scale(1.035);
    }

}


/* ========================================
   RECHTE SPALTE – INHALT
======================================== */

/* ---------- Inhaltscontainer ---------- */

.home-about-content {
    min-width: 0;
}


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

.home-about-eyebrow {
    display: flex;
    align-items: center;

    gap: 0.75rem;

    margin: 0 0 1.5rem;

    color: var(--color-wood);

    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.5;

    letter-spacing: 0.22em;
    text-transform: uppercase;
}


/* ---------- Dekorative Linie ---------- */

.home-about-eyebrow::before {
    content: "";

    display: block;
    flex-shrink: 0;

    width: 28px;
    height: 1px;

    background-color: var(--color-wood);
}


/* ========================================
   NAME & BERUFSBEZEICHNUNG
======================================== */

/* ---------- Name ---------- */

.home-about-heading {
    margin: 0;

    color: var(--color-ink);

    font-family: "Montserrat", Arial, sans-serif;
    font-size: clamp(2.2rem, 3.5vw, 3.3rem);
    font-weight: 700;
    line-height: 1.15;

    letter-spacing: -0.05em;
    text-transform: none;
}


/* ---------- Berufsbezeichnung ---------- */

.home-about-role {
    margin: 0.5rem 0 0;

    color: var(--color-wood);

    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.6;
}


/* ========================================
   PERSÖNLICHE VORSTELLUNG
======================================== */

/* ---------- Textbereich ---------- */

.home-about-text {
    max-width: 540px;

    margin-top: 2rem;
}


/* ---------- Absätze ---------- */

.home-about-text p {
    margin: 0;

    color: rgba(25, 25, 25, 0.68);

    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.8;
}


/* ---------- Abstand zwischen Absätzen ---------- */

.home-about-text p+p {
    margin-top: 1rem;
}


/* ========================================
   BUTTON – MEHR ÜBER MICH
======================================== */

/* ---------- Button ---------- */

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

    gap: 1rem;

    min-height: 48px;

    margin-top: 2rem;
    padding: 0.85rem 1.25rem;

    border: 1px solid rgba(25, 25, 25, 0.22);

    color: var(--color-ink);

    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;

    text-decoration: none;

    transition:
        background-color 250ms ease,
        border-color 250ms ease,
        color 250ms ease;
}


/* ---------- Button Hover ---------- */

.home-about-button:hover {
    background-color: var(--color-wood);
    border-color: var(--color-wood);

    color: var(--color-white);
}


/* ---------- Pfeil ---------- */

.home-about-button span {
    font-size: 1.2rem;
    line-height: 1;

    transition: transform 250ms ease;
}


/* ---------- Pfeil Animation ---------- */

.home-about-button:hover span {
    transform: translateX(4px);
}


/* ========================================
   TABLET – BIS 1023 PX
======================================== */

@media (max-width: 1023px) {

    /* ---------- Abschnitt ---------- */

    .home-about {
        padding-block: 5rem;
    }

    /* ---------- Layout ---------- */

    .home-about-grid {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

    /* ---------- Bild ---------- */

    /* ---------- Bildcontainer Tablet ---------- */

    .home-about-media {
        max-width: 440px;
        margin-inline: 0;
    }

    /* ---------- Bild Tablet ---------- */

    .home-about-image {
        width: 100%;
        height: auto;

        max-height: none;

        aspect-ratio: 4 / 5;

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

    /* ---------- Inhalt ---------- */

    .home-about-content {
        max-width: 680px;
    }

    /* ---------- Name ---------- */

    .home-about-heading {
        font-size: 2.7rem;
    }

    /* ---------- Text ---------- */

    .home-about-text {
        max-width: 650px;
    }

}


/* ========================================
   SMARTPHONE – BIS 767 PX
======================================== */

@media (max-width: 767px) {

    /* ---------- Abschnitt ---------- */

    .home-about {
        padding-block: 4.5rem;
    }

    /* ---------- Layout ---------- */

    .home-about-grid {
        gap: 2.5rem;
    }

    /* ---------- Bildcontainer Smartphone ---------- */

    .home-about-media {
        max-width: none;
        margin-inline: 0;
    }

    /* ---------- Bild Smartphone ---------- */

    .home-about-image {
        width: 100%;
        height: auto;

        max-height: none;

        aspect-ratio: 4 / 5;

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

    /* ---------- Kleine Überschrift ---------- */

    .home-about-eyebrow {
        gap: 0.65rem;

        margin-bottom: 1.25rem;

        font-size: 0.6rem;
        letter-spacing: 0.18em;
    }

    .home-about-eyebrow::before {
        width: 20px;
    }

    /* ---------- Name ---------- */

    .home-about-heading {
        font-size: clamp(2rem, 8vw, 2.6rem);
    }

    /* ---------- Berufsbezeichnung ---------- */

    .home-about-role {
        font-size: 0.9rem;
    }

    /* ---------- Beschreibung ---------- */

    .home-about-text {
        margin-top: 1.5rem;
    }

    .home-about-text p {
        font-size: 0.9rem;
        line-height: 1.75;
    }

    /* ---------- Button ---------- */

    .home-about-button {
        margin-top: 1.75rem;

        min-height: 48px;
    }

}


/* ========================================
   KLEINE SMARTPHONES – BIS 359 PX
======================================== */

@media (max-width: 359px) {

    /* ---------- Name ---------- */

    .home-about-heading {
        font-size: 1.9rem;
    }

    /* ---------- Beschreibung ---------- */

    .home-about-text p {
        font-size: 0.85rem;
    }

}


/* ========================================
   BARRIEREFREIHEIT
======================================== */

/* ---------- Tastaturfokus ---------- */

.home-about-button:focus-visible {
    outline: 3px solid var(--color-copper-hover);
    outline-offset: 4px;
}


/* ---------- Reduzierte Animationen ---------- */

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

    .home-about-image,
    .home-about-button,
    .home-about-button span {
        transition: none;
    }

    .home-about-media:hover .home-about-image,
    .home-about-button:hover span {
        transform: none;
    }

}

/* ========================================
   STARTSEITE – ZUSAMMENARBEIT
======================================== */


/* ========================================
   DESKTOP – GRUNDGESTALTUNG
======================================== */

/* ---------- Abschnitt ---------- */

.home-process {
    padding-block: 7rem;

    background-color: var(--color-cream);
    color: var(--color-ink);
}


/* ========================================
   ABSCHNITTSKOPF
======================================== */

/* ---------- Header ---------- */

.home-process-header {
    margin-bottom: 3.5rem;
}


/* ---------- Kleine Überschrift ---------- */

.home-process-eyebrow {
    display: flex;
    align-items: center;

    gap: 0.75rem;

    margin: 0 0 1.5rem;

    color: var(--color-wood);

    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.5;

    letter-spacing: 0.22em;
    text-transform: uppercase;
}


/* ---------- Dekorative Linie ---------- */

.home-process-eyebrow::before {
    content: "";

    display: block;
    flex-shrink: 0;

    width: 28px;
    height: 1px;

    background-color: var(--color-wood);
}


/* ---------- Hauptüberschrift ---------- */

.home-process-heading {
    max-width: 900px;

    margin: 0;

    color: var(--color-ink);

    font-family: "Montserrat", Arial, sans-serif;
    font-size: clamp(2.5rem, 4.5vw, 4rem);
    font-weight: 800;
    line-height: 1.04;

    letter-spacing: -0.055em;
    text-transform: uppercase;
}


/* ========================================
   DREISPALTIGES LAYOUT
======================================== */

/* ---------- Grid ---------- */

.home-process-steps {
    display: grid;

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

    align-items: stretch;

    gap: 1.25rem;

    margin: 0;
    padding: 0;

    list-style: none;
}


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

/* ---------- Karte ---------- */

.home-process-step {
    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 270px;

    padding: 2.5rem 2rem;

    border: 1px solid transparent;
}


/* ========================================
   NUMMERIERUNG
======================================== */

/* ---------- Nummer ---------- */

.home-process-number {
    display: block;

    margin-bottom: 1.75rem;

    color: rgba(25, 25, 25, 0.3);

    font-size: clamp(2.5rem, 3.5vw, 3.5rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: -0.045em;
}


/* ========================================
   ÜBERSCHRIFTEN
======================================== */

/* ---------- Titel ---------- */

.home-process-title {
    margin: 0 0 1rem;

    color: var(--color-ink);

    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.3;

    letter-spacing: -0.035em;
}


/* ========================================
   BESCHREIBUNGEN
======================================== */

/* ---------- Text ---------- */

.home-process-description {
    margin: 0;

    color: rgba(25, 25, 25, 0.65);

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.75;
}


/* ========================================
   ZUSAMMENARBEIT – HOVER-INTERAKTION
======================================== */

/* ---------- Animation vorbereiten ---------- */

.home-process-step {
    transition:
        background-color 250ms ease,
        border-color 250ms ease;
}

.home-process-number {
    transition: color 250ms ease;
}


/* ========================================
   HOVER – DESKTOP
======================================== */

@media (hover: hover) and (pointer: fine) {

    /* ---------- Karte hervorheben ---------- */

    .home-process-step:hover {
        background-color: var(--color-white);

        border-color: rgba(25, 25, 25, 0.12);
    }

    /* ---------- Nummer kupferfarben ---------- */

    .home-process-step:hover .home-process-number {
        color: var(--color-copper);
    }

}


/* ========================================
   REDUZIERTE ANIMATIONEN
======================================== */

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

    .home-process-step,
    .home-process-number {
        transition: none;
    }

}


/* ========================================
   TABLET – BIS 1023 PX
======================================== */

@media (max-width: 1023px) {

    /* ---------- Abschnitt ---------- */

    .home-process {
        padding-block: 5.5rem;
    }

    /* ---------- Abschnittskopf ---------- */

    .home-process-header {
        margin-bottom: 2.75rem;
    }

    /* ---------- Hauptüberschrift ---------- */

    .home-process-heading {
        font-size: clamp(2.4rem, 5vw, 3.4rem);
    }

    /* ---------- Schritte untereinander ---------- */

    .home-process-steps {
        grid-template-columns: 1fr;

        gap: 0.75rem;
    }

    /* ---------- Einzelne Karte ---------- */

    .home-process-step {
        display: grid;

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

        column-gap: 1.5rem;
        row-gap: 0.5rem;

        min-height: 0;

        padding: 1.75rem;
    }

    /* ---------- Nummer ---------- */

    .home-process-number {
        grid-column: 1;
        grid-row: 1 / 3;

        margin: 0;

        font-size: 3rem;
    }

    /* ---------- Titel ---------- */

    .home-process-title {
        grid-column: 2;
        grid-row: 1;

        margin: 0;
    }

    /* ---------- Beschreibung ---------- */

    .home-process-description {
        grid-column: 2;
        grid-row: 2;

        max-width: 600px;
    }

}


/* ========================================
   SMARTPHONE – BIS 767 PX
======================================== */

@media (max-width: 767px) {

    /* ---------- Abschnitt ---------- */

    .home-process {
        padding-block: 4.5rem;
    }

    /* ---------- Abschnittskopf ---------- */

    .home-process-header {
        margin-bottom: 2.5rem;
    }

    /* ---------- Kleine Überschrift ---------- */

    .home-process-eyebrow {
        font-size: 0.6rem;

        letter-spacing: 0.18em;
    }

    .home-process-eyebrow::before {
        width: 20px;
    }

    /* ---------- Hauptüberschrift ---------- */

    .home-process-heading {
        font-size: clamp(2rem, 8vw, 2.8rem);
        line-height: 1.08;
    }

    /* ---------- Schritte ---------- */

    .home-process-steps {
        gap: 0.5rem;
    }

    /* ---------- Einzelne Karte ---------- */

    .home-process-step {
        grid-template-columns: 2.75rem minmax(0, 1fr);

        column-gap: 1rem;
        row-gap: 0.5rem;

        padding: 1.5rem 0;
    }

    /* ---------- Nummer ---------- */

    .home-process-number {
        font-size: 2.4rem;
    }

    /* ---------- Titel ---------- */

    .home-process-title {
        font-size: 1.2rem;
    }

    /* ---------- Beschreibung ---------- */

    .home-process-description {
        font-size: 0.85rem;
        line-height: 1.7;
    }

    /* ---------- Hervorgehobene Karte ---------- */

    .home-process-step--featured {
        padding: 1.5rem 1rem;
    }

}


/* ========================================
   KLEINE SMARTPHONES – BIS 359 PX
======================================== */

@media (max-width: 359px) {

    /* ---------- Hauptüberschrift ---------- */

    .home-process-heading {
        font-size: 1.85rem;
    }

    /* ---------- Karte ---------- */

    .home-process-step {
        grid-template-columns: 2.25rem minmax(0, 1fr);

        column-gap: 0.75rem;
    }

    /* ---------- Nummer ---------- */

    .home-process-number {
        font-size: 2rem;
    }

    /* ---------- Beschreibung ---------- */

    .home-process-description {
        font-size: 0.8rem;
    }

}


/* ========================================
   EINSATZGEBIET – STARTSEITE
======================================== */

/* ========================================
   EINSATZGEBIET – DESKTOP
======================================== */

/* ---------- Bereich ---------- */

.home-area {
    padding: 110px 0;

    background-color: var(--color-white);
    color: var(--color-ink);
}

/* ---------- Container ---------- */

.home-area-container {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;

    gap: 90px;

    width: calc(100% - 48px);
    max-width: 1040px;

    margin: 0 auto;
}

/* ========================================
   LINKE SPALTE – EINLEITUNG
======================================== */

/* ---------- Abschnittsbezeichnung ---------- */

.home-area-eyebrow {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 28px;

    color: var(--color-wood);

    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* ---------- Dekorative Linie ---------- */

.home-area-eyebrow::before {
    content: "";

    display: block;

    width: 28px;
    height: 1px;

    flex-shrink: 0;

    background-color: var(--color-wood);
}

/* ---------- Überschrift ---------- */

.home-area-title {
    max-width: 480px;

    margin: 0 0 24px;

    color: var(--color-ink);

    font-size: clamp(2.5rem, 3.5vw, 3.3rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.045em;
    text-transform: uppercase;

    overflow-wrap: break-word;
}

/* ---------- Beschreibung ---------- */

.home-area-description {
    max-width: 440px;

    margin: 0;

    color: #757575;

    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.8;
}

/* ========================================
   RECHTE SPALTE – EINSATZGEBIETE
======================================== */

/* ---------- Liste ---------- */

.home-area-list {
    display: flex;
    flex-direction: column;

    margin: 0;
    padding: 0;

    list-style: none;

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

/* ---------- Einzelnes Einsatzgebiet ---------- */

.home-area-region {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;

    gap: 24px;

    padding: 30px 0;

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

/* ---------- Ortsname ---------- */

.home-area-region-name {
    color: var(--color-ink);

    font-size: clamp(1.35rem, 2vw, 1.9rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.035em;

    overflow-wrap: break-word;
}

/* ---------- Kennzeichnung ---------- */

.home-area-region-label {
    color: #757575;

    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.5;
    text-align: right;
    text-transform: uppercase;
}

/* ========================================
   SCHWERPUNKT – SANITY
======================================== */

/* ---------- Hervorgehobener Ortsname ---------- */

.home-area-region--focus .home-area-region-name {
    color: var(--color-wood);
}

/* ========================================
   EINSATZGEBIET – TABLET
======================================== */

@media (max-width: 1024px) {

    /* ---------- Bereich ---------- */

    .home-area {
        padding: 85px 0;
    }

    /* ---------- Container ---------- */

    .home-area-container {
        gap: 48px;
    }

    /* ---------- Überschrift ---------- */

    .home-area-title {
        font-size: 2.6rem;
    }

    /* ---------- Ortsname ---------- */

    .home-area-region-name {
        font-size: 1.5rem;
    }

    /* ---------- Kennzeichnung ---------- */

    .home-area-region-label {
        font-size: 0.55rem;
    }

}

/* ========================================
   EINSATZGEBIET – KLEINES TABLET
======================================== */

@media (max-width: 900px) {

    /* ---------- Container ---------- */

    .home-area-container {
        grid-template-columns: 1fr;

        gap: 48px;
    }

    /* ---------- Überschrift ---------- */

    .home-area-title {
        max-width: 650px;
    }

    /* ---------- Beschreibung ---------- */

    .home-area-description {
        max-width: 650px;
    }

    /* ---------- Einsatzgebiete ---------- */

    .home-area-region {
        padding: 26px 0;
    }

}

/* ========================================
   EINSATZGEBIET – MOBILE
======================================== */

@media (max-width: 600px) {

    /* ---------- Bereich ---------- */

    .home-area {
        padding: 65px 0;
    }

    /* ---------- Container ---------- */

    .home-area-container {
        width: calc(100% - 32px);

        gap: 38px;
    }

    /* ---------- Abschnittsbezeichnung ---------- */

    .home-area-eyebrow {
        margin-bottom: 22px;

        font-size: 0.65rem;
    }

    /* ---------- Überschrift ---------- */

    .home-area-title {
        margin-bottom: 22px;

        font-size: clamp(1.85rem, 8vw, 2.4rem);
        line-height: 1.1;
    }

    /* ---------- Beschreibung ---------- */

    .home-area-description {
        font-size: 0.9rem;
        line-height: 1.75;
    }

    /* ---------- Einsatzgebiete ---------- */

    .home-area-region {
        gap: 16px;

        padding: 24px 0;
    }

    /* ---------- Ortsname ---------- */

    .home-area-region-name {
        font-size: 1.3rem;
    }

}

/* ========================================
   EINSATZGEBIET – KLEINES MOBILE
======================================== */

@media (max-width: 480px) {

    /* ---------- Einsatzgebiet ---------- */

    .home-area-region {
        grid-template-columns: 1fr;

        gap: 8px;
    }

    /* ---------- Ortsname ---------- */

    .home-area-region-name {
        font-size: 1.25rem;
    }

    /* ---------- Kennzeichnung ---------- */

    .home-area-region-label {
        text-align: left;
    }

}

/* ========================================
   PROJEKT ANFRAGEN – STARTSEITE
======================================== */

/* ========================================
   CTA – DESKTOP
======================================== */

/* ---------- Bereich ---------- */

.home-cta {
    padding: 110px 0;

    background-color: var(--color-ink);
    color: var(--color-white);
}

/* ---------- Container ---------- */

.home-cta-container {
    width: calc(100% - 48px);
    max-width: 1040px;

    margin: 0 auto;
}

/* ---------- Abschnittsbezeichnung ---------- */

.home-cta-eyebrow {
    display: flex;
    align-items: center;

    gap: 12px;

    margin: 0 0 32px;

    color: var(--color-copper);

    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* ---------- Dekorative Linie ---------- */

.home-cta-eyebrow::before {
    content: "";

    width: 28px;
    height: 1px;

    flex-shrink: 0;

    background-color: var(--color-copper);
}

/* ---------- Überschrift ---------- */

.home-cta-title {
    margin: 0 0 32px;

    color: var(--color-white);

    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}

/* ---------- Farbiger Teil ---------- */

.home-cta-title span {
    display: block;

    color: var(--color-copper);
}

/* ---------- Beschreibung ---------- */

.home-cta-description {
    max-width: 540px;

    margin: 0 0 40px;

    color: var(--color-stone);

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

/* ========================================
   CTA – KONTAKTMÖGLICHKEITEN
======================================== */

/* ---------- Aktionen ---------- */

.home-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 20px;

    padding-top: 32px;

    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* ---------- Button ---------- */

.home-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 35px;

    padding: 16px 24px;

    background-color: var(--color-copper);
    color: var(--color-ink);

    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;

    transition:
        background-color 200ms ease,
        transform 200ms ease;
}

/* ---------- Button Hover ---------- */

.home-cta-button:hover {
    background-color: var(--color-copper-hover);
    color: #111111;
    transform: translateY(-2px);
}

/* ---------- Button Fokus ---------- */

.home-cta-button:focus-visible,
.home-cta-phone a:focus-visible {
    outline: 2px solid var(--color-copper);
    outline-offset: 4px;
}

/* ---------- Telefonnummer ---------- */

.home-cta-phone {
    margin: 0;

    color: #999999;

    font-size: 0.8rem;
    line-height: 1.6;
}

/* ---------- Telefonlink ---------- */

.home-cta-phone a {
    color: var(--color-white);

    font-weight: 600;
    text-decoration: none;

    transition: color 200ms ease;
}

/* ---------- Telefon Hover ---------- */

.home-cta-phone a:hover {
    color: var(--color-copper);
}

/* ========================================
   CTA – TABLET
======================================== */

@media (max-width: 1024px) {

    .home-cta {
        padding: 85px 0;
    }

    .home-cta-title {
        font-size: clamp(2.8rem, 6vw, 4rem);
    }

}

/* ========================================
   CTA – MOBILE
======================================== */

@media (max-width: 600px) {

    /* ---------- Bereich ---------- */

    .home-cta {
        padding: 70px 0;
    }

    /* ---------- Container ---------- */

    .home-cta-container {
        width: calc(100% - 32px);
    }

    /* ---------- Abschnittsbezeichnung ---------- */

    .home-cta-eyebrow {
        margin-bottom: 26px;

        font-size: 0.65rem;
    }

    /* ---------- Überschrift ---------- */

    .home-cta-title {
        margin-bottom: 26px;

        font-size: clamp(2rem, 9vw, 3rem);
        line-height: 1.08;
    }

    /* ---------- Beschreibung ---------- */

    .home-cta-description {
        margin-bottom: 32px;

        font-size: 0.9rem;
        line-height: 1.75;
    }

    /* ---------- Aktionen ---------- */

    .home-cta-actions {
        gap: 22px;
        padding-top: 28px;
    }

    /* ---------- Button ---------- */

    .home-cta-button {
        gap: 28px;
        padding: 15px 20px;
    }

}

/* ========================================
   CTA – REDUZIERTE BEWEGUNG
======================================== */

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

    .home-cta-button {
        transition: none;
    }

    .home-cta-button:hover {
        transform: none;
    }

}

/* ========================================
   STARTSEITE – AUSGEWÄHLTE PROJEKTE
======================================== */

.home-projects {
    padding: clamp(4.5rem, 7vw, 7rem) 0;

    background-color: var(--color-stone);
    color: var(--color-ink);
}


/* ========================================
   PROJEKTE – ABSCHNITTSKOPF
======================================== */

.home-projects-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 2rem;

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


/* ---------- Abschnittsbezeichnung ---------- */

.home-projects-eyebrow {
    display: flex;
    align-items: center;

    gap: 0.75rem;

    margin: 0 0 1.5rem;

    color: var(--color-wood);

    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}


/* ---------- Dekorative Linie ---------- */

.home-projects-eyebrow::before {
    content: "";

    width: 28px;
    height: 1px;

    flex-shrink: 0;

    background-color: var(--color-wood);
}


/* ---------- Hauptüberschrift ---------- */

.home-projects-heading {
    margin: 0;

    color: var(--color-ink);

    font-size: clamp(2.5rem, 4.5vw, 4rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.055em;
    text-transform: uppercase;

    overflow-wrap: break-word;
}


/* ---------- Kupferfarbene Hervorhebung ---------- */

.home-projects-heading span {
    color: var(--color-wood);
}


/* ========================================
   PROJEKTE – ALLE PROJEKTE
======================================== */

.home-projects-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 1rem;

    flex-shrink: 0;

    min-height: 48px;
    padding: 0.85rem 1.25rem;

    border: 1px solid rgba(25, 25, 25, 0.22);

    color: var(--color-ink);

    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;

    transition:
        background-color 250ms ease,
        border-color 250ms ease,
        color 250ms ease;
}


/* ---------- Button Hover ---------- */

.home-projects-all:hover {
    background-color: var(--color-wood);
    border-color: var(--color-wood);

    color: var(--color-white);
}


/* ---------- Pfeil ---------- */

.home-projects-all span {
    font-size: 1.2rem;
}


/* ========================================
   PROJEKTE – DYNAMISCHES KARTENRASTER
======================================== */

.home-projects-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr) minmax(0, 0.85fr);

    gap: clamp(2rem, 3vw, 3rem);

    align-items: stretch;
}


/* ---------- Einzelne Projektkarte ---------- */

.home-projects-card {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


/* ---------- Bei drei Projekten erstes Projekt groß ---------- */

.home-projects-card:first-child:nth-last-child(3) {
    grid-row: span 2;
}


/* ---------- Bei einem Projekt volle Breite ---------- */

.home-projects-card:only-child {
    grid-column: 1 / -1;
    grid-row: auto;

    width: 100%;
    max-width: 54rem;
}


/* ========================================
   PROJEKTE – VORSCHAUBILDER
======================================== */

.home-projects-media {
    display: block;

    position: relative;

    width: 100%;
    aspect-ratio: 16 / 10;

    overflow: hidden;

    background-color: var(--color-cream);
}


/* ---------- Bilddarstellung ---------- */

.home-projects-media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 400ms ease;
}


/* ---------- Großes Projektbild ---------- */

.home-projects-card:first-child:nth-last-child(3) .home-projects-media {
    aspect-ratio: 4 / 3;
}


/* ---------- Bild bei Hover vergrößern ---------- */

.home-projects-media:hover img {
    transform: scale(1.035);
}


/* ========================================
   PROJEKTE – BILDPLATZHALTER
======================================== */

.home-projects-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    border: 1px dashed rgba(129, 94, 65, 0.35);

    color: var(--color-wood);

    background:
        repeating-linear-gradient(135deg,
            transparent 0,
            transparent 13px,
            rgba(129, 94, 65, 0.035) 13px,
            rgba(129, 94, 65, 0.035) 14px);
}


/* ---------- Platzhaltertext ---------- */

.home-projects-placeholder span {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}


/* ========================================
   PROJEKTE – KARTENINHALT
======================================== */

.home-projects-card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    flex: 1;

    padding: 1.5rem 0;

    border-bottom: 1px solid rgba(25, 25, 25, 0.15);
}


/* ---------- Kategorie ---------- */

.home-projects-category {
    margin: 0 0 0.75rem;

    color: var(--color-wood);

    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}


/* ---------- Projekttitel ---------- */

.home-projects-title {
    margin: 0 0 1rem;

    color: var(--color-ink);

    font-size: clamp(1.35rem, 2vw, 1.8rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.035em;
}


/* ---------- Titellink ---------- */

.home-projects-title a {
    color: inherit;
    text-decoration: none;
}

.home-projects-title a:hover {
    color: var(--color-wood);
}


/* ---------- Kurzbeschreibung ---------- */

.home-projects-description {
    margin: 0 0 1.5rem;

    color: rgba(25, 25, 25, 0.65);

    font-size: 0.9rem;
    line-height: 1.75;

    white-space: pre-line;
    overflow-wrap: break-word;
}


/* ========================================
   PROJEKTE – WEITERFÜHRENDER LINK
======================================== */

.home-projects-link {
    display: inline-flex;
    align-items: center;

    gap: 0.75rem;

    margin-top: 0;

    color: var(--color-wood);

    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;

    transition: gap 250ms ease;
}


/* ---------- Link Hover ---------- */

.home-projects-link:hover {
    gap: 1.1rem;
}


/* ---------- Tastaturfokus ---------- */

.home-projects-all:focus-visible,
.home-projects-media:focus-visible,
.home-projects-title a:focus-visible,
.home-projects-link:focus-visible {
    outline: 2px solid var(--color-copper-hover);
    outline-offset: 4px;
}


/* ========================================
   PROJEKTE – TABLET
======================================== */

@media (max-width: 1023px) {

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

    .home-projects-card:first-child:nth-last-child(3) {
        grid-row: auto;
    }

    .home-projects-card:first-child:nth-last-child(3) .home-projects-media {
        aspect-ratio: 16 / 10;
    }

    .home-projects-card:nth-child(3) {
        grid-column: 1 / -1;
    }

    .home-projects-link {
        margin-top: auto;
    }

}


/* ========================================
   PROJEKTE – MOBILE
======================================== */

@media (max-width: 767px) {

    .home-projects {
        padding: 4.5rem 0;
    }

    .home-projects-header {
        flex-direction: column;
        align-items: flex-start;

        gap: 2rem;
    }

    .home-projects-eyebrow {
        font-size: 0.6rem;
    }

    .home-projects-heading {
        font-size: clamp(2rem, 8vw, 2.8rem);
    }

    .home-projects-grid {
        grid-template-columns: minmax(0, 1fr);

        gap: 3rem;
    }

    .home-projects-card:nth-child(n) {
        grid-column: 1;
        grid-row: auto;
    }

    .home-projects-media,
    .home-projects-card:first-child:nth-last-child(3) .home-projects-media {
        aspect-ratio: 4 / 3;
    }

    .home-projects-card-content {
        padding-top: 1.25rem;
    }

    .home-projects-title {
        font-size: 1.4rem;
    }

}


/* ========================================
   PROJEKTE – REDUZIERTE BEWEGUNG
======================================== */

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

    .home-projects-media img,
    .home-projects-all,
    .home-projects-link {
        transition: none;
    }

    .home-projects-media:hover img {
        transform: none;
    }

}