@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

:root {
    --col1: #160f29;
    --col2: #1a2b3e;
    --col3: #1d4653;
    --col4: #206268;
    --col5: #237d7d;
    --creme: #a2785b;
    --linen: #ece7e2;
    --inkwell: #2c3639;
    --lunar: #3f4e4f;
    --lait: #dcd7c9;
    --primary: var(--inkwell);
    --secondary: var(--lunar);
    --accent: var(--col5);
    --text-light: var(--lait);
    --text-dark: var(--col5);
    --muted: #888;
    --secondary-color: var(--secondary);
    --accent-color: var(--accent);
    --muted-color: var(--muted);
    --text-color: var(--text-light);
}

/* Safari/iOS Sticky-Fix */
html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    background: var(--primary);
    color: var(--text-light);
}

body {
    margin: 0;
    padding: 0;
    overflow-x: visible;
    background: transparent;
    color: inherit;
}

* {
    box-sizing: border-box;
    font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial
}

/* Header */
.site-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2.2vh 3vw;
    background: linear-gradient(180deg, rgba(0, 0, 0, .25), transparent);
    backdrop-filter: saturate(1.1);
}

.site-header .brand img {
    width: 8vw;
    max-width: 160px;
    height: auto;
    display: block
}

/* Navigation */
.main-nav {
    display: flex;
    align-items: center;
    gap: 1.2vw
}

.main-nav a {
    position: relative;
    color: var(--text-light);
    text-decoration: none;
    font-size: 1.1rem;
    padding: .6vh .6vw;
    border-radius: 1.2vh;
    transition: filter .2s, opacity .2s, transform .2s;
}

.main-nav a:hover {
    opacity: .9;
    transform: translateY(-0.06em)
}

.main-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.4vh;
    width: 0;
    height: 0.3vh;
    background: currentColor;
    transition: width .25s ease;
}

.main-nav a:hover::after {
    width: 100%
}

/* Kontakt-Button ohne ::after */
.main-nav .cta {
    background: var(--accent);
    color: #fff;
    padding: .9vh 1.2vw;
    border-radius: 2vh;
}

.main-nav .cta::after {
    content: none
}

.main-nav .cta:hover {
    filter: brightness(.95);
    transform: translateY(-0.06em)
}

/* Breadcrumbs */
.breadcrumbs {
    max-width: 1200px;
    margin: 2vh auto 0;
    padding: 0 4vw
}

.breadcrumbs ol {
    display: flex;
    gap: .6vw;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .95rem;
    opacity: .9
}

.breadcrumbs a {
    color: var(--text-light);
    text-decoration: none;
    border-bottom: .3vh solid transparent
}

.breadcrumbs a:hover {
    border-bottom-color: currentColor
}

.breadcrumbs li[aria-current="page"] {
    opacity: .8
}

/* Hero (rundes Bild) */
.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4vw;
    align-items: center;
    min-height: 60vh;
    padding: 8vh 4vw 4vh;
    max-width: 1200px;
    margin: 0 auto
}

.hero-media {
    width: min(38vw, 44vh);
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 1vh 3vh rgba(0, 0, 0, .35);
    justify-self: center;
}

.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.hero-copy h1 {
    font-size: 2.4rem;
    line-height: 1.2;
    margin: 0 0 2vh
}

.hero-copy p {
    font-size: 1.2rem;
    margin: 0 0 3vh
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1.2vh 1.6vw;
    border-radius: 2.4vh;
    text-decoration: none;
    font-weight: 600
}

.btn--primary {
    background: var(--accent);
    color: #fff
}

.btn--ghost {
    background: transparent;
    color: var(--text-light);
    outline: .3vh solid var(--text-light)
}

.btn:hover {
    filter: brightness(.95);
    transform: translateY(-0.1em);
    transition: .2s
}

/* Content */
.content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4vh 4vw 10vh
}

.content section {
    margin: 8vh 0
}

/* Benefits */
.benefits h2,
.services h2,
.process h2,
.deliverables h2,
.faq h2,
.crosslinks h2 {
    font-size: 2rem;
    margin: 0 0 3vh
}

.benefits .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2vh 2vw;
    padding-left: 1.2em
}

.benefits li {
    line-height: 1.6
}

/* Service cards */
.service-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2vw
}

.card {
    background: var(--secondary);
    border-radius: 1vw;
    padding: 3vh 2vw;
    box-shadow: 0 1.5vh 3vh rgba(0, 0, 0, .25)
}

.card h3 {
    margin: 0 0 1vh;
    color: var(--text-light);
    font-size: 1.4rem
}

.card p {
    margin: 0
}

/* Pillars */
.pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2vw;
    margin-top: 3vh
}

.pillar {
    background: var(--secondary);
    border-radius: .9vw;
    padding: 2.2vh 1.6vw
}

.pillar h4 {
    margin: 0 0 .6vh;
    color: var(--text-dark)
}

/* Process */
.steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.2vw;
    counter-reset: step
}

.steps li {
    background: var(--secondary);
    border-radius: 1vw;
    padding: 2.2vh 1.6vw;
    list-style: none;
    position: relative
}

.steps li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    top: -1.6vh;
    left: -1vw;
    background: var(--accent);
    color: #fff;
    width: 3.2vh;
    height: 3.2vh;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-weight: 700
}

.microcopy {
    opacity: .85;
    margin-top: 1.2vh
}

/* Deliverables */
.deliverables .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2vh 2vw;
    padding-left: 1.2em
}

.deliverables li {
    line-height: 1.6
}

/* CTA band */
.cta-band {
    margin: 6vh auto 0;
    display: flex;
    gap: 1.2vw;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 2.6vh 2vw;
    background: var(--secondary);
    border-radius: 1vw;
    max-width: 1200px
}

.cta-band .btn {
    box-shadow: 0 .5vh 1vh rgba(0, 0, 0, .15)
}

/* FAQ – schlicht */
.faq details {
    background: var(--secondary);
    border-radius: .9vw;
    padding: 1.8vh 1.4vw;
    margin: 1vh 0
}

.faq summary {
    cursor: pointer;
    font-weight: 700
}

.faq p {
    margin: 1vh 0 0
}

/* Crosslinks */
.cross-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2vw
}

.cross-item {
    display: block;
    background: var(--secondary);
    padding: 2.2vh 1.6vw;
    border-radius: .9vw;
    text-decoration: none;
    color: var(--text-light)
}

.cross-item:hover {
    filter: brightness(.98)
}

/* Image Utilities (optional) */
.img-round {
    width: min(38vw, 44vh);
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 1vh 3vh rgba(0, 0, 0, .35)
}

.img-round>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

/* Responsive */
@media (max-width: 1100px) {
    .hero {
        grid-template-columns: 1fr;
        min-height: auto
    }

    .hero-media {
        width: min(60vw, 44vh)
    }

    .benefits .grid {
        grid-template-columns: 1fr
    }

    .service-cards {
        grid-template-columns: 1fr
    }

    .pillars {
        grid-template-columns: repeat(2, 1fr)
    }

    .steps {
        grid-template-columns: repeat(2, 1fr)
    }

    .deliverables .grid {
        grid-template-columns: 1fr
    }

    .cross-grid {
        grid-template-columns: 1fr
    }
}

@media (max-width: 600px) {
    .site-header .brand img {
        width: 34vw
    }

    .hero-media {
        width: 65vw
    }

    .hero-copy h1 {
        font-size: 1.8rem
    }

    .hero-copy p {
        font-size: 1.05rem
    }
}