:root {
    --color-background: #07120f;
    --color-background-soft: #0b1914;
    --color-surface: #10251d;
    --color-surface-light: #183528;
    --color-forest: #173e2e;
    --color-forest-light: #2e6a4c;
    --color-accent: #cce64b;
    --color-accent-soft: #e4f38a;
    --color-offwhite: #f2f0e8;
    --color-sage: #dbe3d8;
    --color-ink: #14221a;
    --color-text: #f7f8f4;
    --color-text-muted: #b8c4bd;
    --pp-project-gold: #c6a15b;
    --color-border: rgba(255, 255, 255, 0.13);
    --font-main: "Segoe UI", Arial, Helvetica, sans-serif;
    --container-width: 1220px;
    --header-height: 78px;
    --radius-small: 10px;
    --radius-medium: 22px;
    --transition: 180ms ease;
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    color: var(--color-text);
    background: var(--color-background);
    font-family: var(--font-main);
    line-height: 1.6;
}

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

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

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    font: inherit;
}

.container {
    width: min(calc(100% - 48px), var(--container-width));
    margin-inline: auto;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1000;
    padding: 10px 14px;
    color: var(--color-background);
    background: var(--color-accent);
    border-radius: var(--radius-small);
    transform: translateY(-160%);
}

.skip-link:focus {
    transform: translateY(0);
}

/* Navigation */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: var(--header-height);
    border-bottom: 1px solid var(--color-border);
    background: rgba(7, 18, 15, 0.82);
    backdrop-filter: blur(18px);
    transition: min-height var(--transition), background var(--transition);
}

.site-header.is-scrolled {
    min-height: 66px;
    background: rgba(7, 18, 15, 0.95);
}

.header-inner {
    min-height: 86px;

    display: grid;
    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 38px;
}


/* =========================================================
   GLOBAL HEADER / BRAND
   ========================================================= */

.brand {
    display: inline-flex;
    align-items: center;
    gap: 13px;

    text-decoration: none;
    letter-spacing: -0.02em;
}


.brand-logo-full {
    display: block;

    width: 360px;
    height: auto;

    object-fit: contain;
}

.main-navigation {
    justify-self: center;

    display: flex;
    align-items: center;

    gap: 22px;
}

.header-cv {
    min-height: 42px;

    padding: 0 18px;

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

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

    gap: 8px;
}

.main-navigation > a,
.nav-dropdown-trigger {
    position: relative;

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

    gap: 7px;

    padding: 33px 0 29px;

    color: var(--color-text-muted);

    font-size: 0.96rem;
    font-weight: 600;

    line-height: 1;

    text-decoration: none;

    transition: color var(--transition);
}

.main-navigation > a::after,
.nav-dropdown-trigger::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 20px;

    height: 2px;

    background: var(--color-accent);

    transform: scaleX(0);
    transform-origin: left;

    transition: transform var(--transition);
}


.main-navigation > a:hover,
.main-navigation > a:focus-visible,
.main-navigation > a.is-active,
.nav-dropdown-trigger:hover,
.nav-dropdown-trigger:focus-visible,
.nav-dropdown-trigger.is-active {
    color: var(--color-text);
}


.main-navigation > a:hover::after,
.main-navigation > a:focus-visible::after,
.main-navigation > a.is-active::after,
.nav-dropdown-trigger:hover::after,
.nav-dropdown-trigger:focus-visible::after,
.nav-dropdown-trigger.is-active::after {
    transform: scaleX(1);
}



/* =========================================================
   GLOBAL PROJECT DROPDOWN
   ========================================================= */

.nav-dropdown {
    position: relative;

    display: flex;
    align-items: center;
}


.nav-dropdown-chevron {
    position: relative;

    top: -1px;

    color: var(--color-accent);

    font-size: 0.83rem;

    transition: transform 180ms ease;
}


.nav-dropdown:hover .nav-dropdown-chevron,
.nav-dropdown:focus-within .nav-dropdown-chevron {
    transform: rotate(180deg);
}


.nav-dropdown-menu {
    position: absolute;

    top: calc(100% - 5px);
    left: 0;

    z-index: 150;

    width: 430px;

    padding: 20px;

    opacity: 0;
    visibility: hidden;

    transform:
        translate(0%, 12px);

    color: #102018;

    background:
        rgba(248, 246, 240, 0.98);

    border:
        1px solid
        rgba(16, 32, 24, 0.12);

    border-radius: 18px;

    box-shadow:
        0 24px 70px
        rgba(0, 0, 0, 0.20);

    backdrop-filter: blur(18px);

    transition:
        opacity 180ms ease,
        visibility 180ms ease,
        transform 180ms ease;
}


.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;

    transform:
        translate(0, 0);
}


.nav-dropdown-label {
    margin:
        2px
        10px
        13px;

    color: #607067;

    font-size: 0.63rem;
    font-weight: 850;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.nav-dropdown-menu > a {
    display: grid;

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

    gap: 13px;

    align-items: center;

    padding:
        13px
        11px;

    color: #102018;

    border-radius: 10px;

    text-decoration: none;

    transition:
        background 160ms ease,
        transform 160ms ease;
}


.nav-dropdown-menu > a::after {
    display: none;
}


.nav-dropdown-menu > a:hover,
.nav-dropdown-menu > a:focus-visible {
    color: #102018;

    background:
        rgba(47, 106, 80, 0.08);

    transform: translateX(3px);
}


.nav-dropdown-menu > a > span {
    color: #6f8a7a;

    font-size: 0.65rem;
    font-weight: 850;

    letter-spacing: 0.1em;
}


.nav-dropdown-menu > a > div {
    display: grid;

    gap: 4px;
}


.nav-dropdown-menu strong {
    color: #102018;

    font-size: 0.91rem;
    font-weight: 850;
}


.nav-dropdown-menu small {
    color: #6a756f;

    font-size: 0.68rem;
    font-weight: 500;
}


/* unterer Link */

.nav-dropdown-footer {
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(16, 32, 24, 0.11);
}

.nav-dropdown-footer a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    color: #2f6a50;
    background: transparent;
    font-size: 0.77rem;
    font-weight: 850;
    text-decoration: none;
}

.nav-dropdown-footer a:hover,
.nav-dropdown-footer a:focus-visible {
    color: #102018;
    background: rgba(47, 106, 80, 0.08);
}

.nav-dropdown-footer a span {
    transition: transform 180ms ease;
}

.nav-dropdown-footer a:hover span,
.nav-dropdown-footer a:focus-visible span {
    color: #102018;
    transform: translateX(4px);
}

.menu-button {
    display: none;
    width: 46px;
    height: 46px;
    padding: 11px;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    background: transparent;
    border-radius: var(--radius-small);
    cursor: pointer;
}

.menu-button-line {
    display: block;
    width: 100%;
    height: 2px;
    margin: 5px 0;
    background: currentColor;
    transition: transform var(--transition), opacity var(--transition);
}








/* =========================================================
   GLOBALES ACTION-SYSTEM
   ========================================================= */

/* Buttons: Primary / Secondary */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 50px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition:
        transform var(--transition),
        color var(--transition),
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.button > span {
    transition: transform var(--transition);
}

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

.button:hover > span {
    transform: translateX(4px);
}

.button:focus-visible,
.main-navigation a:focus-visible,
.brand:focus-visible,
.menu-button:focus-visible,
.scroll-cue:focus-visible {
    outline: 3px solid rgba(204, 230, 75, 0.38);
    outline-offset: 4px;
}

/* Primary: wichtigste Aktion */
.button-primary {
    color: #071610;
    background: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: 0 14px 36px rgba(204, 230, 75, 0.12);
}

.button-primary:hover {
    color: #071610;
    background: var(--color-accent-soft);
    border-color: var(--color-accent-soft);
    box-shadow: 0 18px 42px rgba(204, 230, 75, 0.19);
}

/* Secondary auf dunklen Flächen */
.button-secondary,
.button-outline {
    color: #ffffff;
    background: transparent;
    border-color: rgba(204, 230, 75, 0.48);
}

.button-secondary:hover,
.button-outline:hover {
    color: #ffffff;
    background: rgba(204, 230, 75, 0.08);
    border-color: var(--color-accent);
}

/* Secondary auf hellen Flächen */
.button-secondary-dark {
    color: #214d39;
    background: transparent;
    border-color: rgba(33, 77, 57, 0.36);
}

.button-secondary-dark:hover {
    color: #10201a;
    background: rgba(47, 106, 80, 0.07);
    border-color: #2f6a50;
}

.button-small {
    min-height: 42px;
    padding: 0 17px;
    font-size: 0.8rem;
}

/* Tertiary Textlinks */

.project-link,
.home-overview-link,
.about-teaser-link,
.career-text-link {
    align-self: flex-start;
    margin-top: auto;
    padding-top: 30px;
    font-size: 0.84rem;
    font-weight: 850;
}

.project-link > span,
.home-overview-link > span,
.about-teaser-link > span,
.career-text-link > span {
    transition: transform var(--transition);
}

.project-link:hover > span,
.project-link:focus-visible > span,
.home-overview-link:hover > span,
.home-overview-link:focus-visible > span,
.about-teaser-link:hover > span,
.about-teaser-link:focus-visible > span,
.career-text-link:hover > span,
.career-text-link:focus-visible > span {
    transform: translateX(4px);
}

/* Startbereich */

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: calc(100vh - var(--header-height));
    display: grid;
    align-items: center;
    padding: 76px 0 96px;
    background:
        radial-gradient(circle at 75% 26%, rgba(46, 106, 76, 0.25), transparent 28%),
        linear-gradient(135deg, #07120f 0%, #091712 52%, #06100d 100%);
    border-bottom: 1px solid var(--color-border);
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
    align-items: center;
    gap: clamp(44px, 7vw, 92px);
}

.eyebrow {
    margin: 0 0 18px;
    color: var(--color-accent);
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.eyebrow-dark {
    color: var(--color-forest-light);
}

h1,
h2,
h3,
p {
    overflow-wrap: break-word;
}

h1 {
    max-width: 800px;
    margin: 0;
    font-size: clamp(3.45rem, 6.25vw, 6.2rem);
    line-height: 0.95;
    letter-spacing: -0.063em;
}

h1 span {
    color: var(--color-accent);
}

.hero-statement {
    margin: 28px 0 0;
    color: var(--color-text);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.025em;
}

.hero-lead {
    max-width: 650px;
    margin: 22px 0 0;
    color: var(--color-text-muted);
    font-size: clamp(1rem, 1.4vw, 1.17rem);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.availability {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 26px 0 0;
    color: #dce5df;
    font-size: 0.9rem;
}

.availability-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    background: var(--color-accent);
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(204, 230, 75, 0.09);
}

.hero-visual {
    position: relative;
    min-height: 610px;
    display: grid;
    place-items: center;
}


.portrait-brush {
    position: absolute;
    z-index: 2;
    width: 510px;
    height: 230px;
    background: var(--color-accent);
    border-radius: 52% 48% 42% 58%;
    opacity: 0.9;
    transform: rotate(-12deg);
    filter: blur(0.5px);
}

.portrait-orbit {
    position: absolute;
    z-index: 1;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(204, 230, 75, 0.18);
    border-radius: 50%;
    transform: translate(40px, 12px);
}

.portrait-dots {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 80px;
    width: 150px;
    height: 150px;
    background-image: radial-gradient(rgba(204, 230, 75, 0.68) 1.3px, transparent 1.3px);
    background-size: 14px 14px;
    opacity: 0.45;
}

.portrait-caption {
    position: absolute;
    z-index: 5;
    left: 4px;
    bottom: 34px;
    display: flex;
    gap: 8px;
    transform: rotate(-90deg) translateY(-100%);
    transform-origin: left bottom;
}

.portrait-caption span {
    color: var(--color-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 24px;
    display: grid;
    justify-items: center;
    gap: 2px;
    color: var(--color-text-muted);
    font-size: 0.67rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transform: translateX(-50%);
}

.scroll-cue span:last-child {
    color: var(--color-accent);
    font-size: 1rem;
    animation: cue-bounce 1.8s ease-in-out infinite;
}

.hero-decoration {
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.hero-decoration-one {
    top: 10%;
    left: -130px;
    width: 380px;
    height: 380px;
    border: 1px solid rgba(46, 106, 76, 0.25);
    border-radius: 50%;
}

.hero-decoration-two {
    right: -90px;
    bottom: -170px;
    width: 430px;
    height: 430px;
    background-image: radial-gradient(rgba(204, 230, 75, 0.28) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: 0.2;
    mask-image: linear-gradient(to top, black, transparent);
}

/* Heller Schwerpunktbereich */

.section-light {
    color: var(--color-ink);
    background: var(--color-offwhite);
}

.expertise {
    padding: 120px 0 130px;
}

.section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
    align-items: end;
    gap: 70px;
    margin-bottom: 72px;
}

.section-heading h2 {
    margin: 0;
    font-size: clamp(2.5rem, 5vw, 4.8rem);
    line-height: 1.02;
    letter-spacing: -0.052em;
}

.section-heading > p {
    max-width: 520px;
    margin: 0 0 4px;
    color: #4d5b53;
    font-size: 1.03rem;
}

/* Startseite: Profil-Intro mit klarer visueller Klammer */
.section-heading-expertise {
    align-items: center;
    gap: 72px;
}

.section-heading-expertise .section-heading-copy {
    position: relative;
}

.section-heading-expertise h2 {
    max-width: 9.5ch;
}

.section-heading-expertise h2 span {
    display: block;
    color: var(--color-forest-light);
}

.section-heading-expertise .section-heading-copy::after {
    content: "";
    display: block;
    width: 120px;
    height: 6px;
    margin-top: 26px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--color-forest-light) 0%,
        rgba(47, 125, 86, 0.18) 100%
    );
}

.section-heading-note {
    padding: 30px 32px;
    border: 1px solid rgba(20, 34, 26, 0.10);
    border-radius: 28px;
    background: linear-gradient(
        180deg,
        rgba(229, 235, 226, 0.65) 0%,
        rgba(217, 227, 212, 0.90) 100%
    );
    box-shadow: 0 20px 40px rgba(20, 34, 26, 0.06);
}

.section-heading-note p {
    max-width: 520px;
    margin: 0;
    color: #4d5b53;
    font-size: 1.03rem;
    line-height: 1.7;
}

.section-heading-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.section-heading-facts li {
    padding: 8px 12px;
    border: 1px solid rgba(20, 34, 26, 0.10);
    border-radius: 999px;
    color: #294536;
    background: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.expertise-list {
    border-top: 1px solid rgba(20, 34, 26, 0.18);
}

.expertise-item {
    position: relative;
    display: grid;
    grid-template-columns: 90px minmax(0, 1.15fr) minmax(290px, 0.85fr);
    align-items: center;
    gap: 42px;
    padding: 44px 0;
    border-bottom: 1px solid rgba(20, 34, 26, 0.18);
    transition: transform var(--transition), padding-left var(--transition);
}

.expertise-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--color-accent);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform var(--transition);
}

.expertise-item:hover {
    padding-left: 20px;
}

.expertise-item:hover::before {
    transform: scaleY(1);
}

.expertise-number {
    color: var(--color-forest-light);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.15em;
}

.expertise-copy h3 {
    margin: 0;
    font-size: clamp(1.45rem, 2.5vw, 2.15rem);
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.expertise-copy p {
    max-width: 650px;
    margin: 13px 0 0;
    color: #526057;
}

.expertise-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.expertise-tags li {
    padding: 7px 11px;
    color: #294536;
    background: var(--color-sage);
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
}


/* Reveal-Animation */

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 650ms ease, transform 650ms ease;
}

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


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

.projects-section {
    position: relative;
    padding: 120px 0 125px;
    color: #10201a;
    background:
        radial-gradient(
            circle at 92% 10%,
            rgba(47, 106, 80, 0.08),
            transparent 28%
        ),
        #e1ebe2;
    border-top: 1px solid rgba(20, 34, 26, 0.08);
}

.projects-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(390px, 0.72fr);
    align-items: center;
    gap: 92px;
    margin-bottom: 64px;
}

.projects-intro-heading {
    min-width: 0;
}

.projects-intro h2 {
    max-width: 690px;
    margin: 0;
    color: #10201a;
    font-size: clamp(2.8rem, 4.7vw, 4.8rem);
    font-weight: 900;
    line-height: 0.99;
    letter-spacing: -0.055em;
}

.projects-intro h2 span {
    display: block;
    color: #2f7657;
}

/* Rechte Infobox neben der H2 */
.projects-intro-note {
    align-self: center;
    padding: 30px 32px;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.82),
            rgba(247, 249, 245, 0.70)
        );
    border: 1px solid rgba(20, 34, 26, 0.12);
    border-radius: 24px;
    box-shadow: 0 18px 42px rgba(20, 34, 26, 0.055);
}

.projects-intro-note p {
    max-width: 500px;
    margin: 0;
    color: #4d5b53;
    font-size: 0.97rem;
    line-height: 1.7;
}

.projects-intro-note-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.projects-intro-note-tags span {
    padding: 7px 11px;
    color: #294536;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(20, 34, 26, 0.10);
    border-radius: 999px;
    font-size: 0.69rem;
    font-weight: 800;
}

.projects-grid-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
}

.project-card {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(16, 32, 26, 0.12);
    border-radius: 22px;
    box-shadow: 0 20px 55px rgba(16, 32, 26, 0.07);
    transition:
        transform 220ms ease,
        box-shadow 220ms ease;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 28px 70px rgba(16, 32, 26, 0.13);
}

.project-card-home {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.project-image {
    position: relative;
    width: 100%;
    height: 390px;
    min-height: 390px;
    overflow: hidden;
    background: #ece8df;
}

.project-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 400ms ease;
}

.project-card:hover .project-image img {
    transform: scale(1.025);
}

.project-image-outdoor img {
    object-position: center top;
}

.project-image-novaring img {
    object-position: center center;
}

.project-content {
    padding: 30px;
}

.project-card-home .project-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 330px;
}

.project-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-bottom: 17px;
    color: #617068;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.project-meta span:first-child {
    color: #2f6a50;
}

.project-content h3 {
    margin: 0;
    color: #10201a;
    font-size: clamp(1.55rem, 2.4vw, 2.35rem);
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.project-content p {
    max-width: 680px;
    margin: 18px 0 0;
    color: #526059;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 24px 0 0;
    list-style: none;
}

.project-tags li {
    padding: 7px 12px;
    color: #294739;
    background: #e7ede7;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}

.project-link {
    align-self: flex-start;
    margin-top: auto;
    padding-top: 30px;
    color: #214d39;
    font-size: 0.86rem;
}

.project-link > span {
    color: #789600;
}

/* Weitere Arbeiten: bewusster Abschluss des Projektbereichs */
.projects-more {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(300px, 0.78fr)
        minmax(380px, 1fr)
        auto;
    align-items: center;
    gap: 58px;
    margin-top: 58px;
    padding: 42px 44px;
    overflow: hidden;
    color: #10201a;
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(20, 34, 26, 0.12);
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(20, 34, 26, 0.055);
}

.projects-more::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: var(--color-accent);
}

.projects-more-eyebrow {
    margin: 0 0 15px;
    color: #2f6a50;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.projects-more h3 {
    max-width: 360px;
    margin: 0;
    color: #10201a;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.projects-more h3 span {
    display: block;
    color: #2f7657;
}

.projects-more-content p {
    max-width: 600px;
    margin: 0 0 12px;
    color: #59665f;
    font-size: 0.91rem;
    line-height: 1.65;
}

.projects-more-content p:last-of-type {
    margin-bottom: 0;
}

.projects-more-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 18px;
}

.projects-more-tags span {
    padding: 6px 10px;
    color: #294536;
    background: #e3ebe3;
    border-radius: 999px;
    font-size: 0.67rem;
    font-weight: 750;
}

.projects-more-button {
    flex-shrink: 0;
    white-space: nowrap;
}

/* =========================================================
   STARTSEITE: PRAXIS & WEITERENTWICKLUNG
   ========================================================= */

.home-overview-section {
    position: relative;
    overflow: hidden;
    padding: 125px 0;
    color: #10201a;
    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(198, 161, 91, 0.06),
            transparent 25%
        ),
        #f7f3ed;
    border-top: 1px solid rgba(20, 34, 26, 0.10);
}

.home-overview-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    align-items: end;
    gap: 75px;
    margin-bottom: 58px;
}

.home-overview-heading h2 {
    max-width: 780px;
    margin: 0;
    font-size: clamp(2.7rem, 5vw, 5rem);
    line-height: 1.02;
    letter-spacing: -0.055em;
}

.home-overview-heading h2 span {
    color: #2f6a50;
}

.home-overview-heading > p {
    max-width: 520px;
    margin: 0 0 7px;
    color: #526059;
    font-size: 1.05rem;
}

.home-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.home-overview-card {
    position: relative;
    min-height: 490px;
    display: flex;
    flex-direction: column;
    padding: 42px;
    overflow: hidden;
    border-radius: 24px;
}

.home-overview-card-dark {
    color: var(--color-text);
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(201, 230, 58, 0.12),
            transparent 30%
        ),
        #0b1815;
}

.home-overview-card-light {
    color: #10201a;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(16, 32, 26, 0.13);
}

.home-overview-number {
    position: absolute;
    top: 28px;
    right: 32px;
    color: rgba(201, 230, 58, 0.42);
    font-size: 3.8rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.07em;
}

.home-overview-card-light .home-overview-number {
    color: rgba(47, 106, 80, 0.23);
}

.home-overview-label {
    margin: 0 0 18px;
    color: var(--color-accent);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.home-overview-card-light .home-overview-label {
    color: #2f6a50;
}

.home-overview-card h3 {
    max-width: 560px;
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 2.7rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.home-overview-card > p:not(.home-overview-label) {
    max-width: 590px;
    margin: 23px 0 0;
    color: var(--color-text-muted);
}

.home-overview-card-light > p:not(.home-overview-label) {
    color: #59675f;
}

.home-overview-facts {
    display: grid;
    gap: 10px;
    padding: 25px 0 0;
    margin: 25px 0 0;
    border-top: 1px solid var(--color-border);
    list-style: none;
}

.home-overview-card-light .home-overview-facts {
    border-color: rgba(16, 32, 26, 0.15);
}

.home-overview-facts li {
    position: relative;
    padding-left: 19px;
    color: var(--color-text-muted);
    font-size: 0.92rem;
}

.home-overview-card-light .home-overview-facts li {
    color: #59675f;
}

.home-overview-facts li::before {
    content: "";
    position: absolute;
    top: 0.7em;
    left: 0;
    width: 7px;
    height: 7px;
    background: var(--color-accent);
    border-radius: 50%;
}

.home-overview-link {
    align-self: flex-start;
    margin-top: auto;
    padding-top: 30px;
    color: var(--color-accent);
    font-size: 0.86rem;
}

.home-overview-card-light .home-overview-link {
    color: #2f6a50;
}


/* =========================================================
   STARTSEITE: KURZER ÜBER-MICH-BEREICH
   ========================================================= */

.about-teaser {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    align-items: center;
    gap: 45px;
    margin-top: 26px;
    padding: 38px 42px;
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(16, 32, 26, 0.13);
    border-radius: 20px;
}

.about-teaser-label {
    margin: 0;
    color: #2f6a50;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.about-teaser-content h3 {
    margin: 0;
    color: #10201a;
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.about-teaser-content p {
    max-width: 670px;
    margin: 10px 0 0;
    color: #59675f;
}

.about-teaser-link {
    color: #2f6a50;
    font-size: 0.86rem;
    white-space: nowrap;
}

.about-teaser-link > span {
    color: #789600;
}


/* =========================================================
   STARTSEITE: KONTAKTAUFRUF
   ========================================================= */

.contact-cta {
    position: relative;
    overflow: hidden;
    padding: 130px 0;
    color: var(--color-text);
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(201, 230, 58, 0.13),
            transparent 28%
        ),
        #07110f;
}

.contact-cta::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -150px;
    width: 420px;
    height: 420px;
    opacity: 0.14;
    background-image:
        radial-gradient(
            rgba(201, 230, 58, 0.7) 1px,
            transparent 1px
        );
    background-size: 18px 18px;
    pointer-events: none;
}

.contact-cta-inner {
    position: relative;
    z-index: 2;
}

.contact-cta h2 {
    max-width: 850px;
    margin: 0;
    font-size: clamp(3rem, 6vw, 6.3rem);
    line-height: 0.98;
    letter-spacing: -0.06em;
}

.contact-cta h2 span {
    color: var(--color-accent);
}

.contact-cta p:not(.eyebrow) {
    max-width: 680px;
    margin: 28px 0 0;
    color: var(--color-text-muted);
    font-size: 1.08rem;
}

.contact-cta .button {
    margin-top: 38px;
}


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

.site-footer {
    margin-top: 0;
    color: var(--color-text);
    background: #050c09;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}


/* =========================================================
   FOOTER – HAUPTBEREICH
   ========================================================= */

.footer-content {
    display: grid;

    grid-template-columns:
        minmax(300px, 1.15fr)
        minmax(360px, 0.95fr)
        auto;

    align-items: center;

    gap: 58px;

    padding-top: 40px;
    padding-bottom: 38px;
}


/* =========================================================
   FOOTER – MARKE
   ========================================================= */

.footer-brand-area {
    max-width: 430px;
}

.footer-brand {
    display: inline-block;

    text-decoration: none;
}

.footer-logo {
    display: block;

    width: 280px;
    height: auto;
}

.footer-brand-area > p {
    max-width: 395px;

    margin: 16px 0 0;

    color: #89958e;

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


/* =========================================================
   FOOTER – NAVIGATION
   ========================================================= */

.footer-navigation {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 16px 28px;
}

.footer-navigation a {
    position: relative;

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

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

    text-decoration: none;

    transition: color var(--transition);
}

.footer-navigation a::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -6px;

    height: 1px;

    background: var(--color-accent);

    transform: scaleX(0);
    transform-origin: left;

    transition: transform var(--transition);
}

.footer-navigation a:hover,
.footer-navigation a:focus-visible {
    color: #ffffff;
}

.footer-navigation a:hover::after,
.footer-navigation a:focus-visible::after {
    transform: scaleX(1);
}


/* =========================================================
   FOOTER – AKTIONEN
   ========================================================= */

.footer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 12px;
}

.footer-contact,
.footer-cv {
    min-height: 44px;

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

    gap: 9px;

    padding: 0 18px;

    border: 1px solid transparent;
    border-radius: 999px;

    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1;

    white-space: nowrap;

    text-decoration: none;

    transition:
        transform var(--transition),
        color var(--transition),
        background var(--transition),
        border-color var(--transition);
}

.footer-contact > span,
.footer-cv > span {
    transition: transform var(--transition);
}

.footer-contact:hover,
.footer-contact:focus-visible,
.footer-cv:hover,
.footer-cv:focus-visible {
    transform: translateY(-2px);
}

.footer-contact:hover > span,
.footer-contact:focus-visible > span,
.footer-cv:hover > span,
.footer-cv:focus-visible > span {
    transform: translateX(3px);
}


/* Primary */

.footer-contact {
    color: #071610;

    background: var(--color-accent);
    border-color: var(--color-accent);
}

.footer-contact:hover,
.footer-contact:focus-visible {
    color: #071610;

    background: var(--color-accent-soft);
    border-color: var(--color-accent-soft);
}


/* Secondary */

.footer-cv {
    color: rgba(255, 255, 255, 0.78);

    background: transparent;

    border-color: rgba(255, 255, 255, 0.18);
}

.footer-cv:hover,
.footer-cv:focus-visible {
    color: #ffffff;

    background: rgba(204, 230, 75, 0.06);

    border-color: rgba(204, 230, 75, 0.48);
}


/* =========================================================
   FOOTER – UNTERE ZEILE
   ========================================================= */

.footer-bottom {
    min-height: 54px;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 30px;

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

.footer-bottom p {
    margin: 0;

    color: #758078;

    font-size: 0.74rem;
}

.footer-legal {
    display: flex;
    align-items: center;

    gap: 24px;
}

.footer-legal a,
.footer-top-link {
    color: #89958e;

    font-size: 0.74rem;

    text-decoration: none;

    transition: color var(--transition);
}

.footer-legal a:hover,
.footer-legal a:focus-visible,
.footer-top-link:hover,
.footer-top-link:focus-visible {
    color: #ffffff;
}

.footer-top-link {
    justify-self: end;

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

    gap: 8px;
}

.footer-top-link span {
    color: var(--color-accent);

    transition: transform var(--transition);
}

.footer-top-link:hover span,
.footer-top-link:focus-visible span {
    transform: translateY(-3px);
}

/* =========================================================
   UNTERSEITEN: GEMEINSAMER EINSTIEG
   ========================================================= */

.subpage-hero {
    position: relative;
    overflow: hidden;
    padding: 120px 0 110px;
    color: var(--color-text);
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(46, 106, 76, 0.27),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #07120f 0%,
            #091712 55%,
            #06100d 100%
        );
    border-bottom: 1px solid var(--color-border);
}

.subpage-decoration {
    position: absolute;
    right: -130px;
    bottom: -190px;
    width: 480px;
    height: 480px;
    opacity: 0.17;
    background-image:
        radial-gradient(
            rgba(204, 230, 75, 0.7) 1px,
            transparent 1px
        );
    background-size: 18px 18px;
    pointer-events: none;
}

.subpage-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    align-items: end;
    gap: 80px;
}

.subpage-hero h1 {
    max-width: 850px;
    font-size: clamp(3.3rem, 6vw, 6.4rem);
}

.subpage-hero-text {
    padding-bottom: 8px;
}

.subpage-hero-text p {
    max-width: 540px;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 1.05rem;
}

.subpage-hero-text p + p {
    margin-top: 18px;
}


/* =========================================================
   WEITERBILDUNGSSEITE: PROFILERWEITERUNG
   ========================================================= */

.learning-positioning-section {
    padding: 115px 0;
    color: var(--color-ink);
    background: var(--color-offwhite);
}

.learning-positioning-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(360px, 0.92fr);
    align-items: end;
    gap: 90px;
}

.learning-positioning-heading h2 {
    max-width: 830px;
    margin: 0;
    font-size: clamp(2.8rem, 5vw, 5.1rem);
    line-height: 1.02;
    letter-spacing: -0.058em;
}

.learning-positioning-heading h2 span {
    color: var(--color-forest-light);
}

.learning-positioning-content p {
    max-width: 620px;
    margin: 0;
    color: #536057;
    font-size: 1.04rem;
}

.learning-positioning-content p + p {
    margin-top: 18px;
}


/* Entwicklungslinie */

.learning-development-line {
    display: grid;
    grid-template-columns:
        minmax(260px, 1fr)
        minmax(160px, 0.45fr)
        minmax(300px, 1fr);
    align-items: center;
    gap: 35px;
    margin-top: 75px;
    padding: 32px 0;
    border-top: 1px solid rgba(20, 34, 26, 0.17);
    border-bottom: 1px solid rgba(20, 34, 26, 0.17);
}

.learning-development-start,
.learning-development-target {
    display: grid;
    gap: 8px;
}

.learning-development-target {
    text-align: right;
}

.learning-development-label {
    color: #68756d;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.learning-development-start strong,
.learning-development-target strong {
    color: var(--color-ink);
    font-size: clamp(1.25rem, 2vw, 1.8rem);
    line-height: 1.15;
}

.learning-development-target strong {
    color: var(--color-forest-light);
}

.learning-development-arrow {
    display: flex;
    align-items: center;
    gap: 12px;
}

.learning-development-arrow span {
    flex: 1;
    height: 1px;
    background:
        linear-gradient(
            to right,
            rgba(46, 106, 76, 0.18),
            var(--color-forest-light)
        );
}

.learning-development-arrow strong {
    color: var(--color-forest-light);
    font-size: 1.5rem;
}


/* =========================================================
   WEITERBILDUNGSSEITE: KOMPETENZFELDER
   ========================================================= */

.learning-competencies-section {
    position: relative;
    overflow: hidden;
    padding: 125px 0;
    color: var(--color-text);
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(46, 106, 76, 0.23),
            transparent 29%
        ),
        #07120f;
}

.learning-competencies-section::after {
    content: "";
    position: absolute;
    left: -120px;
    bottom: -160px;
    width: 430px;
    height: 430px;
    opacity: 0.12;
    background-image:
        radial-gradient(
            rgba(204, 230, 75, 0.7) 1px,
            transparent 1px
        );
    background-size: 18px 18px;
    pointer-events: none;
}

.learning-competencies-intro {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
    align-items: end;
    gap: 75px;
    margin-bottom: 65px;
}

.learning-competencies-intro .eyebrow {
    grid-column: 1 / -1;
    margin-bottom: -45px;
}

.learning-competencies-intro h2 {
    max-width: 820px;
    margin: 0;
    font-size: clamp(2.8rem, 5vw, 5.2rem);
    line-height: 1.01;
    letter-spacing: -0.06em;
}

.learning-competencies-intro h2 span {
    color: var(--color-accent);
}

.learning-competencies-intro > p:last-child {
    max-width: 520px;
    margin: 0 0 7px;
    color: var(--color-text-muted);
    font-size: 1.03rem;
}


/* Kompetenzkarten */

.learning-competencies-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.learning-competency {
    min-height: 530px;
    display: flex;
    flex-direction: column;
    padding: 36px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018)
        );
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    transition:
        transform var(--transition),
        border-color var(--transition),
        background var(--transition);
}

.learning-competency:hover {
    transform: translateY(-5px);
    border-color: rgba(204, 230, 75, 0.35);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.025)
        );
}

.learning-competency-featured {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(204, 230, 75, 0.13),
            transparent 30%
        ),
        var(--color-surface);
}

.learning-competency-current {
    background:
        linear-gradient(
            180deg,
            rgba(204, 230, 75, 0.10) 0%,
            rgba(204, 230, 75, 0.035) 100%
        );
    border-color: rgba(204, 230, 75, 0.28);
}

.learning-competency-current .learning-competency-status {
    color: #102018;
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.learning-competency-current .learning-competency-evidence strong {
    color: var(--color-accent);
}

.learning-competency-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.learning-competency-number {
    color: rgba(204, 230, 75, 0.42);
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.07em;
}

.learning-competency-status {
    padding: 7px 12px;
    color: #dce6df;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.learning-competency-content {
    margin-top: 45px;
}

.learning-competency-category {
    margin: 0 0 13px;
    color: var(--color-accent);
    font-size: 0.73rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.learning-competency h3 {
    max-width: 610px;
    margin: 0;
    font-size: clamp(1.7rem, 2.8vw, 2.65rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.learning-competency-content > p:not(.learning-competency-category) {
    max-width: 620px;
    margin: 21px 0 0;
    color: var(--color-text-muted);
}

.learning-competency-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 27px 0 0;
    list-style: none;
}

.learning-competency-tags li {
    padding: 7px 11px;
    color: #dce6df;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.learning-competency-evidence {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-top: auto;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.learning-competency-evidence > span {
    color: #89968f;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.learning-competency-evidence > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px 16px;
}

.learning-competency-evidence strong {
    color: var(--color-text);
    font-size: 0.83rem;
}


/* =========================================================
   WEITERBILDUNGSSEITE: PRAXISBEZUG
   ========================================================= */

.learning-practice-section {
    padding: 120px 0;
    color: var(--color-ink);
    background: var(--color-offwhite);
}

.learning-practice-layout {
    display: grid;
    grid-template-columns: minmax(310px, 0.78fr) minmax(0, 1.22fr);
    align-items: start;
    gap: 95px;
}

.learning-practice-intro {
    position: sticky;
    top: 120px;
}

.learning-practice-intro h2 {
    max-width: 580px;
    margin: 0;
    font-size: clamp(2.7rem, 4.7vw, 4.8rem);
    line-height: 1.02;
    letter-spacing: -0.058em;
}

.learning-practice-intro h2 span {
    color: var(--color-forest-light);
}

.learning-practice-intro > p:not(.eyebrow) {
    max-width: 520px;
    margin: 25px 0 0;
    color: #56635b;
}

.learning-practice-intro .button {
    margin-top: 32px;
}

.learning-practice-projects {
    border-top: 1px solid rgba(20, 34, 26, 0.17);
}

.learning-practice-project {
    display: grid;
    grid-template-columns: 55px minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    padding: 38px 0;
    border-bottom: 1px solid rgba(20, 34, 26, 0.17);
    transition:
        padding-left var(--transition),
        background var(--transition);
}

.learning-practice-project:hover {
    padding-left: 18px;
}

.learning-practice-index {
    color: var(--color-forest-light);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.learning-practice-type {
    margin: 0 0 7px;
    color: var(--color-forest-light);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.learning-practice-project h3 {
    margin: 0;
    font-size: clamp(1.45rem, 2.5vw, 2.15rem);
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.learning-practice-project div > p:last-child {
    max-width: 640px;
    margin: 12px 0 0;
    color: #59665e;
    font-size: 0.92rem;
}

.learning-practice-arrow {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: var(--color-forest-light);
    border: 1px solid rgba(46, 106, 76, 0.24);
    border-radius: 50%;
    transition:
        color var(--transition),
        background var(--transition),
        transform var(--transition);
}

.learning-practice-project:hover .learning-practice-arrow {
    color: var(--color-background);
    background: var(--color-accent);
    transform: rotate(8deg);
}


/* =========================================================
   WEITERBILDUNGSSEITE: KI-ARBEITSWEISE
   ========================================================= */

.learning-ai-section {
    padding: 0 0 120px;
    color: var(--color-ink);
    background: var(--color-offwhite);
}

.learning-ai-panel {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 50px 75px;
    padding: 58px;
    color: var(--color-text);
    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(204, 230, 75, 0.12),
            transparent 28%
        ),
        #0b1914;
    border-radius: 26px;
    box-shadow: 0 28px 75px rgba(20, 34, 26, 0.16);
}

.learning-ai-label {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    color: var(--color-accent);
}

.learning-ai-label > span {
    font-size: 1.2rem;
    line-height: 1;
}

.learning-ai-label p {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    line-height: 1.5;
    text-transform: uppercase;
}

.learning-ai-content h2 {
    max-width: 800px;
    margin: 0;
    font-size: clamp(2rem, 3.6vw, 3.5rem);
    line-height: 1.06;
    letter-spacing: -0.05em;
}

.learning-ai-content h2 span {
    display: block;
    color: var(--color-accent);
}

.learning-ai-content p {
    max-width: 760px;
    margin: 22px 0 0;
    color: var(--color-text-muted);
}

.learning-ai-content p + p {
    margin-top: 12px;
}

.learning-ai-tools {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.learning-ai-tools span {
    padding: 8px 13px;
    color: #dce6df;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.76rem;
}


/* =========================================================
   WEITERBILDUNGSSEITE: AKTUELLER STAND
   ========================================================= */

.learning-status-section {
    padding: 115px 0;
    color: var(--color-ink);
    background: var(--color-sage);
}

.learning-status-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(430px, 0.9fr);
    align-items: start;
    gap: 95px;
}

.learning-status-heading h2 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(2.7rem, 5vw, 5rem);
    line-height: 1.02;
    letter-spacing: -0.058em;
}

.learning-status-heading h2 span {
    display: block;
    color: var(--color-forest-light);
}

.learning-status-list {
    border-top: 1px solid rgba(20, 34, 26, 0.18);
}

.learning-status-item {
    display: grid;
    grid-template-columns: 16px 1fr;
    align-items: start;
    gap: 17px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(20, 34, 26, 0.18);
}

.learning-status-marker {
    width: 10px;
    height: 10px;
    margin-top: 7px;
    background: transparent;
    border: 2px solid #87948b;
    border-radius: 50%;
}

.learning-status-item.is-complete .learning-status-marker {
    background: var(--color-forest-light);
    border-color: var(--color-forest-light);
    box-shadow: 0 0 0 5px rgba(46, 106, 76, 0.1);
}

.learning-status-item.is-current .learning-status-marker {
    background: var(--color-accent);
    border-color: #829900;
    box-shadow: 0 0 0 5px rgba(204, 230, 75, 0.21);
}

.learning-status-item strong {
    color: var(--color-ink);
    font-size: 0.98rem;
}

.learning-status-item p {
    margin: 4px 0 0;
    color: #606d65;
    font-size: 0.84rem;
}



/* =========================================================
   WEITERBILDUNG – HELLER ABSCHLUSS VOR DEM FOOTER
   ========================================================= */

.learning-closing {
    padding: 102px 0;
    color: #102018;
    background:
        radial-gradient(
            circle at 86% 28%,
            rgba(47, 106, 80, 0.08),
            transparent 28%
        ),
        #f7f3ed;
    border-top: 1px solid rgba(16, 32, 24, 0.10);
}

.learning-closing-grid {
    display: grid;
    grid-template-columns:
        minmax(480px, 1fr)
        minmax(360px, 0.68fr);
    gap: 110px;
    align-items: center;
}

.learning-closing-main h2 {
    max-width: 760px;
    margin: 16px 0 0;
    color: #102018;
    font-size: clamp(3rem, 4.35vw, 4.5rem);
    font-weight: 835;
    line-height: 0.99;
    letter-spacing: -0.055em;
}

.learning-closing-main h2 span {
    display: block;
    color: #2f6a50;
}

.learning-closing-side {
    max-width: 540px;
}

.learning-closing-side > p {
    margin: 0;
    color: #607067;
    font-size: 0.98rem;
    line-height: 1.75;
}

.learning-closing-side .button {
    margin-top: 30px;
}


/* =========================================================
   KONTAKTSEITE: EINSTIEG
   ========================================================= */

.contact-page-hero {
    position: relative;
    overflow: hidden;
    padding: 118px 0 108px;
    color: var(--color-text);
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(46, 106, 76, 0.25),
            transparent 29%
        ),
        linear-gradient(
            135deg,
            #07120f 0%,
            #091712 55%,
            #06100d 100%
        );
}

.contact-page-decoration {
    position: absolute;
    pointer-events: none;
}

.contact-page-decoration-one {
    top: -180px;
    right: -120px;
    width: 480px;
    height: 480px;
    border: 1px solid rgba(204, 230, 75, 0.13);
    border-radius: 50%;
}

.contact-page-decoration-two {
    left: -100px;
    bottom: -160px;
    width: 350px;
    height: 350px;
    opacity: 0.14;
    background-image:
        radial-gradient(
            rgba(204, 230, 75, 0.7) 1px,
            transparent 1px
        );
    background-size: 18px 18px;
}

.contact-page-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(390px, 0.82fr);
    align-items: center;
    gap: 92px;
}

.contact-page-hero h1 {
    max-width: 820px;
    margin: 0;
    font-size: clamp(3.7rem, 6.2vw, 6.6rem);
    line-height: 0.95;
    letter-spacing: -0.065em;
}

.contact-page-hero h1 span {
    display: block;
    color: var(--color-accent);
}

.contact-page-lead {
    max-width: 650px;
    margin: 30px 0 0;
    color: var(--color-text-muted);
    font-size: clamp(1.04rem, 1.45vw, 1.18rem);
}


/* Statuskarte */

.contact-page-status {
    padding: 38px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.025)
        );
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 24px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);
}

.contact-status-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.contact-status-header p {
    margin: 0;
    color: var(--color-accent);
    font-size: 0.73rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.contact-status-dot {
    width: 10px;
    height: 10px;
    background: var(--color-accent);
    border-radius: 50%;
    box-shadow:
        0 0 0 6px rgba(204, 230, 75, 0.09),
        0 0 20px rgba(204, 230, 75, 0.22);
}

.contact-page-status h2 {
    max-width: 520px;
    margin: 28px 0 0;
    font-size: clamp(1.75rem, 2.7vw, 2.55rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.contact-page-status > p {
    margin: 20px 0 0;
    color: var(--color-text-muted);
}

.contact-status-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 27px;
}

.contact-status-tags span {
    padding: 7px 11px;
    color: #dce6df;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 700;
}


/* =========================================================
   KONTAKTSEITE: KONTAKT & PROFIL
   ========================================================= */

.contact-options-section {
    padding: 112px 0;
    color: var(--color-ink);
    background: var(--color-offwhite);
}

.contact-options-heading {
    display: grid;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(340px, 0.72fr);
    align-items: end;
    gap: 90px;
    margin-bottom: 58px;
}

.contact-options-heading h2 {
    max-width: 820px;
    margin: 0;
    font-size: clamp(2.8rem, 4.8vw, 4.9rem);
    line-height: 1.01;
    letter-spacing: -0.058em;
}

.contact-options-heading h2 span {
    display: block;
    color: var(--color-forest-light);
}

.contact-options-heading > p {
    max-width: 540px;
    margin: 0 0 6px;
    color: #58655d;
    font-size: 1rem;
    line-height: 1.7;
}


/* Hierarchie: E-Mail primär, Profilressourcen sekundär */

.contact-channel-layout {
    display: grid;
    gap: 22px;
}

.contact-channel {
    border-radius: 24px;
}

.contact-channel-email {
    display: grid;
    grid-template-columns:
        150px
        minmax(0, 1fr)
        auto;
    gap: 46px;
    align-items: center;
    padding: 42px 46px;
    color: var(--color-text);
    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(204, 230, 75, 0.12),
            transparent 27%
        ),
        var(--color-forest);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 24px 65px rgba(16, 32, 26, 0.11);
}

.contact-channel-meta {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 34px;
    border-right: 1px solid rgba(255, 255, 255, 0.13);
}

.contact-channel-meta > span {
    color: var(--color-accent);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.11em;
}

.contact-channel-meta > p {
    margin: 34px 0 0;
    color: var(--color-accent);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.contact-channel-label {
    margin: 0 0 10px;
    color: var(--color-forest-light);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.contact-channel-email .contact-channel-label {
    color: var(--color-accent);
}

.contact-channel-copy h3 {
    max-width: 560px;
    margin: 0;
    font-size: clamp(1.85rem, 3.1vw, 2.85rem);
    font-weight: 820;
    line-height: 1.04;
    letter-spacing: -0.045em;
}

.contact-channel-copy > p:last-child {
    max-width: 600px;
    margin: 15px 0 0;
    color: var(--color-text-muted);
    line-height: 1.65;
}

.contact-channel-action {
    display: grid;
    justify-items: start;
    gap: 13px;
}

.contact-channel-address {
    max-width: 260px;
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.72rem;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color var(--transition);
}

.contact-channel-address:hover,
.contact-channel-address:focus-visible {
    color: var(--color-accent);
}


/* LinkedIn + Lebenslauf */

.contact-channel-secondary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.contact-channel-resource {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    padding: 32px 34px;
    background: #ffffff;
    border: 1px solid rgba(20, 34, 26, 0.13);
    box-shadow: 0 18px 50px rgba(20, 34, 26, 0.055);
    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.contact-channel-resource:hover {
    transform: translateY(-4px);
    border-color: rgba(46, 106, 76, 0.26);
    box-shadow: 0 24px 62px rgba(20, 34, 26, 0.09);
}

.contact-channel-resource-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.contact-channel-resource-top > span:first-child {
    color: var(--color-forest-light);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.contact-channel-resource-icon {
    min-width: 42px;
    height: 42px;
    padding: 0 10px;
    display: inline-grid;
    place-items: center;
    color: var(--color-forest-light);
    border: 1px solid rgba(46, 106, 76, 0.24);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 900;
}

.contact-channel-resource .contact-channel-label {
    margin-top: 38px;
}

.contact-channel-resource h3 {
    margin: 0;
    color: #102018;
    font-size: clamp(1.55rem, 2.35vw, 2.15rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.contact-channel-resource > p:not(.contact-channel-label) {
    max-width: 560px;
    margin: 16px 0 0;
    color: #5c6961;
    line-height: 1.62;
}

.contact-resource-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    margin-top: auto;
    padding-top: 28px;
    color: var(--color-forest-light);
    font-size: 0.86rem;
    font-weight: 800;
    text-decoration: none;
}

.contact-resource-link span {
    transition: transform var(--transition);
}

.contact-resource-link:hover span,
.contact-resource-link:focus-visible span {
    transform: translateX(4px);
}


/* =========================================================
   KONTAKTSEITE: PASSENDE ROLLEN & AUFGABEN
   ========================================================= */

.contact-fit-section {
    padding: 112px 0;
    color: #102018;
    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(47, 106, 80, 0.08),
            transparent 28%
        ),
        #e1ebe2;
    border-top: 1px solid rgba(16, 32, 24, 0.08);
}

.contact-fit-layout {
    display: grid;
    grid-template-columns:
        minmax(340px, 0.82fr)
        minmax(0, 1.18fr);
    align-items: start;
    gap: 95px;
}

.contact-fit-intro {
    position: sticky;
    top: 120px;
}

.contact-fit-intro h2 {
    max-width: 620px;
    margin: 0;
    font-size: clamp(2.7rem, 4.55vw, 4.6rem);
    line-height: 1.02;
    letter-spacing: -0.058em;
}

.contact-fit-intro h2 span {
    color: #2f6a50;
}

.contact-fit-intro > p:not(.eyebrow) {
    max-width: 520px;
    margin: 25px 0 0;
    color: #5c6961;
    line-height: 1.68;
}

.contact-fit-list {
    border-top: 1px solid rgba(16, 32, 24, 0.15);
}

.contact-fit-item {
    display: grid;
    grid-template-columns:
        58px
        minmax(0, 1fr);
    gap: 28px;
    padding: 35px 0;
    border-bottom: 1px solid rgba(16, 32, 24, 0.15);
    transition: padding-left var(--transition);
}

.contact-fit-item:hover {
    padding-left: 14px;
}

.contact-fit-item > span {
    color: #2f6a50;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.contact-fit-item h3 {
    margin: 0;
    color: #102018;
    font-size: clamp(1.45rem, 2.4vw, 2rem);
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.contact-fit-item p {
    max-width: 680px;
    margin: 13px 0 0;
    color: #5c6961;
    line-height: 1.65;
}


/* =========================================================
   KONTAKTSEITE: HELLER ABSCHLUSS VOR DEM FOOTER
   ========================================================= */

.contact-closing-section {
    padding: 100px 0;
    color: #102018;
    background:
        radial-gradient(
            circle at 86% 30%,
            rgba(47, 106, 80, 0.07),
            transparent 27%
        ),
        #f7f3ed;
    border-top: 1px solid rgba(16, 32, 24, 0.10);
}

.contact-closing-grid {
    display: grid;
    grid-template-columns:
        minmax(500px, 1fr)
        minmax(360px, 0.66fr);
    gap: 110px;
    align-items: center;
}

.contact-closing-main h2 {
    max-width: 790px;
    margin: 15px 0 0;
    color: #102018;
    font-size: clamp(3rem, 4.4vw, 4.6rem);
    font-weight: 835;
    line-height: 0.99;
    letter-spacing: -0.055em;
}

.contact-closing-main h2 span {
    display: block;
    color: #2f6a50;
}

.contact-closing-side {
    max-width: 520px;
}

.contact-closing-side > p {
    margin: 0;
    color: #607067;
    font-size: 0.98rem;
    line-height: 1.75;
}

.contact-closing-side .button {
    margin-top: 30px;
}


/* =========================================================
   OUTDOOR-HOSENFINDER CASE STUDY
   PROJECT THEME
   ========================================================= */

.case-study-outdoor {
    --ohf-accent: #c8a052;
    --ohf-accent-dark: #9d7836;
    --ohf-green: #183d30;
    --ohf-green-dark: #07150f;
    --ohf-cream: #f5f1e8;
    --ohf-paper: #fbfaf6;
    --ohf-sage: #dfe7dd;
    --ohf-ink: #10231a;
    --ohf-muted: #667169;
    --ohf-line: rgba(16, 35, 26, 0.15);

    /* Related projects */
    --case-related-bg: var(--ohf-cream);
    --case-related-ink: var(--ohf-ink);
    --case-related-muted: var(--ohf-muted);
    --case-related-accent: var(--ohf-accent-dark);
    --case-related-accent-decor: var(--ohf-accent);
    --case-related-line: var(--ohf-line);
    --case-related-hover: rgba(200, 160, 82, 0.10);
    --case-related-tint: rgba(200, 160, 82, 0.055);
}


/* =========================================================
   PROJECT IDENTIFIER
   ========================================================= */

.case-project-bar {
    color: var(--ohf-ink);
    background: var(--ohf-cream);
    border-bottom: 1px solid var(--ohf-line);
}

.case-project-bar-inner {
    min-height: 84px;
    display: grid;
    grid-template-columns: 145px 1fr auto;
    align-items: center;
    gap: 36px;
}

.case-project-bar span {
    color: var(--ohf-accent-dark);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.case-project-bar strong {
    font-size: 1rem;
    line-height: 1.2;
}

.case-project-bar p {
    margin: 0;
    color: var(--ohf-muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


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

.ohf-hero {
    position: relative;
    overflow: hidden;
    color: #f4f5ef;
    background: var(--ohf-green-dark);
}


/* Dunkler Textbereich */

.ohf-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 1150px;
    padding-top: 82px;
    padding-bottom: 165px;
}

.ohf-hero-copy::after {
    content: "";
    position: absolute;
    top: 75px;
    right: -150px;
    width: 560px;
    height: 250px;
    opacity: 0.12;
    pointer-events: none;

    background-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(200, 160, 82, 0.55) 50%,
            transparent 100%
        );

    clip-path: polygon(
        0 47%,
        16% 47%,
        16% 28%,
        35% 28%,
        35% 65%,
        53% 65%,
        53% 38%,
        72% 38%,
        72% 54%,
        100% 54%,
        100% 57%,
        69% 57%,
        69% 42%,
        56% 42%,
        56% 69%,
        32% 69%,
        32% 32%,
        19% 32%,
        19% 51%,
        0 51%
    );
}


/* Zurück-Link */

.case-back-link {
    display: inline-flex;
    margin-bottom: 37px;
    color: rgba(244, 245, 239, 0.68);
    font-size: 0.78rem;
    font-weight: 700;
    transition: color var(--transition);
}

.case-back-link:hover {
    color: var(--ohf-accent);
}


/* Kleine Projektbezeichnung */

.ohf-overline,
.ohf-section-label {
    margin: 0 0 18px;
    color: var(--ohf-accent);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}


/* Hauptheadline */

.ohf-hero h1 {
    position: relative;
    z-index: 2;
    max-width: 1150px;
    margin: 0;
    font-size: clamp(4.5rem, 7.4vw, 7.8rem);
    line-height: 0.92;
    letter-spacing: -0.072em;
}

.ohf-hero h1 span {
    display: block;
    color: var(--ohf-accent);
}


/* Erklärung + Projektname */

.ohf-hero-bottom {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 720px) auto;
    justify-content: space-between;
    align-items: end;
    gap: 70px;
    margin-top: 34px;
}

.ohf-hero-lead {
    margin: 0;
    color: rgba(244, 245, 239, 0.72);
    font-size: 1.08rem;
    line-height: 1.75;
}

.ohf-project-name {
    min-width: 230px;
    padding-left: 23px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.ohf-project-name span {
    display: block;
    color: rgba(244, 245, 239, 0.48);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ohf-project-name strong {
    display: block;
    margin-top: 7px;
    font-size: 1rem;
}


/* =========================================================
   HERO: HELLE MEDIENFLÄCHE
   ========================================================= */

.ohf-hero-media-zone {
    position: relative;
    display: flow-root;
    color: var(--ohf-ink);
    background: var(--ohf-cream);
}


/*
   Der Screenshot ragt bewusst aus der dunklen Fläche
   in die helle Fläche hinein.
*/

.ohf-hero-visual {
    position: relative;
    z-index: 3;
    margin-top: -125px;
}


/* Browser-Mockup */

.ohf-browser-frame {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(16, 35, 26, 0.12);
    border-radius: 20px;
    box-shadow:
        0 42px 100px rgba(16, 35, 26, 0.18),
        0 10px 30px rgba(16, 35, 26, 0.08);
}

.ohf-browser-bar {
    height: 42px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 17px;
    color: #7d847f;
    background: #f1f1ee;
    border-bottom: 1px solid rgba(16, 35, 26, 0.08);
}

.ohf-browser-bar > span {
    width: 9px;
    height: 9px;
    background: #c9ccc7;
    border-radius: 50%;
}

.ohf-browser-bar p {
    margin: 0 0 0 12px;
    font-size: 0.66rem;
}

.ohf-browser-frame img {
    width: 100%;
    display: block;
}


/* =========================================================
   HERO: FAKTEN
   ========================================================= */

.ohf-hero-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    margin-top: 42px;
    padding-top: 28px;
    padding-bottom: 68px;

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

.ohf-hero-facts > div {
    padding: 0 30px;
}

.ohf-hero-facts > div:first-child {
    padding-left: 0;
}

.ohf-hero-facts > div + div {
    border-left: 1px solid var(--ohf-line);
}

.ohf-hero-facts span {
    display: block;
    color: var(--ohf-accent-dark);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.ohf-hero-facts strong {
    display: block;
    margin-top: 10px;
    color: var(--ohf-ink);
    font-size: 1rem;
    line-height: 1.35;
}


/* =========================================================
   PROBLEM
   ========================================================= */

.ohf-problem {
    padding: 130px 0;
    color: var(--ohf-ink);
    background: var(--ohf-paper);
}

.ohf-problem-layout {
    display: grid;
    grid-template-columns: 80px minmax(0, 1.05fr) minmax(390px, 0.95fr);
    gap: 50px;
    align-items: start;
}

.ohf-section-number {
    padding-top: 9px;
    color: var(--ohf-accent-dark);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.ohf-problem-heading h2,
.ohf-data-heading h2,
.ohf-nurturing-intro h2,
.ohf-build-heading h2 {
    margin: 0;
    font-size: clamp(3rem, 5.2vw, 5.3rem);
    line-height: 1;
    letter-spacing: -0.06em;
}

.ohf-problem-heading h2 span,
.ohf-data-heading h2 span,
.ohf-nurturing-intro h2 span,
.ohf-build-heading h2 span {
    display: block;
    color: var(--ohf-green);
}

.ohf-problem-content p {
    max-width: 640px;
    margin: 0;
    color: var(--ohf-muted);
    line-height: 1.75;
}

.ohf-problem-content p + p {
    margin-top: 20px;
}

.ohf-problem-content .ohf-large-copy {
    color: var(--ohf-ink);
    font-size: 1.35rem;
    font-weight: 750;
    line-height: 1.45;
    letter-spacing: -0.025em;
}

.ohf-problem-lines {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 85px;
    border-top: 1px solid var(--ohf-line);
    border-bottom: 1px solid var(--ohf-line);
}

.ohf-problem-lines article {
    padding: 30px 34px;
}

.ohf-problem-lines article:first-child {
    padding-left: 0;
}

.ohf-problem-lines article + article {
    border-left: 1px solid var(--ohf-line);
}

.ohf-problem-lines span {
    color: var(--ohf-accent-dark);
    font-size: 0.69rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ohf-problem-lines p {
    max-width: 330px;
    margin: 15px 0 0;
    color: var(--ohf-muted);
    font-size: 0.91rem;
    line-height: 1.6;
}


/* =========================================================
   STRATEGY
   ========================================================= */

.ohf-strategy {
    padding: 135px 0;
    color: var(--ohf-ink);
    background: var(--ohf-sage);
}

.ohf-strategy-heading {
    max-width: 1120px;
}

.ohf-strategy-heading h2 {
    margin: 0;
    font-size: clamp(3.5rem, 6.4vw, 6.8rem);
    line-height: 0.97;
    letter-spacing: -0.065em;
}

.ohf-strategy-heading h2 span {
    color: #67746c;
}

.ohf-strategy-heading h2 em {
    display: block;
    color: var(--ohf-green);
    font-style: normal;
}

.ohf-strategy-bottom {
    display: grid;
    grid-template-columns: minmax(0, 650px) 340px;
    justify-content: space-between;
    align-items: end;
    gap: 80px;
    margin-top: 65px;
}

.ohf-strategy-copy p {
    margin: 0;
    color: #59655e;
    line-height: 1.75;
}

.ohf-strategy-copy p + p {
    margin-top: 18px;
}

.ohf-strategy-principle {
    padding: 24px 0 5px 26px;
    border-left: 2px solid var(--ohf-accent);
}

.ohf-strategy-principle span {
    display: block;
    color: var(--ohf-accent-dark);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ohf-strategy-principle strong {
    display: block;
    margin-top: 12px;
    font-size: 1.65rem;
    line-height: 1.2;
}


/* =========================================================
   USER FLOW
   ========================================================= */

.ohf-flow {
    padding: 140px 0;
    color: var(--ohf-ink);
    background: var(--ohf-cream);
}

.ohf-flow-layout {
    width: min(calc(100% - 64px), 1480px);
    max-width: none;

    display: grid;
    grid-template-columns: 285px minmax(0, 1fr);
    align-items: start;
    gap: 70px;
}

.ohf-flow-nav {
    position: sticky;
    top: 115px;
}

.ohf-flow-nav h2 {
    margin: 0;
    font-size: 2.8rem;
    line-height: 1.03;
    letter-spacing: -0.055em;
}

.ohf-flow-nav nav {
    display: grid;
    margin-top: 42px;
    border-top: 1px solid var(--ohf-line);
}

.ohf-flow-nav nav a {
    display: grid;
    grid-template-columns: 37px 1fr;
    gap: 12px;
    padding: 16px 0;
    color: var(--ohf-muted);
    border-bottom: 1px solid var(--ohf-line);
    font-size: 0.82rem;
    font-weight: 750;
    transition:
        color var(--transition),
        padding-left var(--transition);
}

.ohf-flow-nav nav a:hover {
    padding-left: 8px;
    color: var(--ohf-green);
}

.ohf-flow-nav nav span {
    color: var(--ohf-accent-dark);
    font-size: 0.67rem;
}

.ohf-flow-content {
    display: grid;
    gap: 120px;
}

.ohf-flow-step-header {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.ohf-flow-step-header > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--ohf-green);
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 900;
}

.ohf-flow-step-header p {
    margin: 0 0 5px;
    color: var(--ohf-accent-dark);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ohf-flow-step-header h3 {
    max-width: 720px;
    margin: 0;
    font-size: clamp(2rem, 3.6vw, 3.4rem);
    line-height: 1.04;
    letter-spacing: -0.052em;
}

.ohf-screen {
    margin: 0;
}

.ohf-screen img {
    width: 100%;
    display: block;
    background: #fff;
    border: 1px solid var(--ohf-line);
    box-shadow: 0 30px 75px rgba(16, 35, 26, 0.1);
}

.ohf-screen figcaption {
    max-width: 610px;
    margin-top: 16px;
    color: var(--ohf-muted);
    font-size: 0.78rem;
    line-height: 1.55;
}


/* =========================================================
   DATA LOGIC
   ========================================================= */

.ohf-data {
    padding: 135px 0;
    color: var(--ohf-ink);
    background: var(--ohf-paper);
}

.ohf-data-heading {
    max-width: 900px;
}

.ohf-data-heading > p:last-child {
    max-width: 680px;
    margin: 25px 0 0;
    color: var(--ohf-muted);
    line-height: 1.7;
}

.ohf-data-table {
    margin-top: 65px;
    border-top: 1px solid var(--ohf-line);
}

.ohf-data-row {
    display: grid;
    grid-template-columns: 190px 220px 1fr;
    gap: 40px;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid var(--ohf-line);
}

.ohf-data-row strong {
    font-size: 1.08rem;
}

.ohf-data-row span {
    color: var(--ohf-accent-dark);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ohf-data-row p {
    margin: 0;
    color: var(--ohf-muted);
    font-size: 0.91rem;
}

.ohf-data-conclusion {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1.3fr;
    align-items: center;
    gap: 20px;
    margin-top: 65px;
}

.ohf-data-conclusion span,
.ohf-data-conclusion strong {
    min-height: 86px;
    display: grid;
    place-items: center;
    padding: 15px;
    text-align: center;
    border: 1px solid var(--ohf-line);
}

.ohf-data-conclusion span {
    color: var(--ohf-muted);
}

.ohf-data-conclusion strong {
    color: #fff;
    background: var(--ohf-green);
    border-color: var(--ohf-green);
}

.ohf-data-conclusion b {
    color: var(--ohf-accent-dark);
}


/* =========================================================
   NURTURING
   ========================================================= */

.ohf-nurturing {
    position: relative;
    overflow: hidden;
    padding: 140px 0;
    color: var(--ohf-ink);
    background: var(--ohf-sage);
}

.ohf-nurturing-intro {
    max-width: 920px;
}

.ohf-nurturing-intro > p:last-child {
    max-width: 680px;
    margin: 25px 0 0;
    color: #59655e;
    line-height: 1.7;
}

.ohf-mail-timeline {
    position: relative;
    display: grid;
    gap: 130px;
    margin-top: 90px;
}

.ohf-mail-timeline::before {
    content: "";
    position: absolute;
    top: 25px;
    bottom: 25px;
    left: 50%;
    width: 1px;
    background: rgba(16, 35, 26, 0.18);
}

.ohf-mail-step {
    position: relative;
    display: grid;
    grid-template-columns: minmax(270px, 0.65fr) minmax(0, 1.35fr);
    align-items: center;
    gap: 80px;
}

.ohf-mail-right {
    grid-template-columns: minmax(0, 1.35fr) minmax(270px, 0.65fr);
}

.ohf-mail-marker {
    position: absolute;
    z-index: 3;
    top: 10px;
    left: 50%;
    display: grid;
    justify-items: center;
    gap: 8px;
    transform: translateX(-50%);
}

.ohf-mail-marker span {
    width: 15px;
    height: 15px;
    background: var(--ohf-accent);
    border: 4px solid var(--ohf-sage);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--ohf-accent-dark);
}

.ohf-mail-marker strong {
    padding: 5px 8px;
    color: var(--ohf-green);
    background: var(--ohf-sage);
    font-size: 0.67rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ohf-mail-copy {
    max-width: 400px;
}

.ohf-mail-left .ohf-mail-copy {
    padding-right: 35px;
}

.ohf-mail-right .ohf-mail-copy {
    padding-left: 35px;
}

.ohf-mail-copy > p:first-child {
    margin: 0 0 8px;
    color: var(--ohf-accent-dark);
    font-size: 0.67rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ohf-mail-copy h3 {
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    line-height: 1.07;
    letter-spacing: -0.045em;
}

.ohf-mail-copy > p:last-child {
    margin: 19px 0 0;
    color: #59655e;
    line-height: 1.68;
}

.ohf-mail-image {
    margin: 0;
}

.ohf-mail-image img {
    width: 100%;
    display: block;
    border: 1px solid rgba(16, 35, 26, 0.13);
    box-shadow: 0 30px 80px rgba(16, 35, 26, 0.13);
}

.ohf-concept-note {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 50px;
    margin-top: 100px;
    padding-top: 28px;
    border-top: 1px solid var(--ohf-line);
}

.ohf-concept-note span {
    color: var(--ohf-accent-dark);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ohf-concept-note p {
    max-width: 790px;
    margin: 0;
    color: #59655e;
    font-size: 0.88rem;
    line-height: 1.65;
}


/* =========================================================
   BUILD / WEBSITE
   ========================================================= */

.ohf-build {
    color: var(--ohf-ink);
}


/* =========================================================
   BUILD: DUNKLER EINSTIEG
   ========================================================= */

.ohf-build-intro {
    padding: 135px 0 190px;
    color: #f4f5ef;
    background:
        radial-gradient(
            circle at 84% 20%,
            rgba(200, 160, 82, 0.09),
            transparent 27%
        ),
        var(--ohf-green-dark);
}

.ohf-build-heading {
    max-width: 920px;
}

.ohf-build-heading .ohf-section-label {
    color: var(--ohf-accent);
}

.ohf-build-heading h2 {
    margin: 0;
    font-size: clamp(3rem, 5.2vw, 5.3rem);
    line-height: 1;
    letter-spacing: -0.06em;
}

.ohf-build-heading h2 span {
    display: block;
    color: var(--ohf-accent);
}

.ohf-build-heading > p:last-child {
    max-width: 760px;
    margin: 25px 0 0;
    color: rgba(244, 245, 239, 0.72);
    line-height: 1.72;
}


/* =========================================================
   BUILD: HELLE PROJEKTBÜHNE
   ========================================================= */

.ohf-build-stage {
    display: flow-root;
    padding-bottom: 120px;
    color: var(--ohf-ink);
    background: var(--ohf-cream);
}

/*
   Der Screenshot überlappt nur innerhalb von Abschnitt 06:
   Er verbindet den dunklen Introbereich mit der hellen
   Projektbühne und greift NICHT in Abschnitt 05 hinein.
*/

.ohf-build-showcase {
    margin-top: -105px;
}


/* Browserrahmen */

.ohf-website-frame {
    margin: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(16, 35, 26, 0.14);
    border-radius: 18px;
    box-shadow:
        0 40px 100px rgba(16, 35, 26, 0.16),
        0 10px 30px rgba(16, 35, 26, 0.08);
}


/* Browserleiste */

.ohf-website-frame-bar {
    min-height: 46px;
    display: grid;
    grid-template-columns: 100px 1fr 100px;
    align-items: center;
    padding: 0 18px;
    color: #747d77;
    background: #f0f1ed;
    border-bottom: 1px solid rgba(16, 35, 26, 0.09);
}

.ohf-window-dots {
    display: flex;
    align-items: center;
    gap: 7px;
}

.ohf-window-dots span {
    width: 9px;
    height: 9px;
    background: #c7cbc5;
    border-radius: 50%;
}

.ohf-website-frame-bar p {
    margin: 0;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 700;
}

.ohf-frame-type {
    justify-self: end;
    color: #8a918c;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* Screenshot */

.ohf-website-frame-image {
    overflow: hidden;
}

.ohf-website-frame-image img {
    width: 100%;
    display: block;
}


/* Bildunterschrift */

.ohf-showcase-caption {
    display: grid;
    grid-template-columns: 190px minmax(0, 560px);
    gap: 35px;
    margin-top: 20px;
}

.ohf-showcase-caption span {
    color: var(--ohf-accent-dark);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.ohf-showcase-caption p {
    margin: 0;
    color: var(--ohf-muted);
    font-size: 0.82rem;
    line-height: 1.6;
}


/* =========================================================
   BUILD: TECHNIK
   ========================================================= */

.ohf-tech-lines {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 75px;
    border-top: 1px solid var(--ohf-line);
    border-bottom: 1px solid var(--ohf-line);
}

.ohf-tech-lines article {
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 22px;
    padding: 31px 32px;
}

.ohf-tech-lines article:first-child {
    padding-left: 0;
}

.ohf-tech-lines article + article {
    border-left: 1px solid var(--ohf-line);
}

.ohf-tech-lines article > span {
    color: var(--ohf-accent-dark);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.ohf-tech-lines strong {
    display: block;
    color: var(--ohf-ink);
    font-size: 1.06rem;
}

.ohf-tech-lines p {
    margin: 8px 0 0;
    color: var(--ohf-muted);
    font-size: 0.86rem;
    line-height: 1.6;
}


/* =========================================================
   BUILD: MEIN BEITRAG
   ========================================================= */

.ohf-build-contribution {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 55px;
    margin-top: 50px;
    padding-top: 28px;
    border-top: 1px solid var(--ohf-line);
}

.ohf-build-contribution-label span {
    color: var(--ohf-accent-dark);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ohf-build-contribution-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 30px;
}

.ohf-build-contribution-list span {
    position: relative;
    padding-left: 16px;
    color: var(--ohf-muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.ohf-build-contribution-list span::before {
    content: "";
    position: absolute;
    top: 0.65em;
    left: 0;
    width: 5px;
    height: 5px;
    background: var(--ohf-accent);
    border-radius: 50%;
}



/* =========================================================
   BILD-LIGHTBOX
   ========================================================= */

.image-zoom-button {
    position: relative;

    width: 100%;
    display: block;

    padding: 0;
    border: 0;

    background: transparent;

    cursor: zoom-in;
    font: inherit;
}

.image-zoom-button img {
    width: 100%;
    display: block;

    transition:
        transform 260ms ease,
        filter 260ms ease;
}

.image-zoom-button:hover img {
    transform: scale(1.012);
    filter: brightness(0.96);
}


/* Hinweis auf Vergrößerung */

.image-zoom-hint {
    position: absolute;
    right: 16px;
    bottom: 16px;

    padding: 8px 11px;

    color: #ffffff;
    background: rgba(7, 21, 15, 0.82);

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;

    backdrop-filter: blur(10px);

    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;

    opacity: 0;
    transform: translateY(5px);

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

.image-zoom-button:hover .image-zoom-hint {
    opacity: 1;
    transform: translateY(0);
}


/* Overlay */

.image-lightbox {
    position: fixed;
    inset: 0;

    z-index: 1000;

    display: grid;
    place-items: center;

    padding: 48px;

    background: rgba(3, 10, 7, 0.92);
    backdrop-filter: blur(12px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 220ms ease,
        visibility 220ms ease;
}

.image-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}


/* Bildbereich */

.image-lightbox-inner {
    width: min(1500px, 94vw);
    height: min(900px, 88vh);

    display: grid;
    place-items: center;
}

.image-lightbox-image {
    width: auto;
    max-width: 100%;

    height: auto;
    max-height: 100%;

    object-fit: contain;

    background: #ffffff;

    box-shadow:
        0 40px 120px rgba(0, 0, 0, 0.55);
}


/* Schließen */

.image-lightbox-close {
    position: absolute;
    top: 24px;
    right: 30px;

    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    padding: 0;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;

    font-size: 1.6rem;
    line-height: 1;

    cursor: pointer;

    transition:
        background 180ms ease,
        transform 180ms ease;
}

.image-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: rotate(4deg);
}

body.lightbox-open {
    overflow: hidden;
}


/* =========================================================
   URBANROOTS CASE STUDY
   ========================================================= */

.case-study-urbanroots {
    --urban-cream: #f2f1ec;
    --urban-paper: #fbfaf6;
    --urban-green: #2a4034;
    --urban-deep: #18261e;
    --urban-gold: #b8a45c;
    --urban-sage: #bcccc1;
    --urban-ink: #17241d;
    --urban-muted: #69736d;
    --urban-line: rgba(23, 36, 29, 0.15);

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

    /* Related projects */
    --case-related-bg: var(--urban-paper);
    --case-related-ink: var(--urban-ink);
    --case-related-muted: var(--urban-muted);
    --case-related-accent: var(--urban-green);
    --case-related-accent-decor: var(--urban-gold);
    --case-related-line: var(--urban-line);
    --case-related-hover: rgba(42, 64, 52, 0.065);
    --case-related-tint: rgba(42, 64, 52, 0.045);
}


/* =========================================================
   PROJECT BAR
   ========================================================= */

.urban-project-bar {
    color: var(--urban-ink);
    background: var(--urban-paper);
    border-bottom: 1px solid var(--urban-line);
}

.urban-project-bar-inner {
    min-height: 84px;

    display: grid;
    grid-template-columns: 145px 1fr auto;
    align-items: center;

    gap: 36px;
}

.urban-project-bar span {
    color: var(--urban-gold);

    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.urban-project-bar strong {
    font-size: 1rem;
}

.urban-project-bar p {
    margin: 0;

    color: var(--urban-muted);

    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


/* =========================================================
   GEMEINSAME LABEL
   ========================================================= */

.urban-overline,
.urban-section-label {
    margin: 0 0 18px;

    color: var(--urban-gold);

    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.urban-brand-caption {
    color: var(--urban-gold);

    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}


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

.urban-hero {
    position: relative;

    overflow: hidden;

    padding: 90px 0 120px;

    color: var(--urban-ink);

    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(184, 164, 92, 0.11),
            transparent 28%
        ),
        var(--urban-cream);
}

.urban-hero-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(440px, 0.85fr);

    align-items: center;

    gap: 85px;
}


/* Zurück */

.urban-back-link {
    display: inline-flex;

    margin-bottom: 38px;

    color: var(--urban-muted);

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

    transition: color var(--transition);
}

.urban-back-link:hover {
    color: var(--urban-green);
}


/* H1 */

.urban-hero h1 {
    max-width: 850px;

    margin: 0;

    color: var(--urban-green);

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

    font-size: clamp(3.8rem, 5.4vw, 6rem);
    font-weight: 800;

    line-height: 0.98;
    letter-spacing: -0.06em;
}

.urban-hero-lead {
    max-width: 660px;

    margin: 30px 0 0;

    color: var(--urban-muted);

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


/* Meta */

.urban-hero-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;

    max-width: 620px;

    margin-top: 48px;

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

.urban-hero-meta > div {
    padding: 22px 28px 0 0;
}

.urban-hero-meta > div + div {
    padding-left: 28px;

    border-left: 1px solid var(--urban-line);
}

.urban-hero-meta span {
    display: block;

    color: var(--urban-gold);

    font-size: 0.67rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.urban-hero-meta strong {
    display: block;

    margin-top: 8px;

    color: var(--urban-green);

    font-size: 0.95rem;
}


/* Hero-Bild */

.urban-hero-visual {
    position: relative;

    min-height: 660px;
}

.urban-hero-image {
    width: 88%;

    margin: 0 0 0 auto;

    overflow: hidden;

    box-shadow:
        0 40px 90px rgba(31, 48, 39, 0.14);
}

.urban-hero-image img {
    width: 100%;
    height: 620px;

    display: block;

    object-fit: cover;
}


/* Logo-Karte */

.urban-logo-stage {
    position: absolute;

    left: 0;
    bottom: 45px;

    width: 260px;
    min-height: 230px;

    display: grid;
    place-items: center;

    padding: 35px;

    background: var(--urban-paper);

    border: 1px solid var(--urban-line);

    box-shadow:
        0 25px 60px rgba(31, 48, 39, 0.14);
}

.urban-logo-stage img {
    width: 100%;
    max-height: 150px;
}


/* =========================================================
   01 AUSGANGSLAGE
   ========================================================= */

.urban-problem {
    padding: 135px 0;

    color: var(--urban-ink);
    background: var(--urban-paper);
}

.urban-problem-grid {
    display: grid;

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

    align-items: start;

    gap: 55px;
}

.urban-section-number {
    padding-top: 9px;

    color: var(--urban-gold);

    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.urban-problem-heading h2,
.urban-positioning-intro h2,
.urban-identity-intro h2,
.urban-visual-heading h2,
.urban-benefits-heading h2 {
    margin: 0;

    color: var(--urban-green);

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

    font-size: clamp(2.8rem, 4.5vw, 4.5rem);
    font-weight: 800;

    line-height: 1;
    letter-spacing: -0.055em;
}

.urban-problem-copy p {
    max-width: 620px;

    margin: 0;

    color: var(--urban-muted);

    line-height: 1.75;
}

.urban-problem-copy p + p {
    margin-top: 22px;
}

.urban-problem-copy .urban-large-copy {
    color: var(--urban-ink);

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

    line-height: 1.5;
}


/* Transformation */

.urban-transformation {
    display: grid;

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

    align-items: center;

    margin-top: 90px;

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

.urban-transformation > div:not(.urban-transformation-arrow) {
    min-height: 210px;

    display: grid;
    align-content: center;

    padding: 35px;
}

.urban-transformation > div:first-child {
    padding-left: 0;
}

.urban-transformation span {
    color: var(--urban-gold);

    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.urban-transformation strong {
    display: block;

    margin-top: 16px;

    color: var(--urban-green);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 2.2rem;
    font-weight: 500;
}

.urban-transformation p {
    max-width: 390px;

    margin: 12px 0 0;

    color: var(--urban-muted);
}

.urban-transformation-arrow {
    color: var(--urban-gold);

    text-align: center;

    font-size: 2rem;
}

.urban-transformation-target {
    background: var(--urban-sage);
}


/* =========================================================
   02 POSITIONIERUNG
   ========================================================= */

.urban-positioning {
    padding: 140px 0;

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

.urban-positioning-intro {
    max-width: 950px;
}


/* Positionierungslogik */

.urban-positioning-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    margin-top: 80px;

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

.urban-positioning-grid article {
    padding: 36px 38px;
}

.urban-positioning-grid article:first-child {
    padding-left: 0;
}

.urban-positioning-grid article + article {
    border-left: 1px solid var(--urban-line);
}

.urban-positioning-grid article > span {
    color: var(--urban-gold);

    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.urban-positioning-grid h3 {
    margin: 18px 0 0;

    color: var(--urban-green);

    font-size: 1.65rem;

    line-height: 1.15;
    letter-spacing: -0.035em;
}

.urban-positioning-grid p {
    margin: 18px 0 0;

    color: var(--urban-muted);

    line-height: 1.7;
}


/* Positionierungsstatement */

.urban-positioning-statement {
    display: grid;

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

    align-items: end;

    gap: 90px;

    margin-top: 85px;
}

.urban-positioning-statement > p {
    max-width: 850px;

    margin: 0;

    color: var(--urban-green);

    font-size: clamp(2.6rem, 4.5vw, 4.4rem);
    font-weight: 800;

    line-height: 1;
    letter-spacing: -0.055em;
}

.urban-positioning-statement > p span {
    display: block;
}

.urban-positioning-statement > div {
    padding-left: 25px;

    border-left: 2px solid var(--urban-gold);
}

.urban-positioning-statement > div span,
.urban-positioning-statement > div small {
    display: block;

    color: var(--urban-muted);

    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.urban-positioning-statement > div strong {
    display: block;

    margin: 8px 0;

    color: var(--urban-green);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 2.5rem;
    font-weight: 500;
}


/* =========================================================
   03 MARKENIDENTITÄT
   ========================================================= */

.urban-identity {
    padding: 140px 0;

    color: var(--urban-ink);
    background: var(--urban-paper);
}

.urban-identity-intro {
    max-width: 1000px;
}

.urban-identity-intro h2 span {
    display: block;
}

.urban-identity-intro > p:last-child {
    max-width: 690px;

    margin: 28px 0 0;

    color: var(--urban-muted);

    line-height: 1.75;
}


/* Markenattribute */

.urban-brand-words {
    display: flex;
    justify-content: space-between;
    align-items: baseline;

    gap: 50px;

    margin-top: 90px;

    padding: 40px 0;

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

.urban-brand-words span {
    color: var(--urban-green);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(2.5rem, 4.2vw, 4.4rem);
    font-weight: 500;

    letter-spacing: -0.045em;
}


/* Logo-System */

.urban-logo-system {
    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(360px, 0.8fr);

    gap: 24px;

    margin-top: 80px;
}

.urban-logo-main {
    min-height: 550px;

    display: grid;
    align-content: space-between;

    padding: 38px;

    background: var(--urban-cream);

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

.urban-logo-main img {
    width: min(70%, 470px);

    margin: auto;
}

.urban-logo-variants {
    display: grid;
    gap: 24px;
}

.urban-logo-dark,
.urban-logo-mono {
    min-height: 263px;

    display: grid;
    grid-template-rows: auto 1fr;

    padding: 28px;
}

.urban-logo-dark {
    color: #fff;
    background: var(--urban-green);
}

.urban-logo-mono {
    color: var(--urban-ink);
    background: #e7e5df;

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

.urban-logo-dark > span,
.urban-logo-mono > span {
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.urban-logo-dark img,
.urban-logo-mono img {
    width: min(62%, 230px);

    align-self: center;
    justify-self: center;
}


/* Logo-Erklärung */

.urban-logo-rationale {
    display: grid;

    grid-template-columns: 180px minmax(0, 760px);

    gap: 50px;

    margin-top: 55px;

    padding-top: 28px;

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

.urban-logo-rationale span {
    color: var(--urban-gold);

    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.urban-logo-rationale p {
    margin: 0;

    color: var(--urban-muted);

    line-height: 1.7;
}


/* =========================================================
   04 VISUELLES SYSTEM
   ========================================================= */

.urban-visual-system {
    padding: 140px 0;

    color: var(--urban-ink);
    background: #e7ebe4;
}

.urban-visual-heading {
    max-width: 1050px;
}

.urban-visual-heading h2 span {
    display: block;
}


/* Brandboard */

.urban-brandboard {
    display: grid;

    grid-template-columns:
        1.4fr
        0.8fr
        0.8fr;

    grid-template-rows:
        260px
        220px;

    gap: 12px;

    margin-top: 80px;
}

.urban-color {
    display: grid;
    align-content: end;

    padding: 28px;
}

.urban-color span {
    font-size: 0.69rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.urban-color strong {
    display: block;

    margin-top: 5px;

    font-size: 1.35rem;
}

.urban-color small {
    display: block;

    margin-top: 7px;

    font-size: 0.75rem;
}


/* Einzelne Farben */

.urban-color-cream {
    grid-row: 1 / 3;

    color: var(--urban-green);
    background: var(--urban-cream);

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

.urban-color-green {
    color: #fff;
    background: var(--urban-green);
}

.urban-color-gold {
    color: var(--urban-deep);
    background: var(--urban-gold);
}

.urban-color-sage {
    color: var(--urban-green);
    background: var(--urban-sage);
}

.urban-color-deep {
    color: #fff;
    background: var(--urban-deep);
}


/* Bildwelt */

.urban-image-language {
    display: grid;

    grid-template-columns:
        minmax(360px, 0.75fr)
        minmax(0, 1.25fr);

    align-items: center;

    gap: 85px;

    margin-top: 100px;
}

.urban-image-language-copy h3 {
    max-width: 500px;

    margin: 19px 0 0;

    color: var(--urban-green);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(2.4rem, 4vw, 4rem);
    font-weight: 500;

    line-height: 1.03;
    letter-spacing: -0.05em;
}

.urban-image-language-copy p {
    max-width: 520px;

    margin: 25px 0 0;

    color: var(--urban-muted);

    line-height: 1.75;
}

.urban-image-language-visual {
    margin: 0;

    overflow: hidden;

    box-shadow:
        0 34px 80px rgba(31, 48, 39, 0.12);
}

.urban-image-language-visual img {
    width: 100%;
    height: 520px;

    display: block;

    object-fit: cover;
}


/* =========================================================
   05 FEATURE TO BENEFIT
   ========================================================= */

.urban-benefits {
    padding: 140px 0;

    color: var(--urban-ink);
    background: var(--urban-paper);
}

.urban-benefits-heading {
    max-width: 1000px;
}

.urban-benefits-heading h2 span {
    display: block;
}


/* Nutzenzeilen */

.urban-benefit-list {
    margin-top: 85px;

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

.urban-benefit-row {
    display: grid;

    grid-template-columns:
        45px
        minmax(200px, 1fr)
        35px
        minmax(200px, 1fr)
        35px
        minmax(230px, 1.15fr);

    align-items: center;

    gap: 25px;

    padding: 40px 0;

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

.urban-benefit-number {
    color: var(--urban-gold);

    font-size: 0.68rem;
    font-weight: 900;
}

.urban-benefit-row small {
    display: block;

    color: var(--urban-gold);

    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.urban-benefit-row strong {
    display: block;

    margin-top: 8px;

    color: var(--urban-green);

    font-size: 1.15rem;
}

.urban-benefit-row p {
    margin: 7px 0 0;

    color: var(--urban-muted);

    font-size: 0.86rem;
    line-height: 1.55;
}

.urban-benefit-arrow {
    color: var(--urban-gold);

    text-align: center;

    font-size: 1.3rem;
}

.urban-benefit-message strong {
    font-family: Georgia, "Times New Roman", serif;

    font-size: 1.5rem;
    font-weight: 500;
}


/* zentrale Botschaft */

.urban-brand-message {
    display: grid;

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

    align-items: start;

    gap: 60px;

    margin-top: 100px;

    padding-top: 32px;

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

.urban-brand-message > span {
    color: var(--urban-gold);

    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.urban-brand-message p {
    max-width: 900px;

    margin: 0;

    color: var(--urban-green);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(3.3rem, 6vw, 6rem);
    font-weight: 500;

    line-height: 0.98;
    letter-spacing: -0.055em;
}

.urban-brand-message p em {
    display: block;

    color: var(--urban-gold);

    font-style: normal;
}


/* =========================================================
   06 LANDINGPAGE
   ========================================================= */

.urban-landingpage {
    color: var(--urban-ink);
}


/* Dunkles Intro */

.urban-landingpage-intro {
    padding: 135px 0 190px;

    color: #f7f5ee;

    background: var(--urban-deep);
}

.urban-landingpage-heading {
    max-width: 1000px;
}

.urban-landingpage-heading .urban-section-label {
    color: var(--urban-gold);
}

.urban-landingpage-heading h2 {
    max-width: 950px;

    margin: 0;

    font-size: clamp(3rem, 5vw, 5.2rem);
    font-weight: 800;

    line-height: 1;
    letter-spacing: -0.055em;
}

.urban-landingpage-heading h2 span {
    display: block;

    color: var(--urban-gold);
}

.urban-landingpage-heading > p:last-child {
    max-width: 680px;

    margin: 27px 0 0;

    color: rgba(247, 245, 238, 0.65);

    line-height: 1.75;
}


/* Helle Bühne */

.urban-landingpage-stage {
    display: flow-root;

    padding-bottom: 120px;

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

.urban-landingpage-showcase {
    margin-top: -105px;
}


/* Browser */

.urban-browser {
    margin: 0;

    overflow: hidden;

    background: #fff;

    border: 1px solid var(--urban-line);
    border-radius: 17px;

    box-shadow:
        0 40px 100px rgba(31, 48, 39, 0.17),
        0 10px 30px rgba(31, 48, 39, 0.07);
}

.urban-browser-bar {
    min-height: 46px;

    display: grid;

    grid-template-columns:
        100px
        1fr
        100px;

    align-items: center;

    padding: 0 18px;

    color: #7b837e;
    background: #efefeb;

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

.urban-browser-dots {
    display: flex;

    gap: 7px;
}

.urban-browser-dots span {
    width: 9px;
    height: 9px;

    background: #c4c9c4;

    border-radius: 50%;
}

.urban-browser-bar p {
    margin: 0;

    text-align: center;

    font-size: 0.68rem;
    font-weight: 700;
}

.urban-browser-bar > span {
    justify-self: end;

    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}



/* Caption */

.urban-landingpage-caption {
    display: grid;

    grid-template-columns:
        180px
        minmax(0, 560px);

    gap: 40px;

    margin-top: 20px;
}

.urban-landingpage-caption span {
    color: var(--urban-gold);

    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.urban-landingpage-caption p {
    margin: 0;

    color: var(--urban-muted);

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


/* Conversion Flow */

.urban-conversion-flow {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr
        auto
        1fr
        auto
        1fr
        auto
        1fr;

    align-items: center;

    gap: 16px;

    margin-top: 90px;

    padding: 34px 0;

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

.urban-conversion-flow div > span {
    color: var(--urban-gold);

    font-size: 0.65rem;
    font-weight: 900;
}

.urban-conversion-flow strong {
    display: block;

    margin-top: 10px;

    color: var(--urban-green);

    font-size: 1rem;
}

.urban-conversion-flow p {
    margin: 7px 0 0;

    color: var(--urban-muted);

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

.urban-conversion-flow b {
    color: var(--urban-gold);

    font-weight: 400;
}


/* Mein Beitrag */

.urban-contribution {
    display: grid;

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

    gap: 55px;

    margin-top: 65px;

    padding-top: 30px;

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

.urban-contribution > span,
.urban-extended-scope > span {
    color: var(--urban-gold);

    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.urban-contribution > div {
    display: flex;
    flex-wrap: wrap;

    gap: 12px 28px;
}

.urban-contribution p {
    position: relative;

    margin: 0;

    padding-left: 15px;

    color: var(--urban-muted);

    font-size: 0.87rem;
    font-weight: 700;
}

.urban-contribution p::before {
    content: "";

    position: absolute;

    top: 0.68em;
    left: 0;

    width: 5px;
    height: 5px;

    background: var(--urban-gold);

    border-radius: 50%;
}


/* Weitergedacht */

.urban-extended-scope {
    display: grid;

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

    gap: 55px;

    margin-top: 28px;
}

.urban-extended-scope p {
    margin: 0;

    color: var(--urban-muted);

    font-size: 0.82rem;
}


.urban-landingpage-image {
    width: 100%;
    display: block;
}


/* =========================================================
   OCEYAN OPTICS CASE STUDY
   ========================================================= */

.case-study-oceyan {
    --oceyan-navy: #062c3b;
    --oceyan-deep: #031f2a;
    --oceyan-blue: #0c4051;
    --oceyan-gold: #c59a45;
    --oceyan-sand: #e5dac8;
    --oceyan-cream: #f4f0e9;
    --oceyan-paper: #fbfaf7;
    --oceyan-ink: #10252d;
    --oceyan-muted: #68747a;
    --oceyan-line: rgba(16, 37, 45, 0.15);

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

    /* Related projects */
    --case-related-bg: var(--oceyan-paper);
    --case-related-ink: var(--oceyan-ink);
    --case-related-muted: var(--oceyan-muted);
    --case-related-accent: var(--oceyan-blue);
    --case-related-accent-decor: var(--oceyan-gold);
    --case-related-line: var(--oceyan-line);
    --case-related-hover: rgba(12, 64, 81, 0.075);
    --case-related-tint: rgba(12, 64, 81, 0.050);
}


/* =========================================================
   PROJECT BAR
   ========================================================= */

.oceyan-project-bar {
    color: var(--oceyan-ink);
    background: var(--oceyan-paper);

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

.oceyan-project-bar-inner {
    min-height: 84px;

    display: grid;
    grid-template-columns: 145px 1fr auto;
    align-items: center;

    gap: 36px;
}

.oceyan-project-bar span {
    color: var(--oceyan-gold);

    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.oceyan-project-bar strong {
    font-size: 1rem;
}

.oceyan-project-bar p {
    margin: 0;

    color: var(--oceyan-muted);

    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


/* =========================================================
   GEMEINSAME ELEMENTE
   ========================================================= */

.oceyan-overline,
.oceyan-section-label {
    margin: 0 0 18px;

    color: var(--oceyan-gold);

    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}


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

.oceyan-hero {
    position: relative;

    overflow: hidden;

    padding: 90px 0 125px;

    color: #fff;

    background:
        radial-gradient(
            circle at 82% 30%,
            rgba(197, 154, 69, 0.14),
            transparent 32%
        ),
        var(--oceyan-deep);
}

.oceyan-hero-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.04fr)
        minmax(460px, 0.96fr);

    align-items: center;

    gap: 90px;
}


/* Back */

.oceyan-back-link {
    display: inline-flex;

    margin-bottom: 38px;

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

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

    transition: color var(--transition);
}

.oceyan-back-link:hover {
    color: #fff;
}


/* H1 */

.oceyan-hero h1 {
    max-width: 880px;

    margin: 0;

    color: #fff;

    font-size: clamp(3.7rem, 5vw, 5.7rem);
    font-weight: 800;

    line-height: 0.98;
    letter-spacing: -0.06em;
}

.oceyan-hero-line {
    display: block;
    color: #fff;
}

.oceyan-hero-line-accent {
    color: var(--oceyan-gold);
}

.oceyan-hero-lead {
    max-width: 660px;

    margin: 31px 0 0;

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

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


/* Meta */

.oceyan-hero-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;

    max-width: 620px;

    margin-top: 48px;

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

.oceyan-hero-meta > div {
    padding: 22px 28px 0 0;
}

.oceyan-hero-meta > div + div {
    padding-left: 28px;

    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.oceyan-hero-meta span {
    display: block;

    color: var(--oceyan-gold);

    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.oceyan-hero-meta strong {
    display: block;

    margin-top: 8px;

    color: #fff;

    font-size: 0.94rem;
}


/* Hero Visual */

.oceyan-hero-visual {
    position: relative;
}

.oceyan-hero-frame {
    width: 82%;
    height: 630px;

    margin-left: auto;

    overflow: hidden;

    background: var(--oceyan-paper);

    box-shadow:
        0 42px 95px rgba(0, 0, 0, 0.35);
}

.oceyan-hero-frame img {
    width: 100%;

    display: block;
}

.oceyan-hero-note {
    position: absolute;

    left: 0;
    bottom: 50px;

    width: 310px;

    padding: 30px 32px;

    color: var(--oceyan-deep);
    background: var(--oceyan-sand);

    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.25);
}

.oceyan-hero-note span {
    color: var(--oceyan-gold);

    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.oceyan-hero-note p {
    margin: 14px 0 0;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 1.45rem;
    line-height: 1.2;
}


/* =========================================================
   01 KONFLIKT
   ========================================================= */

.oceyan-conflict {
    padding: 135px 0;

    background: var(--oceyan-paper);
}

.oceyan-conflict-grid {
    display: grid;

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

    gap: 55px;

    align-items: start;
}

.oceyan-section-index {
    padding-top: 9px;

    color: var(--oceyan-gold);

    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.oceyan-conflict-heading h2,
.oceyan-story-heading h2 {
    margin: 0;

    color: var(--oceyan-navy);

    font-size: clamp(2.9rem, 4.5vw, 4.6rem);
    font-weight: 800;

    line-height: 1;
    letter-spacing: -0.055em;
}

.oceyan-conflict-heading h2 span,
.oceyan-story-heading h2 span {
    display: block;
}

.oceyan-conflict-copy p {
    margin: 0;

    color: var(--oceyan-muted);

    line-height: 1.75;
}

.oceyan-conflict-copy p + p {
    margin-top: 22px;
}

.oceyan-conflict-copy .oceyan-large-copy {
    color: var(--oceyan-ink);

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

    line-height: 1.5;
}


/* Spannung */

.oceyan-tension {
    display: grid;

    grid-template-columns:
        1fr
        1px
        1fr;

    gap: 60px;

    margin-top: 95px;

    padding: 45px 0;

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

.oceyan-tension > div:not(.oceyan-tension-divider) {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 22px;
}

.oceyan-tension small {
    grid-column: 1 / -1;

    color: var(--oceyan-gold);

    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.oceyan-tension strong {
    color: var(--oceyan-navy);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 1.85rem;
    font-weight: 500;
}

.oceyan-tension span {
    color: var(--oceyan-muted);

    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.oceyan-tension-divider {
    background: var(--oceyan-line);
}


/* =========================================================
   02 STORYLINE
   ========================================================= */

.oceyan-story {
    padding: 140px 0;

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

.oceyan-story-heading {
    max-width: 970px;
}

.oceyan-story-heading > p:last-child {
    max-width: 680px;

    margin: 27px 0 0;

    color: var(--oceyan-muted);

    line-height: 1.75;
}


/* Timeline */

.oceyan-storyline {
    display: grid;
    grid-template-columns: repeat(5, 1fr);

    margin-top: 85px;

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

.oceyan-story-step {
    position: relative;

    min-height: 350px;

    padding: 36px 28px;
}

.oceyan-story-step:first-child {
    padding-left: 0;
}

.oceyan-story-step + .oceyan-story-step {
    border-left: 1px solid var(--oceyan-line);
}

.oceyan-story-number {
    display: block;

    color: var(--oceyan-gold);

    font-size: 0.68rem;
    font-weight: 900;
}

.oceyan-story-step small {
    display: block;

    margin-top: 55px;

    color: var(--oceyan-muted);

    font-size: 0.64rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.oceyan-story-step h3 {
    margin: 12px 0 0;

    color: var(--oceyan-navy);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 1.55rem;
    font-weight: 500;

    line-height: 1.15;
}

.oceyan-story-step p {
    margin: 18px 0 0;

    color: var(--oceyan-muted);

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


/* =========================================================
   03 WEB STORYTELLING
   ========================================================= */

.oceyan-web-intro {
    padding: 135px 0 185px;

    color: #fff;
    background: var(--oceyan-navy);
}

.oceyan-web-heading {
    max-width: 980px;
}

.oceyan-web-heading h2 {
    margin: 0;

    font-size: clamp(3rem, 5vw, 5.2rem);
    font-weight: 800;

    line-height: 1;
    letter-spacing: -0.055em;
}

.oceyan-web-heading h2 span {
    display: block;

    color: var(--oceyan-gold);
}

.oceyan-web-heading > p:last-child {
    max-width: 680px;

    margin: 28px 0 0;

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

    line-height: 1.75;
}


/* Stage */

.oceyan-web-stage {
    display: flow-root;

    padding-bottom: 120px;

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

.oceyan-web-showcase {
    margin-top: -100px;
}


/* Browser */

.oceyan-browser {
    margin: 0;

    overflow: hidden;

    background: #fff;

    border-radius: 16px;

    box-shadow:
        0 42px 100px rgba(5, 41, 55, 0.18);
}

.oceyan-browser-bar {
    min-height: 46px;

    display: grid;

    grid-template-columns:
        100px
        1fr
        100px;

    align-items: center;

    padding: 0 18px;

    color: #788286;
    background: #ececea;
}

.oceyan-browser-dots {
    display: flex;

    gap: 7px;
}

.oceyan-browser-dots span {
    width: 9px;
    height: 9px;

    background: #bec3c2;

    border-radius: 50%;
}

.oceyan-browser-bar p {
    margin: 0;

    text-align: center;

    font-size: 0.68rem;
    font-weight: 700;
}

.oceyan-browser-bar > span {
    justify-self: end;

    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.oceyan-mockup-image {
    width: 100%;

    display: block;
}


/* Copy Principle */

.oceyan-copy-principle {
    display: grid;

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

    gap: 60px;

    margin-top: 80px;

    padding-top: 30px;

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

.oceyan-copy-principle > span {
    color: var(--oceyan-gold);

    font-size: 0.67rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.oceyan-copy-principle > div {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1.3fr;

    align-items: center;

    gap: 30px;
}

.oceyan-copy-principle p {
    margin: 0;

    color: var(--oceyan-navy);

    font-family: Georgia, "Times New Roman", serif;

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

.oceyan-copy-principle p small {
    display: block;

    margin-bottom: 10px;

    color: var(--oceyan-muted);

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

    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.oceyan-copy-principle b {
    color: var(--oceyan-gold);

    font-size: 1.5rem;
    font-weight: 400;
}


/* =========================================================
   04 VIDEO
   ========================================================= */

.oceyan-video {
    padding: 140px 0;

    color: #fff;
    background: var(--oceyan-deep);
}

.oceyan-video-grid {
    display: grid;

    grid-template-columns:
        minmax(340px, 0.8fr)
        minmax(0, 1.2fr);

    gap: 100px;
}

.oceyan-video-copy h2 {
    margin: 0;

    font-size: clamp(2.8rem, 4.6vw, 4.7rem);
    font-weight: 800;

    line-height: 1;
    letter-spacing: -0.055em;
}

.oceyan-video-copy h2 span {
    display: block;

    color: var(--oceyan-gold);
}

.oceyan-video-copy > p:last-of-type {
    max-width: 570px;

    margin: 27px 0 0;

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

    line-height: 1.75;
}


/* Zahlen */

.oceyan-video-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    margin-top: 55px;

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

.oceyan-video-facts > div {
    padding: 24px 18px 0 0;
}

.oceyan-video-facts > div + div {
    padding-left: 18px;

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

.oceyan-video-facts strong {
    display: block;

    color: var(--oceyan-gold);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 2.6rem;
    font-weight: 500;
}

.oceyan-video-facts span {
    display: block;

    margin-top: 4px;

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

    font-size: 0.67rem;
    font-weight: 800;
    text-transform: uppercase;
}


/* Video Timeline */

.oceyan-video-timeline {
    border-top: 1px solid rgba(255, 255, 255, 0.17);
}

.oceyan-video-timeline > div {
    display: grid;

    grid-template-columns:
        80px
        190px
        minmax(0, 1fr);

    gap: 28px;

    align-items: baseline;

    padding: 25px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.17);
}

.oceyan-video-timeline span {
    color: var(--oceyan-gold);

    font-size: 0.67rem;
    font-weight: 900;
}

.oceyan-video-timeline strong {
    color: #fff;

    font-size: 1rem;
}

.oceyan-video-timeline p {
    margin: 0;

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

    font-size: 0.84rem;
    line-height: 1.55;
}


/* =========================================================
   05 BRAND VOICE
   ========================================================= */

.oceyan-voice {
    padding: 140px 0 110px;

    background: var(--oceyan-paper);
}

.oceyan-voice-layout {
    display: grid;

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

    gap: 100px;

    align-items: start;
}

.oceyan-voice-heading h2 {
    margin: 0;

    color: var(--oceyan-navy);

    font-size: clamp(2.8rem, 4.5vw, 4.5rem);
    font-weight: 800;

    line-height: 1;
    letter-spacing: -0.055em;
}

.oceyan-voice-heading h2 span {
    display: block;
}


/* Statement */

.oceyan-voice-example {
    padding: 38px;

    background: var(--oceyan-cream);

    border-left: 3px solid var(--oceyan-gold);
}

.oceyan-voice-example > span {
    color: var(--oceyan-gold);

    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.oceyan-voice-example p {
    margin: 22px 0 0;

    color: var(--oceyan-muted);

    line-height: 1.72;
}

.oceyan-voice-example strong {
    display: block;

    margin-top: 28px;

    color: var(--oceyan-navy);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 1.7rem;
    font-weight: 500;

    line-height: 1.2;
}


/* Contribution */

.oceyan-contribution {
    display: grid;

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

    gap: 55px;

    margin-top: 90px;

    padding-top: 30px;

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

.oceyan-contribution > span {
    color: var(--oceyan-gold);

    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.oceyan-contribution > div {
    display: flex;
    flex-wrap: wrap;

    gap: 12px 28px;
}

.oceyan-contribution p {
    position: relative;

    margin: 0;

    padding-left: 15px;

    color: var(--oceyan-muted);

    font-size: 0.87rem;
    font-weight: 700;
}

.oceyan-contribution p::before {
    content: "";

    position: absolute;

    top: 0.68em;
    left: 0;

    width: 5px;
    height: 5px;

    background: var(--oceyan-gold);

    border-radius: 50%;
}


/* =========================================================
   NOVARING CASE STUDY
   ========================================================= */

.case-study-novaring {
    --nova-black: #0b0b0a;
    --nova-charcoal: #171613;
    --nova-charcoal-soft: #211f1b;

    --nova-bronze: #bd8951;
    --nova-champagne: #d7ad77;

    --nova-ivory: #f5f0e8;
    --nova-paper: #fbf8f2;
    --nova-stone: #e4ded5;
    --nova-stone-light: #eee9e1;

    --nova-ink: #181715;
    --nova-muted: #706a62;

    --nova-light-line: rgba(24, 23, 21, 0.14);
    --nova-dark-line: rgba(215, 173, 119, 0.2);

    color: var(--nova-ink);
    background: var(--nova-ivory);

    /* Related projects */
    --case-related-bg: var(--nova-paper);
    --case-related-ink: var(--nova-ink);
    --case-related-muted: var(--nova-muted);
    --case-related-accent: var(--nova-bronze);
    --case-related-accent-decor: var(--nova-champagne);
    --case-related-line: var(--nova-light-line);
    --case-related-hover: var(--nova-stone-light);
    --case-related-tint: rgba(189, 137, 81, 0.050);
}


/* =========================================================
   PROJECT BAR
   ========================================================= */

.nova-project-bar {
    background: var(--nova-paper);

    border-bottom: 1px solid var(--nova-light-line);
}

.nova-project-bar-inner {
    min-height: 84px;

    display: grid;

    grid-template-columns:
        145px
        1fr
        auto;

    align-items: center;

    gap: 36px;
}

.nova-project-bar span {
    color: var(--nova-bronze);

    font-size: 0.76rem;
    font-weight: 900;

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

.nova-project-bar strong {
    color: var(--nova-ink);

    font-size: 1rem;
}

.nova-project-bar p {
    margin: 0;

    color: var(--nova-muted);

    font-size: 0.76rem;
    font-weight: 800;

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


/* =========================================================
   GEMEINSAME LABEL
   ========================================================= */

.nova-overline,
.nova-section-label {
    margin: 0 0 18px;

    color: var(--nova-bronze);

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

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


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

.nova-hero {
    overflow: hidden;

    padding: 90px 0 120px;

    color: var(--nova-ivory);

    background:
        radial-gradient(
            circle at 82% 30%,
            rgba(189, 137, 81, 0.12),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            #080807 0%,
            #10100e 55%,
            #1b1916 100%
        );
}


/* Layout */

.nova-hero-layout {
    width: min(calc(100% - 64px), 1420px);
    max-width: none;

    display: grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);

    align-items: center;

    gap: 72px;
}

.nova-hero-copy,
.nova-hero-visual {
    min-width: 0;
}


/* Back */

.nova-back-link {
    display: inline-flex;

    margin-bottom: 38px;

    color: rgba(245, 240, 232, 0.65);

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

    transition: color var(--transition);
}

.nova-back-link:hover {
    color: var(--nova-ivory);
}


/* Hero headline */

.nova-hero h1 {
    max-width: 620px;

    margin: 0;

    font-size: clamp(3.5rem, 4.45vw, 5rem);
    font-weight: 850;

    line-height: 0.98;
    letter-spacing: -0.06em;
}

.nova-title-line {
    display: block;

    color: var(--nova-ivory);
}

.nova-title-accent {
    color: var(--nova-champagne);
}


/* Hero lead */

.nova-hero-lead {
    max-width: 650px;

    margin: 31px 0 0;

    color: rgba(245, 240, 232, 0.68);

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


/* Hero meta */

.nova-hero-meta {
    display: grid;

    grid-template-columns:
        0.9fr
        1.25fr
        0.85fr;

    max-width: 720px;

    margin-top: 48px;

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

.nova-hero-meta > div {
    padding: 21px 25px 0 0;
}

.nova-hero-meta > div + div {
    padding-left: 25px;

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

.nova-hero-meta span {
    display: block;

    color: var(--nova-champagne);

    font-size: 0.64rem;
    font-weight: 900;

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

.nova-hero-meta strong {
    display: block;

    margin-top: 8px;

    color: var(--nova-ivory);

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


/* Hero image */

.nova-hero-visual {
    width: 100%;
}

.nova-hero-image {
    width: 100%;

    margin: 0;

    overflow: hidden;

    background: var(--nova-black);

    border: 1px solid rgba(215, 173, 119, 0.17);

    box-shadow:
        0 45px 110px rgba(0, 0, 0, 0.45);
}

.nova-hero-image img {
    width: 100%;

    display: block;
}


/* =========================================================
   GEMEINSAME SECTION HEADINGS
   ========================================================= */

.nova-section-heading {
    max-width: 1050px;
}

.nova-section-heading h2,
.nova-campaigns-heading h2,
.nova-measurement-heading h2 {
    margin: 0;

    font-size: clamp(2.9rem, 4.5vw, 4.7rem);
    font-weight: 820;

    line-height: 1;
    letter-spacing: -0.055em;
}

.nova-section-heading h2 span,
.nova-campaigns-heading h2 span,
.nova-measurement-heading h2 span {
    display: block;
}

.nova-section-heading > p:last-child,
.nova-campaigns-heading > p:last-child,
.nova-measurement-heading > p:last-child {
    max-width: 700px;

    margin: 27px 0 0;

    line-height: 1.75;
}


/* =========================================================
   01 DATA
   ========================================================= */

.nova-data {
    padding: 140px 0;

    background: var(--nova-paper);
}

.nova-data .nova-section-heading > p:last-child {
    color: var(--nova-muted);
}

.nova-data-primary {
    display: grid;

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

    gap: 75px;

    margin-top: 85px;
}


/* Data analysis */

.nova-data-analysis {
    padding-top: 30px;

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

.nova-data-heading {
    display: grid;

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

    gap: 30px;

    align-items: start;
}

.nova-data-heading > div:first-child > span {
    color: var(--nova-bronze);

    font-size: 0.66rem;
    font-weight: 900;

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

.nova-data-heading h3 {
    max-width: 410px;

    margin: 11px 0 0;

    color: var(--nova-ink);

    font-size: 1.55rem;
    line-height: 1.18;

    letter-spacing: -0.03em;
}


/* Highlight */

.nova-data-highlight {
    min-width: 135px;

    text-align: right;
}

.nova-data-highlight strong {
    display: block;

    color: var(--nova-bronze);

    font-size: 2.45rem;
    font-weight: 820;

    line-height: 1;
    letter-spacing: -0.045em;
}

.nova-data-highlight span {
    display: block;

    margin-top: 7px;

    color: var(--nova-muted);

    font-size: 0.64rem;
    font-weight: 850;

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


/* Rows */

.nova-data-bars {
    display: grid;

    gap: 27px;

    margin-top: 48px;
}

.nova-data-row {
    display: grid;

    grid-template-columns:
        205px
        minmax(110px, 1fr)
        70px;

    gap: 18px;

    align-items: center;
}

.nova-data-definition strong {
    display: block;

    color: var(--nova-ink);

    font-size: 0.84rem;
}

.nova-data-definition span {
    display: block;

    margin-top: 4px;

    color: var(--nova-muted);

    font-size: 0.7rem;
    line-height: 1.4;
}

.nova-data-bar {
    height: 7px;

    overflow: hidden;

    background: var(--nova-stone);
}

.nova-data-bar > span {
    width: var(--nova-width);
    height: 100%;

    display: block;

    background:
        linear-gradient(
            90deg,
            var(--nova-bronze),
            var(--nova-champagne)
        );
}

.nova-data-row-muted .nova-data-bar > span {
    opacity: 0.45;
}

.nova-data-value {
    text-align: right;
}

.nova-data-value strong {
    display: block;

    color: var(--nova-ink);

    font-size: 0.83rem;
}

.nova-data-value span {
    display: block;

    margin-top: 3px;

    color: var(--nova-muted);

    font-size: 0.68rem;
}


/* Conclusion */

.nova-data-conclusion {
    margin-top: 42px;

    padding-top: 24px;

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

.nova-data-conclusion > span {
    color: var(--nova-bronze);

    font-size: 0.65rem;
    font-weight: 900;

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

.nova-data-conclusion p {
    max-width: 590px;

    margin: 11px 0 0;

    color: var(--nova-muted);

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


/* Transparency */

.nova-data-note {
    display: grid;

    grid-template-columns:
        150px
        minmax(0, 720px);

    gap: 55px;

    margin-top: 90px;

    padding-top: 28px;

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

.nova-data-note span {
    color: var(--nova-bronze);

    font-size: 0.66rem;
    font-weight: 900;

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

.nova-data-note p {
    margin: 0;

    color: var(--nova-muted);

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


/* =========================================================
   02 SEGMENTATION
   ========================================================= */

.nova-segments {
    padding: 140px 0;

    background: var(--nova-stone-light);
}

.nova-segments .nova-section-heading > p:last-child {
    color: var(--nova-muted);
}

.nova-segments-grid {
    display: grid;

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

    gap: 1px;

    margin-top: 85px;

    background: var(--nova-light-line);

    border-top: 1px solid var(--nova-light-line);
    border-bottom: 1px solid var(--nova-light-line);
}

.nova-segment {
    padding: 45px 48px;

    background: var(--nova-stone-light);
}

.nova-segment:first-child {
    padding-left: 0;
}

.nova-segment:last-child {
    padding-right: 0;
}

.nova-segment-header {
    display: flex;

    align-items: center;

    gap: 25px;
}

.nova-segment-index {
    color: var(--nova-bronze);

    font-size: 0.7rem;
    font-weight: 900;
}

.nova-segment-label {
    color: var(--nova-bronze);

    font-size: 0.67rem;
    font-weight: 900;

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

.nova-segment h3 {
    max-width: 530px;

    margin: 21px 0 0;

    color: var(--nova-ink);

    font-size: 2rem;
    font-weight: 790;

    line-height: 1.08;
    letter-spacing: -0.04em;
}


/* Segment stats */

.nova-segment-stats {
    display: grid;

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


    margin-top: 36px;

    border-top: 1px solid var(--nova-light-line);
    border-bottom: 1px solid var(--nova-light-line);
}

.nova-segment-stats-two {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.nova-segment-stats > div {
    min-height: 88px;

    display: grid;
    align-content: center;

    padding: 15px 22px;

    text-align: center;
}

.nova-segment-stats > div + div {
    padding-left: 22px;

    border-left: 1px solid var(--nova-light-line);
}

.nova-segment-stats strong {
    display: block;

    color: var(--nova-bronze);

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

.nova-segment-stats span {
    display: block;

    margin-top: 8px;

    color: var(--nova-muted);

    font-size: 0.64rem;
    font-weight: 800;

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

.nova-segment > p {
    max-width: 540px;

    margin: 30px 0 0;

    color: var(--nova-muted);

    line-height: 1.7;
}


/* Consequence */

.nova-segment-consequence {
    margin-top: 30px;
}

.nova-segment-consequence span {
    display: block;

    color: var(--nova-bronze);

    font-size: 0.64rem;
    font-weight: 900;

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

.nova-segment-consequence strong {
    display: block;

    max-width: 550px;

    margin-top: 9px;

    color: var(--nova-ink);

    font-size: 0.86rem;
    line-height: 1.55;
}


/* Logic */

.nova-logic {
    display: flex;

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

    gap: 32px;

    margin-top: 72px;
}

.nova-logic span {
    color: var(--nova-ink);

    font-size: 0.72rem;
    font-weight: 850;

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

.nova-logic b {
    color: var(--nova-bronze);

    font-size: 1rem;
    font-weight: 400;
}


/* =========================================================
   03 CAMPAIGNS
   ========================================================= */

.nova-campaigns {
    padding: 140px 0;

    color: var(--nova-ivory);

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(189, 137, 81, 0.12),
            transparent 25%
        ),
        var(--nova-charcoal);
}

.nova-campaigns-heading {
    max-width: 1000px;
}

.nova-campaigns-heading h2 {
    color: var(--nova-ivory);
}

.nova-campaigns-heading h2 span:last-child {
    color: var(--nova-champagne);
}

.nova-campaigns-heading > p:last-child {
    color: rgba(245, 240, 232, 0.62);
}


/* Rows */

.nova-campaign-row {
    display: grid;

    grid-template-columns:
        minmax(330px, 0.58fr)
        minmax(700px, 1.42fr);

    align-items: center;

    gap: 70px;

    margin-top: 100px;
}

.nova-campaign-row-reverse {
    grid-template-columns:
        minmax(700px, 1.42fr)
        minmax(330px, 0.58fr);
}


/* Copy */

.nova-campaign-index {
    color: var(--nova-champagne);

    font-size: 0.67rem;
    font-weight: 900;

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

.nova-campaign-copy h3 {
    max-width: 440px;

    margin: 15px 0 0;

    color: var(--nova-ivory);

    font-size: 2.35rem;
    font-weight: 800;

    line-height: 1.05;
    letter-spacing: -0.045em;
}

.nova-campaign-copy > p {
    max-width: 470px;

    margin: 25px 0 0;

    color: rgba(245, 240, 232, 0.62);

    line-height: 1.72;
}

.nova-campaign-details {
    margin: 34px 0 0;

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

.nova-campaign-details > div {
    display: grid;

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

    gap: 20px;

    padding: 13px 0;

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

.nova-campaign-details dt {
    color: var(--nova-champagne);

    font-size: 0.63rem;
    font-weight: 850;

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

.nova-campaign-details dd {
    margin: 0;

    color: rgba(245, 240, 232, 0.75);

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


/* Image */

.nova-campaign-image {
    margin: 0;

    background: var(--nova-black);

    border: 1px solid rgba(215, 173, 119, 0.16);

    box-shadow:
        0 38px 90px rgba(0, 0, 0, 0.38);
}

.nova-image-button {
    position: relative;

    width: 100%;

    display: block;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: zoom-in;
}

.nova-image-button img {
    width: 100%;

    display: block;

    transition:
        transform 220ms ease,
        filter 220ms ease;
}

.nova-image-button:hover img {
    transform: scale(1.006);

    filter: brightness(0.92);
}

.nova-image-button > span {
    position: absolute;

    right: 17px;
    bottom: 17px;

    padding: 8px 11px;

    color: var(--nova-ivory);

    background: rgba(11, 11, 10, 0.88);

    border: 1px solid rgba(215, 173, 119, 0.3);

    font-size: 0.66rem;
    font-weight: 800;

    opacity: 0;

    transition: opacity 180ms ease;
}

.nova-image-button:hover > span {
    opacity: 1;
}


/* Campaign KPIs */

.nova-campaign-kpis {
    display: grid;

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

    gap: 55px;

    margin-top: 95px;

    padding-top: 30px;

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

.nova-campaign-kpis > span {
    color: var(--nova-champagne);

    font-size: 0.66rem;
    font-weight: 900;

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

.nova-campaign-kpis > div {
    display: flex;
    flex-wrap: wrap;

    gap: 11px 29px;
}

.nova-campaign-kpis p {
    position: relative;

    margin: 0;

    padding-left: 14px;

    color: rgba(245, 240, 232, 0.68);

    font-size: 0.84rem;
    font-weight: 700;
}

.nova-campaign-kpis p::before {
    content: "";

    position: absolute;

    top: 0.67em;
    left: 0;

    width: 5px;
    height: 5px;

    background: var(--nova-champagne);

    border-radius: 50%;
}


/* =========================================================
   04 MEASUREMENT
   ========================================================= */

.nova-measurement {
    padding: 140px 0;

    background: var(--nova-paper);
}

.nova-measurement-heading {
    max-width: 1000px;
}

.nova-measurement-heading h2 {
    color: var(--nova-ink);
}

.nova-measurement-heading h2 span:last-child {
    color: var(--nova-bronze);
}

.nova-measurement-heading > p:last-child {
    color: var(--nova-muted);
}


/* Process */

.nova-measurement-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 100px;

    margin-top: 85px;
}

.nova-measurement-process {
    border-top: 1px solid var(--nova-light-line);
}

.nova-measurement-process > div {
    display: grid;

    grid-template-columns:
        45px
        135px
        minmax(0, 1fr);

    gap: 25px;

    align-items: baseline;

    padding: 22px 0;

    border-bottom: 1px solid var(--nova-light-line);
}

.nova-measurement-process span {
    color: var(--nova-bronze);

    font-size: 0.65rem;
    font-weight: 900;
}

.nova-measurement-process strong {
    color: var(--nova-ink);

    font-size: 0.92rem;
}

.nova-measurement-process p {
    margin: 0;

    color: var(--nova-muted);

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


/* Metric columns */

.nova-measurement-content {
    display: grid;

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

    gap: 1px;

    background: var(--nova-light-line);

    border-top: 1px solid var(--nova-light-line);
    border-bottom: 1px solid var(--nova-light-line);
}

.nova-measurement-column {
    padding: 30px 36px;

    background: var(--nova-paper);
}

.nova-measurement-column > span {
    color: var(--nova-bronze);

    font-size: 0.65rem;
    font-weight: 900;

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

.nova-measurement-column h3 {
    margin: 11px 0 0;

    color: var(--nova-ink);

    font-size: 1.45rem;
}

.nova-measurement-column ul {
    display: grid;

    gap: 11px;

    margin: 27px 0 0;

    padding: 0;

    list-style: none;
}

.nova-measurement-column li {
    padding-bottom: 11px;

    color: var(--nova-muted);

    font-size: 0.84rem;

    border-bottom: 1px solid var(--nova-light-line);
}


/* Optimization */

.nova-optimization {
    display: grid;

    grid-template-columns:
        150px
        minmax(0, 800px);

    gap: 55px;

    margin-top: 75px;

    padding-top: 28px;

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

.nova-optimization span {
    color: var(--nova-bronze);

    font-size: 0.65rem;
    font-weight: 900;

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

.nova-optimization p {
    margin: 0;

    color: var(--nova-muted);

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


/* =========================================================
   CASE STUDY ABSCHLUSS
   ========================================================= */

.nova-closing {
    color: var(--nova-ivory);
    background: var(--nova-charcoal);
}

.nova-closing-inner {
    padding-top: 120px;
    padding-bottom: 105px;
}


/* Intro */

.nova-closing-intro {
    max-width: 960px;
}

.nova-closing-intro h2 {
    max-width: 850px;

    margin: 0;

    color: var(--nova-ivory);

    font-size: clamp(2.9rem, 4.5vw, 4.7rem);
    font-weight: 820;

    line-height: 1;
    letter-spacing: -0.055em;
}

.nova-closing-intro h2 span {
    display: block;

    color: var(--nova-champagne);
}

.nova-closing-intro > p:last-child {
    max-width: 690px;

    margin: 27px 0 0;

    color: rgba(245, 240, 232, 0.68);

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


/* Contribution Grid */

.nova-contribution-grid {
    display: grid;

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

    margin-top: 80px;

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

.nova-contribution-grid > div {
    min-height: 235px;

    padding: 32px 30px;
}

.nova-contribution-grid > div:first-child {
    padding-left: 0;
}

.nova-contribution-grid > div + div {
    border-left: 1px solid var(--nova-dark-line);
}

.nova-contribution-grid span {
    display: block;

    color: var(--nova-champagne);

    font-size: 0.66rem;
    font-weight: 900;
}

.nova-contribution-grid strong {
    display: block;

    margin-top: 40px;

    color: var(--nova-ivory);

    font-size: 1.15rem;
}

.nova-contribution-grid p {
    max-width: 250px;

    margin: 13px 0 0;

    color: rgba(245, 240, 232, 0.58);

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


/* weitere Bestandteile */

.nova-closing-skills {
    display: grid;

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

    gap: 55px;

    margin-top: 50px;

    padding-top: 28px;

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

.nova-closing-skills > span {
    color: var(--nova-champagne);

    font-size: 0.66rem;
    font-weight: 900;

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

.nova-closing-skills > div {
    display: flex;
    flex-wrap: wrap;

    gap: 12px 30px;
}

.nova-closing-skills p {
    position: relative;

    margin: 0;

    padding-left: 15px;

    color: rgba(245, 240, 232, 0.66);

    font-size: 0.875rem;
    font-weight: 700;
}

.nova-closing-skills p::before {
    content: "";

    position: absolute;

    top: 0.68em;
    left: 0;

    width: 5px;
    height: 5px;

    background: var(--nova-champagne);

    border-radius: 50%;
}





/* =========================================================
   LIGHTBOX
   ========================================================= */

.nova-lightbox {
    position: fixed;

    inset: 0;

    z-index: 1000;

    display: grid;
    place-items: center;

    padding: 55px;

    background: rgba(7, 7, 6, 0.95);

    backdrop-filter: blur(12px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 220ms ease,
        visibility 220ms ease;
}

.nova-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.nova-lightbox-inner {
    width: min(1600px, 94vw);
    height: min(920px, 88vh);

    display: grid;
    place-items: center;
}

.nova-lightbox-image {
    width: auto;
    max-width: 100%;

    height: auto;
    max-height: 100%;

    object-fit: contain;

    box-shadow:
        0 45px 120px rgba(0, 0, 0, 0.65);
}

.nova-lightbox-close {
    position: absolute;

    top: 24px;
    right: 30px;

    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    padding: 0;

    color: #fff;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;

    font-size: 1.6rem;

    cursor: pointer;
}

body.nova-lightbox-open {
    overflow: hidden;
}


/* =========================================================
   PROJECT CONTEXT
   ========================================================= */

.nova-context {
    padding: 54px 0;

    color: var(--nova-ivory);
    background: var(--nova-charcoal-soft);

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

.nova-context-layout {
    display: grid;

    grid-template-columns:
        170px
        minmax(0, 900px);

    gap: 65px;

    align-items: start;
}

.nova-context-layout > span {
    padding-top: 3px;

    color: var(--nova-champagne);

    font-size: 0.72rem;
    font-weight: 900;

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

.nova-context-layout p {
    max-width: 900px;

    margin: 0;

    color: rgba(245, 240, 232, 0.76);

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

.nova-context-layout strong {
    color: var(--nova-ivory);
}


/* =========================================================
   NOVARING TYPOGRAPHY SYSTEM
   ========================================================= */

/* regulärer erklärender Fließtext */

.nova-section-heading > p:last-child,
.nova-campaigns-heading > p:last-child,
.nova-measurement-heading > p:last-child,
.nova-segment > p,
.nova-campaign-copy > p {
    font-size: 1rem;
    line-height: 1.75;
}


/* kompakter erklärender Text */

.nova-data-conclusion p,
.nova-optimization p {
    font-size: 0.95rem;
    line-height: 1.7;
}


/* echte Kleininformationen / Labels */

.nova-data-note p,
.nova-data-definition span,
.nova-data-value span,
.nova-measurement-process p,
.nova-measurement-column li,
.nova-campaign-details dd {
    font-size: 0.875rem;
}


/* =========================================================
   CASE STUDIES – WEITERE AUSGEWÄHLTE PROJEKTE
   Gemeinsame Struktur, projektspezifische Farbwelt
   ========================================================= */

.case-related {
    position: relative;
    overflow: hidden;

    padding: 82px 0 0;

    color:
        var(
            --case-related-ink,
            var(--color-ink)
        );

    background:
        linear-gradient(
            180deg,
            var(--case-related-tint, transparent) 0%,
            transparent 48%
        ),
        var(
            --case-related-bg,
            var(--color-offwhite)
        );

    border-top:
        1px solid
        var(
            --case-related-line,
            rgba(16, 32, 24, 0.12)
        );
}


/* Kopf */

.case-related-head {
    display: flex;

    align-items: end;
    justify-content: space-between;

    gap: 80px;
}

.case-related-head > div > span {
    color:
        var(
            --case-related-accent,
            var(--color-forest-light)
        );

    font-size: 0.67rem;
    font-weight: 900;

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

.case-related-head h2 {
    max-width: 680px;

    margin: 12px 0 0;

    color:
        var(
            --case-related-ink,
            var(--color-ink)
        );

    font-size: clamp(2rem, 3vw, 2.7rem);
    font-weight: 820;

    line-height: 1.04;
    letter-spacing: -0.045em;
}


/* Alle Projekte ansehen */

.case-related-head > a {
    display: inline-flex;

    align-items: center;

    gap: 14px;

    flex: 0 0 auto;

    color:
        var(
            --case-related-ink,
            var(--color-ink)
        );

    font-size: 0.85rem;
    font-weight: 800;

    text-decoration: none;

    transition:
        color var(--transition);
}

.case-related-head > a > span {
    color:
        var(
            --case-related-accent-decor,
            var(--case-related-accent, var(--color-forest-light))
        );

    font-size: 1.15rem;

    transition:
        transform var(--transition);
}

.case-related-head > a:hover,
.case-related-head > a:focus-visible {
    color:
        var(
            --case-related-accent,
            var(--color-forest-light)
        );
}

.case-related-head > a:hover > span,
.case-related-head > a:focus-visible > span {
    transform:
        translate(4px, -4px);
}


/* Projekte */

.case-related-grid {
    display: grid;

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

    margin-top: 52px;

    border-top:
        1px solid
        var(
            --case-related-line,
            rgba(16, 32, 24, 0.12)
        );
}

.case-related-project {
    min-height: 225px;

    display: grid;

    grid-template-columns:
        55px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 30px;

    padding:
        34px
        44px
        34px
        0;

    color:
        var(
            --case-related-ink,
            var(--color-ink)
        );

    border-bottom:
        1px solid
        var(
            --case-related-line,
            rgba(16, 32, 24, 0.12)
        );

    text-decoration: none;

    transition:
        background 200ms ease;
}

.case-related-project + .case-related-project {
    padding-left: 44px;
    padding-right: 0;

    border-left:
        1px solid
        var(
            --case-related-line,
            rgba(16, 32, 24, 0.12)
        );
}

.case-related-project:hover,
.case-related-project:focus-visible {
    background:
        var(
            --case-related-hover,
            rgba(47, 106, 80, 0.055)
        );
}


/* Nummer */

.case-related-number {
    align-self: start;

    padding-top: 7px;

    color:
        var(
            --case-related-accent-decor,
            var(--case-related-accent, var(--color-forest-light))
        );

    font-size: 0.68rem;
    font-weight: 900;
}


/* Kategorie */

.case-related-project small {
    display: block;

    color:
        var(
            --case-related-accent,
            var(--color-forest-light)
        );

    font-size: 0.65rem;
    font-weight: 900;

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


/* Projektname */

.case-related-project strong {
    display: block;

    margin-top: 10px;

    color:
        var(
            --case-related-ink,
            var(--color-ink)
        );

    font-size: 2rem;
    font-weight: 820;

    line-height: 1;
    letter-spacing: -0.04em;
}


/* Beschreibung */

.case-related-project p {
    max-width: 380px;

    margin: 13px 0 0;

    color:
        var(
            --case-related-muted,
            #5c6961
        );

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


/* Pfeil */

.case-related-arrow {
    color:
        var(
            --case-related-accent-decor,
            var(--case-related-accent, var(--color-forest-light))
        );

    font-size: 1.55rem;

    transition:
        transform var(--transition);
}

.case-related-project:hover .case-related-arrow,
.case-related-project:focus-visible .case-related-arrow {
    transform:
        translate(5px, -5px);
}


/* =========================================================
   CAREER / EXPERIENCE PAGE
   ========================================================= */

.career-page {
    --career-dark: #071610;
    --career-dark-2: #0b1d15;

    --career-green: #286a4c;
    --career-green-deep: #174936;

    --career-lime: #cdeb39;

    --career-paper: #f5f1e8;
    --career-paper-light: #fbf9f4;

    --career-sage: #e1e9df;
    --career-sage-light: #edf1e9;

    --career-ink: #102319;
    --career-muted: #69726a;

    --career-line: rgba(16, 35, 25, 0.14);
    --career-dark-line: rgba(205, 235, 57, 0.18);

    color: var(--career-ink);

    background: var(--career-paper-light);
}


/* =========================================================
   HELPERS
   ========================================================= */

.career-kicker {
    margin: 0;

    color: var(--career-green);

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

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

.career-kicker-light {
    color: var(--career-lime);
}

.career-lime {
    color: var(--career-lime);
}

.career-green {
    color: var(--career-green);
}


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

.career-hero {
    position: relative;

    overflow: hidden;

    padding: 105px 0 86px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 83% 22%,
            rgba(205, 235, 57, 0.10),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #06140f 0%,
            #081911 54%,
            #10251a 100%
        );
}

.career-hero::after {
    content: "";

    position: absolute;

    top: 0;
    right: 7%;

    width: 1px;
    height: 100%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(205, 235, 57, 0.16),
            transparent
        );
}


.career-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.06fr)
        minmax(410px, 0.94fr);

    gap: 110px;

    align-items: center;
}


.career-hero-main,
.career-hero-side {
    min-width: 0;
}


/* Hero title */

.career-hero h1 {
    margin: 18px 0 0;

    font-size: clamp(4.05rem, 5.55vw, 6.05rem);
    font-weight: 850;

    line-height: 0.92;
    letter-spacing: -0.065em;
}

.career-hero h1 > span {
    display: block;
}

.career-hero-white {
    color: #ffffff;
}


/* Hero copy */

.career-hero-side {
    position: relative;

    max-width: 590px;

    padding-left: 32px;
}


.career-hero-side-line {
    position: absolute;

    top: 3px;
    bottom: 3px;
    left: 0;

    width: 2px;

    background:
        linear-gradient(
            to bottom,
            var(--career-lime),
            rgba(205, 235, 57, 0.08)
        );
}


.career-hero-side p {
    margin: 0;

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

    font-size: 1rem;
    font-weight: 400;

    line-height: 1.78;
}


.career-hero-side p + p {
    margin-top: 22px;

    color: rgba(255, 255, 255, 0.60);
}


/* Hero facts */

.career-hero-bottom {
    display: grid;

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

    margin-top: 76px;

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


.career-hero-bottom > div {
    padding: 25px 34px 0 0;
}


.career-hero-bottom > div + div {
    padding-left: 34px;

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


.career-hero-bottom span {
    display: block;

    margin-bottom: 11px;

    color: var(--career-lime);

    font-size: 0.64rem;
    font-weight: 900;
}


.career-hero-bottom strong {
    display: block;

    color: #ffffff;

    font-size: 1rem;
}


.career-hero-bottom small {
    display: block;

    margin-top: 5px;

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

    font-size: 0.78rem;
}


/* =========================================================
   COMPANY HEADING
   ========================================================= */

.career-company-heading {
    display: grid;

    grid-template-columns:
        75px
        minmax(0, 1fr)
        auto;

    gap: 31px;

    align-items: start;

    padding-bottom: 32px;

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


.career-company-id {
    padding-top: 5px;
}


.career-company-id > span {
    display: block;

    color: var(--career-green);

    font-size: 0.72rem;
    font-weight: 900;
}


.career-company-id p {
    margin: 8px 0 0;

    color: var(--career-muted);

    font-size: 0.66rem;
}


.career-company-name h2 {
    margin: 0;

    font-size: clamp(3rem, 4.3vw, 4.4rem);
    font-weight: 835;

    line-height: 1;
    letter-spacing: -0.052em;
}


.career-company-name p {
    margin: 10px 0 0;

    color: var(--career-muted);

    font-size: 0.96rem;
    font-weight: 700;
}


.career-company-meta {
    display: grid;

    gap: 7px;

    text-align: right;
}


.career-company-meta strong {
    font-size: 0.87rem;
}


.career-company-meta span {
    color: var(--career-muted);

    font-size: 0.79rem;
}


/* =========================================================
   BREUNING INTRO
   ========================================================= */

.career-breuning-intro {
    padding: 125px 0 105px;

    background: var(--career-paper-light);
}


.career-breuning-statement {
    display: grid;

    grid-template-columns:
        minmax(460px, 1fr)
        minmax(0, 0.85fr);

    gap: 110px;

    align-items: end;

    margin-top: 78px;
}


.career-breuning-statement h3 {
    margin: 17px 0 0;

    font-size: clamp(2.85rem, 4.35vw, 4.55rem);
    font-weight: 830;

    line-height: 0.99;
    letter-spacing: -0.055em;
}


.career-breuning-statement h3 span {
    display: block;
}


.career-breuning-copy {
    max-width: 570px;
}


.career-breuning-copy p {
    margin: 0;

    color: var(--career-muted);

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


.career-breuning-copy p:first-child {
    color: var(--career-ink);

    font-size: 1.06rem;
}


.career-breuning-copy p + p {
    margin-top: 20px;
}


/* =========================================================
   CAREER STORY
   ========================================================= */

.career-story {
    position: relative;

    overflow: hidden;

    padding: 38px 0 130px;

    background: var(--career-paper);
}


.career-story-inner {
    position: relative;
}


/* Vertical rail */

.career-story-rail {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 50%;

    width: 1px;

    transform: translateX(-50%);

    background: rgba(16, 35, 25, 0.17);
}


.career-story-rail::before,
.career-story-rail::after {
    content: "";

    position: absolute;

    left: 50%;

    width: 7px;
    height: 7px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: var(--career-green);
}


.career-story-rail::before {
    top: 0;
}


.career-story-rail::after {
    bottom: 0;
}


/* Story row */

.career-story-item {
    position: relative;

    display: grid;

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

    align-items: center;

    min-height: 520px;
}


.career-story-item + .career-story-item {
    margin-top: 18px;
}


/* Node */

.career-story-node {
    position: relative;

    z-index: 5;

    display: grid;
    place-items: center;

    height: 100%;
}


.career-story-node::before {
    content: "";

    width: 19px;
    height: 19px;

    border: 1px solid var(--career-green);
    border-radius: 50%;

    background: var(--career-paper);

    box-shadow:
        0 0 0 9px var(--career-paper);
}


.career-story-node span {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--career-green);
}


/* Story content */

.career-story-content {
    position: relative;

    z-index: 3;

    max-width: 520px;

    padding: 48px 0;
}


.career-story-left .career-story-content {
    padding-right: 72px;
}


.career-story-right .career-story-content {
    justify-self: end;

    padding-left: 72px;
}


.career-story-index {
    margin: 0;

    color: var(--career-green);

    font-size: 0.67rem;
    font-weight: 900;

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


.career-story-content h3 {
    max-width: 480px;

    margin: 17px 0 0;

    font-size: clamp(2rem, 2.7vw, 2.7rem);
    font-weight: 820;

    line-height: 1.04;
    letter-spacing: -0.045em;
}


.career-story-content > p:not(.career-story-index) {
    max-width: 470px;

    margin: 20px 0 0;

    color: var(--career-muted);

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


/* =========================================================
   GHOST WORDS
   ========================================================= */

.career-story-space {
    position: relative;

    display: flex;
    align-items: center;

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

    overflow: visible;
}


.career-ghost-word {
    display: block;

    width: 100%;

    color: rgba(40, 106, 76, 0.12);

    font-size: clamp(5.2rem, 7.5vw, 8.1rem);
    font-weight: 950;

    line-height: 0.82;
    letter-spacing: -0.035em;

    white-space: nowrap;

    user-select: none;
}


.career-story-left .career-ghost-word {
    padding-left: 72px;

    text-align: left;
}


.career-story-right .career-ghost-word {
    padding-right: 72px;

    text-align: right;
}


/* Tags */

.career-story-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 27px;
}


.career-story-tags span {
    padding: 8px 12px;

    color: var(--career-green-deep);

    background: rgba(40, 106, 76, 0.08);

    border: 1px solid rgba(40, 106, 76, 0.16);
    border-radius: 999px;

    font-size: 0.7rem;
    font-weight: 750;
}


/* background accents */

.career-story-item::before {
    content: "";

    position: absolute;

    top: 15%;
    bottom: 15%;

    width: 39%;

    pointer-events: none;
}


.career-story-left::before {
    left: -8%;

    background:
        radial-gradient(
            circle,
            rgba(40, 106, 76, 0.055),
            transparent 70%
        );
}


.career-story-right::before {
    right: -8%;

    background:
        radial-gradient(
            circle,
            rgba(205, 235, 57, 0.06),
            transparent 70%
        );
}


/* =========================================================
   STORY SCROLL ANIMATION
   ========================================================= */

@supports (animation-timeline: view()) {

    .career-story-item {
        animation-name: careerStoryIn;
        animation-duration: 1ms;
        animation-fill-mode: both;

        animation-timeline: view();
        animation-range: entry 7% cover 32%;
    }


    .career-story-left {
        --career-story-x: -32px;
    }


    .career-story-right {
        --career-story-x: 32px;
    }


    @keyframes careerStoryIn {

        from {
            opacity: 0;

            transform:
                translateY(42px)
                translateX(var(--career-story-x));
        }

        to {
            opacity: 1;

            transform:
                translateY(0)
                translateX(0);
        }

    }

}


/* =========================================================
   WORKING STYLE / INITIATIVE
   ========================================================= */

.career-initiative {
    padding: 110px 0;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 84% 25%,
            rgba(205, 235, 57, 0.08),
            transparent 29%
        ),
        var(--career-dark);
}


.career-initiative-grid {
    display: grid;

    grid-template-columns:
        minmax(490px, 0.98fr)
        minmax(0, 1.02fr);

    gap: 110px;

    align-items: start;
}


.career-initiative-main {
    min-width: 0;
}


.career-initiative-main h2 {
    margin: 17px 0 0;

    font-size: clamp(3.4rem, 4.6vw, 4.75rem);
    font-weight: 835;

    line-height: 0.98;
    letter-spacing: -0.055em;
}


.career-initiative-main h2 > span {
    display: block;
}


.career-initiative-copy {
    max-width: 590px;

    padding-top: 5px;
}


.career-initiative-copy p {
    margin: 0;

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

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


.career-initiative-copy p:first-child {
    color: rgba(255, 255, 255, 0.9);
}


.career-initiative-copy p + p {
    margin-top: 20px;
}


/* Principles */

.career-principles {
    display: grid;

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

    margin-top: 70px;

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


.career-principle {
    min-height: 205px;

    padding: 28px 36px;
}


.career-principle:first-child {
    padding-left: 0;
}


.career-principle + .career-principle {
    border-left: 1px solid var(--career-dark-line);
}


.career-principle > span {
    color: var(--career-lime);

    font-size: 0.64rem;
    font-weight: 900;
}


.career-principle strong {
    display: block;

    margin-top: 34px;

    font-size: 1.16rem;
}


.career-principle p {
    max-width: 320px;

    margin: 11px 0 0;

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

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


/* =========================================================
   EURES
   ========================================================= */

.career-eures {
    padding: 125px 0 115px;

    overflow: hidden;

    background: var(--career-paper-light);
}


/* =========================================================
   EURES HERO / PACKAGING
   ========================================================= */

.career-eures-stage {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(430px, 0.95fr)
        minmax(0, 0.85fr);

    gap: 120px;

    align-items: end;

    margin-top: 80px;

    padding: 82px 0 78px;

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


/* großes Hintergrundwort */

.career-eures-word {
    position: absolute;

    top: 48px;
    right: 0;

    z-index: 0;

    color: rgba(40, 106, 76, 0.085);

    font-size: clamp(6rem, 9vw, 9.2rem);
    font-weight: 950;

    line-height: 0.82;
    letter-spacing: -0.035em;

    white-space: nowrap;

    user-select: none;
    pointer-events: none;
}


.career-eures-main,
.career-eures-copy {
    position: relative;

    z-index: 2;
}


.career-eures-main h3 {
    max-width: 560px;

    margin: 17px 0 0;

    font-size: clamp(2.8rem, 4.25vw, 4.4rem);
    font-weight: 835;

    line-height: 0.99;
    letter-spacing: -0.055em;
}


.career-eures-main h3 > span {
    display: block;
}


.career-eures-copy {
    max-width: 570px;
}


.career-eures-copy p {
    margin: 0;

    color: var(--career-muted);

    font-size: 0.96rem;
    line-height: 1.76;
}


.career-eures-copy p:first-child {
    color: var(--career-ink);

    font-size: 1.05rem;
}


.career-eures-copy p + p {
    margin-top: 20px;
}



/* =========================================================
   EURES – ARBEITSWEISE & WEITERE AUFGABEN
   ========================================================= */

.career-eures-workflow {
    margin-top: 66px;
    padding-top: 54px;

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

.career-eures-workflow-head {
    display: grid;

    grid-template-columns:
        minmax(380px, 0.95fr)
        minmax(360px, 0.72fr);

    gap: 90px;

    align-items: end;
}

.career-eures-workflow-head h4 {
    max-width: 620px;

    margin: 14px 0 0;

    color: var(--career-ink);

    font-size: clamp(2.15rem, 3.2vw, 3.25rem);
    font-weight: 830;

    line-height: 1.02;
    letter-spacing: -0.045em;
}

.career-eures-workflow-head h4 span {
    display: block;

    color: var(--career-green);
}

.career-eures-workflow-head > p {
    max-width: 540px;

    margin: 0;

    color: var(--career-muted);

    font-size: 0.92rem;
    line-height: 1.72;
}


.career-eures-workflow-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.22fr)
        minmax(320px, 0.68fr);

    gap: 72px;

    align-items: start;

    margin-top: 44px;
}


/* Hauptprozess */

.career-eures-flow {
    padding: 0;
    margin: 0;

    list-style: none;

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

.career-eures-flow > li {
    display: grid;

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

    gap: 24px;

    align-items: center;

    min-height: 112px;

    padding: 23px 18px 23px 0;

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

.career-eures-flow-index {
    align-self: start;

    padding-top: 4px;

    color: var(--career-green);

    font-size: 0.64rem;
    font-weight: 900;

    letter-spacing: 0.06em;
}

.career-eures-flow strong {
    display: block;

    color: var(--career-ink);

    font-size: 1.08rem;
    font-weight: 820;
}

.career-eures-flow p {
    max-width: 560px;

    margin: 7px 0 0;

    color: var(--career-muted);

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


/* Weitere Aufgaben */

.career-eures-more {
    padding: 34px 36px 30px;

    background: var(--career-sage);

    border: 1px solid rgba(40, 106, 76, 0.10);
    border-radius: 24px;
}

.career-eures-more-label {
    margin: 0;

    color: var(--career-green);

    font-size: 0.65rem;
    font-weight: 900;

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

.career-eures-more > h4 {
    margin: 11px 0 28px;

    color: var(--career-ink);

    font-size: 1.65rem;
    font-weight: 820;

    line-height: 1.08;
    letter-spacing: -0.035em;
}

.career-eures-more-list {
    border-top: 1px solid rgba(40, 106, 76, 0.18);
}

.career-eures-more-list > div {
    display: grid;

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

    gap: 14px;

    padding: 20px 0;

    border-bottom: 1px solid rgba(40, 106, 76, 0.18);
}

.career-eures-more-list > div:last-child {
    border-bottom: 0;
    padding-bottom: 2px;
}

.career-eures-more-list span {
    color: var(--career-green);

    font-size: 0.61rem;
    font-weight: 900;
}

.career-eures-more-list strong {
    display: block;

    color: var(--career-ink);

    font-size: 0.94rem;
    font-weight: 800;
}

.career-eures-more-list p {
    margin: 6px 0 0;

    color: var(--career-muted);

    font-size: 0.78rem;
    line-height: 1.55;
}



/* =========================================================
   TOOLKIT
   ========================================================= */

.career-toolkit {
    padding: 100px 0;

    color: #ffffff;

    background: var(--career-green-deep);
}


.career-toolkit-grid {
    display: grid;

    grid-template-columns:
        minmax(390px, 0.78fr)
        minmax(0, 1.22fr);

    gap: 100px;

    align-items: center;
}


.career-toolkit-title h2 {
    max-width: 620px;

    margin: 16px 0 0;

    font-size: clamp(2.5rem, 3.8vw, 3.85rem);
    font-weight: 825;

    line-height: 1.02;
    letter-spacing: -0.05em;
}


.career-toolkit-cloud {
    display: flex;
    flex-wrap: wrap;

    gap: 11px;

    align-items: center;
}


.career-tool {
    display: inline-flex;

    padding: 12px 17px;

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

    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 999px;

    font-size: 0.83rem;
    font-weight: 750;
}


.career-tool-big {
    padding: 14px 21px;

    color: #ffffff;

    border-color: rgba(205, 235, 57, 0.36);

    font-size: 1.05rem;
}


/* =========================================================
   CAREER / EDUCATION TIMELINE
   ========================================================= */

.career-education {
    padding: 120px 0;

    background: var(--career-sage);
}


.career-education-intro {
    max-width: 950px;
}


.career-education-intro h2 {
    margin: 17px 0 0;

    font-size: clamp(3rem, 4.5vw, 4.65rem);
    font-weight: 835;

    line-height: 1;
    letter-spacing: -0.055em;
}


.career-education-intro h2 span {
    display: block;
}


/* Timeline rows */

.career-education-list {
    margin-top: 75px;

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


.career-education-item {
    position: relative;

    display: grid;

    grid-template-columns:
        150px
        minmax(310px, 0.85fr)
        minmax(0, 1fr);

    gap: 45px;

    align-items: start;

    padding: 39px 0;

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


.career-education-item::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 2px;

    background: var(--career-green);

    transition: width 450ms ease;
}


.career-education-item:hover::before {
    width: 100%;
}


.career-education-year {
    color: var(--career-green);

    font-size: 1rem;
    font-weight: 850;
}


.career-education-item > div:nth-child(2) > span {
    color: var(--career-green);

    font-size: 0.65rem;
    font-weight: 900;

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


.career-education-item h3 {
    max-width: 440px;

    margin: 9px 0 0;

    font-size: 1.45rem;
    font-weight: 800;

    line-height: 1.15;
    letter-spacing: -0.03em;
}


.career-education-item > p,
.career-education-item > div:last-child > p {
    max-width: 570px;

    margin: 0;

    color: var(--career-muted);

    font-size: 0.93rem;
    line-height: 1.7;
}


.career-text-link {
    margin-top: 18px;
    color: var(--career-green-deep);
    font-size: 0.82rem;
    font-weight: 850;
}


/* =========================================================
   CLOSING
   ========================================================= */

.career-closing {
    padding: 102px 0;
    color: var(--career-ink);
    background:
        radial-gradient(
            circle at 86% 32%,
            rgba(40, 106, 76, 0.07),
            transparent 28%
        ),
        #f7f3ed;
    border-top: 1px solid var(--career-line);
}

.career-closing-grid {
    display: grid;
    grid-template-columns:
        minmax(470px, 1fr)
        minmax(360px, 0.68fr);
    gap: 110px;
    align-items: center;
}

.career-closing h2 {
    max-width: 760px;
    margin: 17px 0 0;
    color: var(--career-ink);
    font-size: clamp(3rem, 4.35vw, 4.5rem);
    font-weight: 835;
    line-height: 0.99;
    letter-spacing: -0.055em;
}

.career-closing h2 span {
    display: block;
}

.career-closing-side {
    max-width: 540px;
}

.career-closing-side > p {
    margin: 0;
    color: var(--career-muted);
    font-size: 0.98rem;
    line-height: 1.75;
}

.career-closing-side .button {
    margin-top: 30px;
}


/* =========================================================
   PORTFOLIO PROJECTS PAGE
   ========================================================= */

.portfolio-projects {
    --pp-dark: #071610;
    --pp-dark-soft: #0c1d16;

    --pp-green: #286a4c;
    --pp-green-deep: #174936;

    --pp-lime: #cdeb39;

    --pp-paper: #f5f1e8;
    --pp-paper-light: #fbf9f4;

    --pp-sage: #e2eade;
    --pp-sage-light: #edf1e9;

    --pp-ink: #102319;
    --pp-muted: #69726a;

    --pp-line: rgba(16, 35, 25, 0.14);
    --pp-dark-line: rgba(205, 235, 57, 0.18);
    --pp-project-gold: #c6a15b;

    --outdoor-navy: #16324f;
    --outdoor-green: #35594a;
    --outdoor-sand: #d8c3a5;
    --outdoor-gold: #c6a15b;
    --outdoor-ivory: #f7f3ed;

    --urban-dark: #173c2d;
    --urban-green: #486e55;
    --urban-light: #dce5d7;

    --nova-dark: #111110;
    --nova-dark-soft: #1b1917;
    --nova-bronze: #b48b60;
    --nova-ivory: #eee8df;

    --oceyan-blue: #102b3d;
    --oceyan-blue-light: #173e55;
    --oceyan-sand: #d2b176;

    color: var(--pp-ink);

    background: var(--pp-paper-light);
}


/* =========================================================
   HELPERS
   ========================================================= */

.pp-eyebrow {
    margin: 0;

    color: var(--pp-green);

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

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


.pp-eyebrow-light {
    color: var(--pp-lime);
}


.pp-accent {
    color: var(--pp-lime);
}


.pp-green {
    color: var(--pp-green);
}


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

.pp-hero {
    position: relative;

    overflow: hidden;

    padding: 105px 0 88px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 82% 24%,
            rgba(205, 235, 57, 0.09),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #06140f 0%,
            #081911 55%,
            #10251a 100%
        );
}


.pp-hero::after {
    content: "";

    position: absolute;

    top: 0;
    right: 8%;

    width: 1px;
    height: 100%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(205, 235, 57, 0.15),
            transparent
        );
}


.pp-hero-grid {
    display: grid;

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

    gap: 115px;

    align-items: center;
}


.pp-hero-main,
.pp-hero-copy {
    min-width: 0;
}


/* H1 */

.pp-hero h1 {
    margin: 18px 0 0;

    color: #ffffff;

    font-size: clamp(4.05rem, 5.55vw, 6.05rem);
    font-weight: 850;

    line-height: 0.92;
    letter-spacing: -0.065em;
}


.pp-hero h1 > span {
    display: block;
}


.pp-hero h1 > span:not(.pp-accent) {
    color: #ffffff;
}


/* rechter Text */

.pp-hero-copy {
    position: relative;

    max-width: 590px;

    padding-left: 32px;
}


.pp-hero-copy-line {
    position: absolute;

    top: 2px;
    bottom: 2px;
    left: 0;

    width: 2px;

    background:
        linear-gradient(
            to bottom,
            var(--pp-lime),
            rgba(205, 235, 57, 0.08)
        );
}


.pp-hero-copy p {
    margin: 0;

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

    font-size: 1rem;
    font-weight: 400;

    line-height: 1.78;
}


.pp-hero-copy p + p {
    margin-top: 22px;

    color: rgba(255, 255, 255, 0.58);
}


/* Hero Facts */

.pp-hero-facts {
    display: grid;

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

    margin-top: 76px;

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


.pp-hero-facts > div {
    padding: 25px 34px 0 0;
}


.pp-hero-facts > div + div {
    padding-left: 34px;

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


.pp-hero-facts span {
    display: block;

    color: var(--pp-lime);

    font-size: 0.65rem;
    font-weight: 900;
}


.pp-hero-facts strong {
    display: block;

    margin-top: 8px;

    color: #ffffff;

    font-size: 0.94rem;
}


.pp-hero-facts small {
    display: block;

    margin-top: 5px;

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

    font-size: 0.73rem;
}


/* =========================================================
   SHOWCASE
   ========================================================= */

.pp-showcase {
    padding: 125px 0 135px;

    background: var(--pp-paper-light);
}


.pp-showcase-intro {
    display: grid;

    grid-template-columns:
        minmax(480px, 1fr)
        minmax(0, 0.72fr);

    gap: 100px;

    align-items: end;

    margin-bottom: 72px;
}


.pp-showcase-intro h2 {
    margin: 16px 0 0;

    font-size: clamp(2.8rem, 4.3vw, 4.45rem);
    font-weight: 835;

    line-height: 0.99;
    letter-spacing: -0.055em;
}


.pp-showcase-intro h2 > span {
    display: block;
}


.pp-outdoor-image,
.pp-oceyan-image {
    background: #e8e8e3;
}


.pp-outdoor-image img,
.pp-oceyan-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

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

.pp-oceyan-image {
    background: var(--oceyan-blue);
}

.pp-card:hover .pp-outdoor-image img,
.pp-card:hover .pp-oceyan-image img {
    transform: scale(1.025);
}



/* =========================================================
   2 × 2 CASE STUDY GRID
   ========================================================= */

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


/* =========================================================
   PROJEKTKARTEN – GEMEINSAME STRUKTUR
   ========================================================= */

.pp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--pp-line);
    transition:
        transform 260ms ease,
        box-shadow 260ms ease;
}

.pp-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 28px 65px rgba(16, 35, 25, 0.11);
}

.pp-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    min-height: 71px;
    padding: 0 31px;
    border-bottom: 1px solid currentColor;
}

.pp-card-head > div {
    display: flex;
    align-items: center;
    gap: 20px;
}

.pp-card-number {
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.pp-card-type {
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.pp-card-status {
    padding: 6px 10px;
    color: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 999px;
    font-size: 0.61rem;
    font-weight: 800;
    opacity: 0.68;
}

.pp-card-visual {
    position: relative;
    display: block;
    height: 430px;
    overflow: hidden;
    text-decoration: none;
}

.pp-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 380px;
    padding: 34px 34px 38px;
}

.pp-card .pp-card-content h3 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.25rem, 3vw, 3.15rem);
    font-weight: 850;
    line-height: 0.97;
    letter-spacing: -0.055em;
}

.pp-card .pp-card-statement {
    max-width: 500px;
    margin: 15px 0 0;
    color: var(--pp-project-gold);
    font-size: 1.17rem;
    font-weight: 780;
    line-height: 1.28;
    letter-spacing: -0.025em;
}

.pp-card .pp-card-content > p:not(.pp-card-statement) {
    max-width: 515px;
    margin: 20px 0 0;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.9rem;
    line-height: 1.7;
}

.pp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 26px;
}

.pp-card .pp-tags span {
    padding: 7px 10px;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 760;
    opacity: 0.78;
}

.pp-project-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    margin-top: auto;
    padding-top: 30px;
    font-size: 0.84rem;
    font-weight: 850;
    text-decoration: none;
}

.pp-card .pp-project-link {
    color: var(--pp-project-gold);
}

.pp-project-link > span {
    transition: transform 180ms ease;
}

.pp-project-link:hover > span,
.pp-project-link:focus-visible > span {
    transform: translateX(5px);
}


/* =========================================================
   01 OUTDOOR-HOSENFINDER
   ========================================================= */

.pp-card-outdoor {
    color: var(--outdoor-navy);
    background: #4a4332;
    border-color: rgba(255, 255, 255, 0.12);
}

.pp-card-outdoor .pp-card-head {
    color: rgba(255, 255, 255, 0.78);
    background: #4a4332;
    border-color: rgba(255, 255, 255, 0.14);
}

.pp-card-outdoor .pp-card-number {
    color: var(--pp-project-gold);
}

.pp-card-outdoor .pp-card-content {
    color: #ffffff;
    background: #4a4332;
}


/* =========================================================
   02 URBANROOTS
   ========================================================= */

.pp-card-urban {
    color: #183427;
    background: #174936;
    border-color: rgba(255, 255, 255, 0.12);
}

.pp-card-urban .pp-card-head {
    color: rgba(255, 255, 255, 0.78);
    background: #174936;
    border-color: rgba(255, 255, 255, 0.14);
}

.pp-card-urban .pp-card-number {
    color: var(--pp-project-gold);
}

.pp-card-urban .pp-card-content {
    color: #ffffff;
    background: #174936;
}

.pp-image-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 550ms cubic-bezier(.2, .7, .2, 1);
}

.pp-card:hover .pp-image-visual img {
    transform: scale(1.025);
}


/* =========================================================
   03 NOVARING
   ========================================================= */

.pp-card-novaring {
    color: var(--nova-ivory);
    background: #111110;
    border-color: rgba(180, 139, 96, 0.25);
}

.pp-card-novaring .pp-card-head {
    color: rgba(238, 232, 223, 0.72);
    background: #111110;
    border-color: rgba(180, 139, 96, 0.22);
}

.pp-card-novaring .pp-card-number {
    color: var(--nova-bronze);
}

.pp-card-novaring .pp-card-content {
    color: #ffffff;
    background: #111110;
}

.pp-novaring-visual {
    background: #10100f;
}

.pp-novaring-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(10, 10, 9, 0.76),
            transparent 55%
        );
}

.pp-nova-data {
    position: absolute;
    z-index: 3;
    left: 27px;
    bottom: 24px;
    display: grid;
}

.pp-nova-data span {
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.58rem;
    font-weight: 850;
    letter-spacing: 0.13em;
}

.pp-nova-data strong {
    margin-top: 4px;
    color: var(--nova-bronze);
    font-size: 1.35rem;
    font-weight: 850;
}


/* =========================================================
   04 OCEYAN OPTICS
   ========================================================= */

.pp-card-oceyan {
    color: #ffffff;
    background: #123b52;
    border-color: rgba(210, 177, 118, 0.22);
}

.pp-card-oceyan .pp-card-head {
    color: rgba(255, 255, 255, 0.7);
    background: #123b52;
    border-color: rgba(210, 177, 118, 0.2);
}

.pp-card-oceyan .pp-card-number {
    color: var(--oceyan-sand);
}

.pp-card-oceyan .pp-card-content {
    color: #ffffff;
    background: #123b52;
}
/* =========================================================
   PRACTICE AREAS
   ========================================================= */

.pp-practice {
    padding: 120px 0;

    background: var(--pp-sage-light);
}


.pp-practice-top {
    display: grid;

    grid-template-columns:
        minmax(470px, 1fr)
        minmax(0, 0.8fr);

    gap: 100px;

    align-items: end;
}


.pp-practice h2 {
    margin: 16px 0 0;

    font-size: clamp(2.8rem, 4.3vw, 4.45rem);
    font-weight: 835;

    line-height: 0.99;
    letter-spacing: -0.055em;
}


.pp-practice h2 > span {
    display: block;
}


.pp-practice-intro {
    max-width: 570px;
}


.pp-practice-intro p {
    margin: 0;

    color: var(--pp-muted);

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


.pp-practice-intro p:first-child {
    color: var(--pp-ink);

    font-size: 1.03rem;
}


.pp-practice-intro p + p {
    margin-top: 18px;
}


/* Four fields */

.pp-practice-grid {
    display: grid;

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

    margin-top: 65px;

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

.pp-practice-item {
    min-height: 195px;

    padding: 27px 29px;
}


.pp-practice-item:first-child {
    padding-left: 0;
}


.pp-practice-item + .pp-practice-item {
    border-left: 1px solid var(--pp-line);
}


.pp-practice-item > span {
    display: block;

    color: var(--pp-green);

    font-size: 0.62rem;
    font-weight: 900;
}


.pp-practice-item strong {
    display: block;

    margin-top: 29px;

    color: var(--pp-ink);

    font-size: 1.1rem;
    font-weight: 820;
}


.pp-practice-item p {
    max-width: 245px;

    margin: 9px 0 0;

    color: var(--pp-muted);

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


.pp-practice-footer {
    padding-top: 29px;
}


.pp-practice-footer .pp-project-link {
    margin: 0;
    padding: 0;

    color: var(--pp-green-deep);
}


/* =========================================================
   EXPERIENCE + FINAL CTA
   ========================================================= */

.pp-experience {
    position: relative;

    overflow: hidden;

    padding: 105px 0 115px;

    background: var(--pp-paper-light);

    border-top: 1px solid rgba(16, 35, 25, 0.14);
}


.pp-experience::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 31%;
    height: 4px;

    background: var(--pp-green);
}




.pp-experience::after {
    content: "";

    position: absolute;

    right: -120px;
    bottom: -170px;

    width: 420px;
    height: 420px;

    border: 1px solid rgba(40, 106, 76, 0.11);
    border-radius: 50%;

    pointer-events: none;
}


.pp-experience-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(500px, 1fr)
        minmax(360px, 0.72fr);

    gap: 110px;

    align-items: end;
}


.pp-experience-number {
    display: block;

    margin-top: 38px;
    margin-bottom: 38px;

    color: rgba(40, 106, 76, 0.13);

    font-size: clamp(4.5rem, 7vw, 7rem);
    font-weight: 950;

    line-height: 0.9;
    letter-spacing: -0.055em;
}


.pp-experience h2 {
    margin: 0;

    font-size: clamp(2.8rem, 4.25vw, 4.4rem);
    font-weight: 835;

    line-height: 1;
    letter-spacing: -0.055em;
}


.pp-experience h2 > span {
    display: block;
}


.pp-experience-copy {
    max-width: 560px;
}


.pp-experience-copy p {
    margin: 0;

    color: var(--pp-muted);

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


.pp-experience-copy p:first-child {
    color: var(--pp-ink);

    font-size: 1.04rem;
}


.pp-experience-copy p + p {
    margin-top: 19px;
}


.pp-experience-actions {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 27px;

    margin-top: 30px;
}


.pp-experience-actions .pp-project-link {
    margin: 0;
    padding: 0;

    color: var(--pp-green-deep);
}



/* =========================================================
   ABOUT FINAL
   DESKTOP ONLY
   ========================================================= */

.about-final {

    --af-dark: #071610;
    --af-dark-soft: #0c2118;

    --af-green: #286a4c;
    --af-green-deep: #174936;

    --af-lime: #c8ff45;

    --af-paper: #f7f3ed;
    --af-sage: #e3ebe3;

    --af-text: #122018;
    --af-muted: #68746d;

}


/* =========================================================
   SHARED
   ========================================================= */

.about-final h1 span,
.about-final h2 span {
    color: inherit;
}


.af-green {
    color: var(--af-green);
}


.af-accent {
    color: var(--af-lime);
}


.af-eyebrow {

    display: flex;

    align-items: center;

    gap: 17px;

    margin: 0 0 27px;

    color: var(--af-green);

    font-size: 0.71rem;
    font-weight: 850;

    letter-spacing: 0.15em;

    text-transform: uppercase;

}


.af-eyebrow > span:first-child {
    opacity: 0.55;
}


.af-eyebrow-light {
    color: rgba(255, 255, 255, 0.62);
}


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

.af-hero {

    position: relative;

    overflow: hidden;

    padding:
        118px
        0
        72px;

    background:
        radial-gradient(
            circle at 86% 28%,
            rgba(200, 255, 69, 0.045),
            transparent 28%
        ),
        var(--af-dark);

}


.af-hero-ghost {

    position: absolute;

    right: -25px;
    bottom: 10px;

    color: transparent;

    font-size: 23rem;
    font-weight: 950;

    line-height: 0.8;

    letter-spacing: -0.08em;

    -webkit-text-stroke:
        1px
        rgba(255, 255, 255, 0.045);

    pointer-events: none;

}


.af-hero-grid {

    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 105px;

    align-items: center;

}


.af-hero-content h1 {

    max-width: 760px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(5.1rem, 6.4vw, 7.4rem);
    font-weight: 950;

    line-height: 0.9;
    letter-spacing: -0.067em;

}


.af-hero-content h1 > span {
    display: block;
    color: #ffffff;
}


.af-hero-content h1 > .af-accent {
    color: var(--af-lime);
}


.af-hero-lead {

    max-width: 590px;

    margin:
        43px
        0
        0;

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

    font-size: 1.07rem;
    line-height: 1.72;

}


.af-portrait-area {
    position: relative;
}


.af-portrait-frame {

    position: relative;

    width: 100%;

    padding:
        15px
        15px
        0
        0;

}


.af-portrait-outline {

    position: absolute;

    top: 0;
    right: 0;

    width: 73%;
    height: 72%;

    border:
        1px solid
        rgba(200, 255, 69, 0.65);

}


.af-portrait {

    position: relative;
    z-index: 2;

    display: block;

    width: 100%;
    height: 475px;

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

}


.af-portrait-meta {

    display: grid;

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

    margin-top: 17px;

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

    font-size: 0.63rem;
    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;

}


.af-portrait-meta span:nth-child(2) {
    text-align: center;
}


.af-portrait-meta span:last-child {
    text-align: right;
}


.af-hero-bottom {

    position: relative;

    z-index: 2;

    display: grid;

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

    margin-top: 75px;

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

}


.af-hero-bottom span {

    padding:
        24px
        26px
        0
        0;

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

    font-size: 0.68rem;
    font-weight: 750;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


.af-hero-bottom span + span {

    padding-left: 28px;

    border-left:
        1px solid
        rgba(255, 255, 255, 0.12);

}


/* =========================================================
   PROFILE
   ========================================================= */

.af-profile {

    padding:
        135px
        0
        120px;

    background: var(--af-paper);

}


.af-profile-top {

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(390px, 0.72fr);

    gap: 110px;

    align-items: start;

}


.af-profile-heading h2 {

    max-width: 720px;

    margin: 0;

    color: var(--af-text);

    font-size: clamp(4rem, 5.1vw, 5.9rem);
    font-weight: 950;

    line-height: 0.94;
    letter-spacing: -0.062em;

}


.af-profile-heading h2 > span {
    display: block;
}


.af-profile-heading h2 > .af-green {
    color: var(--af-green);
}


.af-profile-copy {

    padding-top: 50px;

}


.af-profile-copy p {

    max-width: 540px;

    margin:
        0
        0
        21px;

    color: var(--af-muted);

    font-size: 0.97rem;
    line-height: 1.72;

}


.af-profile-copy .af-profile-quote {

    margin-bottom: 30px;

    color: var(--af-text);

    font-size: 1.34rem;
    font-weight: 650;

    line-height: 1.5;

}


/* =========================================================
   DISCIPLINES
   ========================================================= */

.af-disciplines {

    display: grid;

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

    margin-top: 100px;

    border-top:
        1px solid
        rgba(18, 32, 24, 0.16);

    border-bottom:
        1px solid
        rgba(18, 32, 24, 0.16);

}


.af-discipline {

    position: relative;

    min-height: 245px;

    padding:
        31px
        30px
        35px;

    transition:
        background 200ms ease,
        transform 200ms ease;

}


.af-discipline + .af-discipline {

    border-left:
        1px solid
        rgba(18, 32, 24, 0.16);

}


.af-discipline:hover {

    background:
        rgba(40, 106, 76, 0.055);

}


.af-discipline-number {

    display: block;

    margin-bottom: 55px;

    color:
        rgba(40, 106, 76, 0.58);

    font-size: 0.67rem;
    font-weight: 850;

    letter-spacing: 0.13em;

}


.af-discipline h3 {

    margin:
        0
        0
        14px;

    color: var(--af-text);

    font-size: 1.75rem;
    font-weight: 900;

    letter-spacing: -0.045em;

}


.af-discipline p {

    max-width: 250px;

    margin: 0;

    color: var(--af-muted);

    font-size: 0.88rem;
    line-height: 1.6;

}


.af-profile-statement {

    display: flex;

    align-items: baseline;

    justify-content: flex-end;

    gap: 18px;

    margin-top: 62px;

    color:
        rgba(18, 32, 24, 0.33);

    font-size: clamp(2rem, 3vw, 3.4rem);
    font-weight: 850;

    letter-spacing: -0.05em;

}


.af-profile-statement strong {
    color: var(--af-green);
}


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

.af-process {

    padding:
        130px
        0
        145px;

    background: var(--af-dark-soft);

}


.af-process-head {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(340px, 0.4fr);

    gap: 100px;

    align-items: end;

}


.af-process-head h2 {

    margin: 0;

    color: #ffffff;

    font-size: clamp(4.2rem, 5.2vw, 6rem);
    font-weight: 950;

    line-height: 0.92;
    letter-spacing: -0.064em;

}


.af-process-head h2 > span {
    display: block;
    color: #ffffff;
}


.af-process-head h2 > .af-accent {
    color: var(--af-lime);
}


.af-process-head > p {

    max-width: 430px;

    margin:
        0
        0
        7px;

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

    font-size: 0.98rem;
    line-height: 1.7;

}


/* =========================================================
   PROCESS TRACK
   ========================================================= */

.af-process-track {

    display: grid;

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

    gap: 0;

    margin-top: 88px;

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

}


.af-process-step {

    min-height: 315px;

    padding:
        34px
        22px
        0
        0;

}


.af-process-top {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 58px;

}


.af-process-number {

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

    font-size: 0.68rem;
    font-weight: 850;

    letter-spacing: 0.13em;

}


.af-process-dot {

    width: 7px;
    height: 7px;

    background: var(--af-lime);

    border-radius: 50%;

    box-shadow:
        0
        0
        0
        6px
        rgba(200, 255, 69, 0.07);

}


.af-process-step h3 {

    margin:
        0
        0
        19px;

    color: #ffffff;

    font-size: 2.3rem;
    font-weight: 900;

    letter-spacing: -0.05em;

}


.af-process-step p {

    max-width: 315px;

    margin:
        0
        0
        28px;

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

    font-size: 0.92rem;
    line-height: 1.67;

}


.af-process-step small {

    color: var(--af-lime);

    font-size: 0.65rem;
    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;

}


.af-process-arrow {

    display: grid;

    place-items: center;

    padding-top: 82px;

    color:
        rgba(200, 255, 69, 0.48);

    font-size: 1.8rem;

}


/* =========================================================
   PERSONAL
   ========================================================= */

.af-personal {

    padding:
        135px
        0;

    background: var(--af-paper);

}


.af-personal-grid {

    display: grid;

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

    gap: 120px;

    align-items: start;

}


.af-personal-main h2 {

    max-width: 760px;

    margin: 0;

    color: var(--af-text);

    font-size: clamp(3.9rem, 4.8vw, 5.5rem);
    font-weight: 950;

    line-height: 0.94;
    letter-spacing: -0.061em;

}


.af-personal-main h2 > span {
    display: block;
}


.af-personal-main h2 > .af-green {
    color: var(--af-green);
}


.af-personal-main > p {

    max-width: 560px;

    margin:
        35px
        0
        0;

    color: var(--af-muted);

    font-size: 0.97rem;
    line-height: 1.7;

}


/* =========================================================
   INTERESTS
   ========================================================= */

.af-interests {

    margin-top: 70px;

    border-top:
        1px solid
        rgba(18, 32, 24, 0.15);

}


.af-interests article {

    display: grid;

    grid-template-columns:
        55px
        170px
        minmax(0, 1fr);

    align-items: center;

    min-height: 92px;

    border-bottom:
        1px solid
        rgba(18, 32, 24, 0.15);

    transition:
        padding-left 180ms ease;

}


.af-interests article:hover {
    padding-left: 9px;
}


.af-interests article > span {

    color:
        rgba(40, 106, 76, 0.5);

    font-size: 0.67rem;
    font-weight: 850;

    letter-spacing: 0.12em;

}


.af-interests article strong {

    color: var(--af-text);

    font-size: 1.15rem;
    font-weight: 850;

}


.af-interests article p {

    margin: 0;

    color: var(--af-muted);

    font-size: 0.88rem;

}


/* =========================================================
   COLLABORATION
   ========================================================= */

.af-collaboration {

    position: relative;

    overflow: hidden;

    padding:
        48px
        45px
        46px;

    color: #ffffff;

    background: var(--af-green-deep);

}


.af-collaboration::after {

    content: "TEAM";

    position: absolute;

    right: -20px;
    bottom: -13px;

    color: transparent;

    font-size: 6.6rem;
    font-weight: 950;

    line-height: 0.8;

    letter-spacing: -0.07em;

    -webkit-text-stroke:
        1px
        rgba(255, 255, 255, 0.07);

    pointer-events: none;

}


.af-collaboration-index {

    position: absolute;

    top: 34px;
    right: 38px;

    display: grid;

    width: 46px;
    height: 46px;

    place-items: center;

    color: var(--af-lime);

    border:
        1px solid
        rgba(200, 255, 69, 0.45);

    border-radius: 50%;

    font-size: 1rem;

}


.af-collaboration-label {

    margin:
        0
        0
        57px;

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

    font-size: 0.68rem;
    font-weight: 850;

    letter-spacing: 0.13em;

    text-transform: uppercase;

}


.af-collaboration blockquote {

    max-width: 370px;

    margin:
        0
        0
        35px;

    color: #ffffff;

    font-size: 2.15rem;
    font-weight: 850;

    line-height: 1.13;
    letter-spacing: -0.045em;

}


.af-collaboration > p:not(.af-collaboration-label) {

    position: relative;
    z-index: 2;

    max-width: 360px;

    margin: 0;

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

    font-size: 0.91rem;
    line-height: 1.65;

}


.af-collaboration-tags {

    position: relative;
    z-index: 2;

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 35px;

}


.af-collaboration-tags span {

    padding:
        8px
        12px;

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

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

    border-radius: 999px;

    font-size: 0.62rem;
    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


/* =========================================================
   CLOSING
   ========================================================= */

.af-closing {

    padding:
        105px
        0
        112px;

    background: var(--af-sage);

}


.af-closing-grid {

    display: grid;

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

    gap: 90px;

    align-items: end;

}


.af-closing h2 {

    max-width: 800px;

    margin: 0;

    color: var(--af-text);

    font-size: clamp(3.8rem, 4.6vw, 5.3rem);
    font-weight: 950;

    line-height: 0.94;
    letter-spacing: -0.06em;

}


.af-closing h2 > span {
    display: block;
}


.af-closing h2 > .af-green {
    color: var(--af-green);
}


.af-closing-action {
    padding-bottom: 5px;
}


/* =========================================================
   STARTSEITE: FINALE ERGÄNZUNGEN
   ========================================================= */

.home-page .portrait-image-wrap {
    position: relative;
    z-index: 4;
    width: min(100%, 430px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 28px;
    box-shadow: 0 44px 100px rgba(0, 0, 0, 0.42);
}

.home-page .portrait-image {
    display: block;
    width: 100%;
    height: 540px;
    object-fit: cover;
    object-position: center top;
}

.home-page .contact-cta {
    color: #0f2218;
    background: #f2f0ea;
    border-top: 1px solid rgba(12, 28, 21, 0.08);
    border-bottom: 1px solid rgba(12, 28, 21, 0.08);
}

.home-page .contact-cta::after {
    opacity: 0.06;
}

.home-page .contact-cta .eyebrow {
    color: #2f6f52;
}

.home-page .contact-cta h2 {
    color: #0f2218;
}

.home-page .contact-cta h2 span {
    color: #2f7a57;
}

.home-page .contact-cta p {
    color: #5f6b64;
}

.home-page .contact-cta-inner {
    max-width: 760px;
}

.home-page .contact-cta .button-primary {
    margin-top: 0.75rem;
}


@keyframes cue-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}


/* =========================================================
   ACTION-FARBEN NACH HINTERGRUND
   ========================================================= */

/* Dunkle Flächen */
.home-overview-card-dark .home-overview-link {
    color: var(--color-accent);
}

.home-overview-card-dark .home-overview-link > span {
    color: var(--color-accent);
}

/* Helle Flächen */
.projects-section .project-link,
.home-overview-card-light .home-overview-link,
.about-teaser .about-teaser-link,
.pp-practice .pp-project-link {
    color: #2f6a50;
}

/* Projektübersicht: Links auf dunklen Karten */
.pp-card .pp-project-link,
.pp-card .pp-project-link > span {
    color: var(--pp-project-gold);
}

/* Back-Links sind Navigation, nicht CTA */
.case-back-link,
.urban-back-link,
.oceyan-back-link,
.nova-back-link {
    text-decoration: none;
}

/* =========================================================
   BARRIEREFREIHEIT: REDUZIERTE BEWEGUNG
   ========================================================= */

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

html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

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

}


/* =========================================================
   RESPONSIVE SYSTEM
   Breakpoints orientieren sich am Layout, nicht an Geräten:
   1320px  = kompakter Desktop
   1120px  = Navigation / kleiner Laptop
   900px   = Tablet / schmale Layouts
   720px   = Smartphone
   420px   = sehr kleine Smartphones
   ========================================================= */

/* Robust gegen intrinsisch große Projektbilder in CSS-Grids. */
main *,
.site-footer *,
.site-header * {
    min-width: 0;
}

html,
body {
    overflow-x: clip;
}

img,
video,
canvas {
    max-width: 100%;
}

/* ---------------------------------------------------------
   GLOBAL: SPRACHUMSCHALTER
   --------------------------------------------------------- */

.main-navigation > .language-switch-link {
    padding: 9px 11px;
    color: var(--color-accent);
    border: 1px solid rgba(204, 230, 75, 0.36);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.main-navigation > .language-switch-link::after {
    display: none;
}

.main-navigation > .language-switch-link:hover,
.main-navigation > .language-switch-link:focus-visible,
.main-navigation > .language-switch-link.is-active {
    color: #071610;
    background: var(--color-accent);
    border-color: var(--color-accent);
}


/* =========================================================
   01 / KOMPAKTER DESKTOP
   ========================================================= */

@media (max-width: 1320px) {

    :root {
        --container-width: 1160px;
    }

    .container {
        width: min(calc(100% - 56px), var(--container-width));
    }

    .header-inner {
        gap: 24px;
    }

    .brand-logo-full {
        width: 300px;
    }

    .main-navigation {
        gap: 16px;
    }

    .main-navigation > a,
    .nav-dropdown-trigger {
        font-size: 0.89rem;
    }

    .header-cv {
        padding-inline: 15px;
        font-size: 0.84rem;
    }

    .hero-grid {
        grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
        gap: 54px;
    }

    .hero-visual {
        min-height: 560px;
    }

    .portrait-brush {
        width: 450px;
        height: 210px;
    }

    .portrait-orbit {
        width: 470px;
        height: 470px;
    }

    .home-page .portrait-image-wrap {
        width: min(100%, 400px);
    }

    .home-page .portrait-image {
        height: 505px;
    }

    .section-heading,
    .projects-intro,
    .home-overview-heading,
    .subpage-hero-grid,
    .learning-positioning-grid,
    .learning-competencies-intro,
    .learning-practice-layout,
    .learning-status-layout,
    .contact-page-hero-grid,
    .contact-options-heading,
    .contact-fit-layout {
        gap: 56px;
    }

    .projects-more,
    .footer-content,
    .learning-closing-grid,
    .contact-closing-grid,
    .career-hero-grid,
    .career-breuning-statement,
    .career-initiative-grid,
    .career-eures-stage,
    .career-eures-workflow-head,
    .career-toolkit-grid,
    .career-closing-grid,
    .pp-hero-grid,
    .pp-showcase-intro,
    .pp-practice-top,
    .pp-experience-grid,
    .af-hero-grid,
    .af-profile-top,
    .af-process-head,
    .af-personal-grid,
    .af-closing-grid {
        gap: 64px;
    }

    .career-story-item {
        grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
    }

    .nova-campaign-row {
        grid-template-columns: minmax(290px, 0.58fr) minmax(0, 1.42fr);
        gap: 52px;
    }

    .nova-campaign-row-reverse {
        grid-template-columns: minmax(0, 1.42fr) minmax(290px, 0.58fr);
    }

    .urban-hero-layout,
    .oceyan-hero-layout {
        gap: 60px;
    }

}


/* =========================================================
   02 / KLEINER LAPTOP + RESPONSIVE NAVIGATION
   ========================================================= */

@media (max-width: 1120px) {

    :root {
        --header-height: 74px;
    }

    .container {
        width: min(calc(100% - 48px), var(--container-width));
    }

    .site-header,
    .site-header.is-scrolled {
        min-height: var(--header-height);
    }

    .header-inner {
        position: relative;
        min-height: var(--header-height);
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 14px;
    }

    .brand {
        grid-column: 1;
        min-width: 0;
    }

    .brand-logo-full {
        width: clamp(220px, 30vw, 285px);
    }

    .header-cv {
        grid-column: 2;
        min-height: 40px;
        padding-inline: 15px;
    }

    .menu-button {
        grid-column: 3;
        display: block;
    }

    .menu-button[aria-expanded="true"] .menu-button-line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .menu-button[aria-expanded="true"] .menu-button-line:nth-child(2) {
        opacity: 0;
    }

    .menu-button[aria-expanded="true"] .menu-button-line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .main-navigation {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        z-index: 220;
        display: none;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 16px;
        align-items: stretch;
        gap: 4px;
        color: var(--color-text);
        background: rgba(7, 18, 15, 0.985);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 18px;
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
        backdrop-filter: blur(18px);
    }

    .main-navigation.is-open {
        display: flex;
        flex-direction: column;
    }

    .main-navigation > a,
    .nav-dropdown-trigger {
        width: 100%;
        min-height: 46px;
        padding: 13px 12px;
        justify-content: space-between;
        color: rgba(255, 255, 255, 0.84);
        border-radius: 10px;
        font-size: 0.94rem;
        line-height: 1.2;
    }

    .main-navigation > a::after,
    .nav-dropdown-trigger::after {
        display: none;
    }

    .main-navigation > a:hover,
    .main-navigation > a:focus-visible,
    .main-navigation > a.is-active,
    .nav-dropdown-trigger:hover,
    .nav-dropdown-trigger:focus-visible,
    .nav-dropdown-trigger.is-active {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.055);
    }

    .main-navigation > .language-switch-link {
        width: auto;
        min-height: 40px;
        margin: 8px 12px 4px;
        padding: 9px 13px;
        align-self: flex-start;
        justify-content: center;
        color: var(--color-accent);
        border-color: rgba(204, 230, 75, 0.42);
        background: rgba(204, 230, 75, 0.05);
    }

    .nav-dropdown {
        display: block;
        width: 100%;
    }

    .nav-dropdown-chevron {
        transform: rotate(180deg);
    }

    .nav-dropdown-menu {
        position: static;
        width: auto;
        margin: 2px 8px 10px;
        padding: 10px;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        backdrop-filter: none;
    }

    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown:focus-within .nav-dropdown-menu {
        transform: none;
    }

    .nav-dropdown-menu > a {
        padding: 11px 9px;
    }

    .nav-dropdown-label {
        margin-top: 4px;
    }

    /* Große Zweispalten-Layouts werden kompakter. */
    .hero-grid,
    .subpage-hero-grid,
    .learning-positioning-grid,
    .learning-practice-layout,
    .learning-status-layout,
    .contact-page-hero-grid,
    .contact-fit-layout,
    .urban-hero-layout,
    .urban-problem-grid,
    .urban-image-language,
    .oceyan-hero-layout,
    .oceyan-conflict-grid,
    .oceyan-video-grid,
    .oceyan-voice-layout,
    .nova-hero-layout,
    .nova-measurement-grid,
    .career-hero-grid,
    .career-breuning-statement,
    .career-initiative-grid,
    .career-eures-stage,
    .career-eures-workflow-head,
    .career-eures-workflow-layout,
    .career-toolkit-grid,
    .pp-hero-grid,
    .pp-showcase-intro,
    .pp-practice-top,
    .pp-experience-grid,
    .af-hero-grid,
    .af-profile-top,
    .af-personal-grid {
        gap: 48px;
    }

    .learning-development-line {
        grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr);
        gap: 24px;
    }

    .learning-practice-project {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 20px;
    }

    .learning-practice-arrow {
        display: none;
    }

    .projects-more {
        grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
        gap: 36px;
    }

    .projects-more-button {
        grid-column: 2;
        justify-self: start;
    }

    .footer-content {
        grid-template-columns: minmax(280px, 1fr) minmax(0, 1fr);
        gap: 40px;
    }

    .footer-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .ohf-problem-layout,
    .urban-problem-grid,
    .oceyan-conflict-grid {
        grid-template-columns: 60px minmax(0, 1fr);
    }

    .ohf-problem-copy,
    .urban-problem-copy,
    .oceyan-conflict-copy {
        grid-column: 2;
    }

    .ohf-problem-lines,
    .urban-transformation,
    .oceyan-tension {
        grid-column: 2;
    }

    .ohf-strategy-bottom {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 48px;
    }

    .ohf-flow-layout {
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 46px;
    }

    .ohf-data-row {
        grid-template-columns: 160px 180px minmax(0, 1fr);
        gap: 24px;
    }

    .ohf-data-conclusion {
        grid-template-columns: 1fr auto 1fr auto 1fr;
    }

    .ohf-data-conclusion > :nth-child(n+6) {
        grid-column: auto;
    }

    .ohf-mail-step {
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 50px;
    }

    .ohf-mail-right {
        grid-template-columns: minmax(0, 1fr) 230px;
    }

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

    .urban-positioning-grid > :last-child {
        grid-column: 1 / -1;
    }

    .urban-positioning-statement,
    .urban-logo-system,
    .urban-logo-rationale,
    .urban-brand-message,
    .urban-contribution,
    .urban-extended-scope,
    .oceyan-copy-principle,
    .oceyan-contribution,
    .nova-data-note,
    .nova-campaign-kpis,
    .nova-optimization,
    .nova-closing-skills,
    .nova-context-layout {
        gap: 36px;
    }

    .urban-logo-system {
        grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    }

    .urban-benefit-row {
        grid-template-columns: 36px minmax(150px, 0.8fr) 28px minmax(160px, 1fr) 28px minmax(190px, 1.15fr);
        gap: 14px;
    }

    .urban-conversion-flow {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 12px;
    }

    .urban-conversion-flow > .urban-flow-arrow {
        display: none;
    }

    .oceyan-storyline {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .oceyan-video-timeline > div {
        grid-template-columns: 68px 160px minmax(0, 1fr);
    }

    .nova-data-primary {
        gap: 38px;
    }

    .nova-data-row {
        grid-template-columns: 170px minmax(90px, 1fr) 60px;
    }

    .nova-campaign-row,
    .nova-campaign-row-reverse {
        grid-template-columns: minmax(260px, 0.65fr) minmax(0, 1.35fr);
        gap: 36px;
    }

    .nova-campaign-row-reverse .nova-campaign-image {
        order: 2;
    }

    .nova-campaign-row-reverse .nova-campaign-copy {
        order: 1;
    }

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

    .career-story-item {
        min-height: 440px;
    }

    .career-eures-flow > li {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .career-education-item {
        grid-template-columns: 120px minmax(240px, 0.8fr) minmax(0, 1fr);
        gap: 32px;
    }

    .pp-practice-grid,
    .af-disciplines {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .af-process-track {
        grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) 48px minmax(0, 1fr);
    }

    .af-interests article {
        grid-template-columns: 45px 145px minmax(0, 1fr);
    }

}


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

@media (max-width: 900px) {

    .container {
        width: min(calc(100% - 40px), var(--container-width));
    }

    .hero {
        min-height: auto;
        padding: 84px 0 78px;
    }

    .hero-grid,
    .subpage-hero-grid,
    .learning-positioning-grid,
    .learning-competencies-intro,
    .learning-practice-layout,
    .learning-status-layout,
    .learning-closing-grid,
    .contact-page-hero-grid,
    .contact-options-heading,
    .contact-fit-layout,
    .contact-closing-grid,
    .urban-hero-layout,
    .oceyan-hero-layout,
    .nova-hero-layout,
    .nova-measurement-grid,
    .career-hero-grid,
    .career-breuning-statement,
    .career-initiative-grid,
    .career-eures-stage,
    .career-eures-workflow-head,
    .career-eures-workflow-layout,
    .career-toolkit-grid,
    .career-closing-grid,
    .pp-hero-grid,
    .pp-showcase-intro,
    .pp-practice-top,
    .pp-experience-grid,
    .af-hero-grid,
    .af-profile-top,
    .af-process-head,
    .af-personal-grid,
    .af-closing-grid {
        grid-template-columns: 1fr;
    }

    .hero-grid {
        gap: 36px;
    }

    .hero-content {
        max-width: 720px;
    }

    .hero-visual {
        min-height: 500px;
    }

    .home-page .portrait-image-wrap {
        width: min(100%, 370px);
    }

    .home-page .portrait-image {
        height: 465px;
    }

    .portrait-brush {
        width: 420px;
        height: 190px;
    }

    .portrait-orbit {
        width: 430px;
        height: 430px;
        transform: translate(25px, 10px);
    }

    .portrait-dots {
        right: 10%;
    }

    .scroll-cue {
        display: none;
    }

    .section-heading,
    .projects-intro,
    .home-overview-heading {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 28px;
        margin-bottom: 48px;
    }

    .section-heading-expertise {
        gap: 30px;
    }

    .section-heading-expertise h2 {
        max-width: 13ch;
    }

    html[lang="en"] .section-heading-expertise h2 {
        max-width: 17ch;
    }

    .section-heading-note {
        max-width: 700px;
    }

    .expertise-item {
        grid-template-columns: 64px minmax(0, 1fr);
        align-items: start;
        gap: 24px;
        padding: 34px 0;
    }

    .expertise-tags {
        grid-column: 2;
        justify-content: flex-start;
    }

    .expertise-item:hover {
        padding-left: 0;
    }

    .expertise-item::before {
        display: none;
    }

    .projects-intro-note {
        max-width: 700px;
    }

    .projects-more {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 34px;
    }

    .projects-more-button {
        grid-column: auto;
    }

    .home-overview-heading > p {
        max-width: 700px;
    }

    .about-teaser {
        grid-template-columns: 120px minmax(0, 1fr);
        gap: 26px 34px;
    }

    .about-teaser-link {
        grid-column: 2;
        justify-self: start;
    }

    .contact-cta,
    .home-overview-section,
    .projects-section,
    .expertise {
        padding-top: 90px;
        padding-bottom: 90px;
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
        align-items: start;
        padding-top: 34px;
    }

    .footer-navigation {
        justify-content: flex-start;
    }

    .footer-actions {
        grid-column: 1 / -1;
    }

    .subpage-hero {
        padding: 88px 0 82px;
    }

    .subpage-hero-text {
        max-width: 700px;
        padding-bottom: 0;
    }

    /* Weiterbildung */
    .learning-positioning-section,
    .learning-competencies,
    .learning-practice,
    .learning-ai,
    .learning-status,
    .learning-closing {
        padding-top: 86px;
        padding-bottom: 86px;
    }

    .learning-development-line {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 52px;
    }

    .learning-development-target {
        text-align: left;
    }

    .learning-development-arrow {
        width: 48px;
        transform: rotate(90deg);
        transform-origin: center;
    }

    .learning-competencies-grid {
        grid-template-columns: 1fr;
    }

    .learning-practice-project {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .learning-ai-panel {
        grid-template-columns: 150px minmax(0, 1fr);
        gap: 30px 45px;
    }

    .learning-status-layout {
        gap: 38px;
    }

    /* Kontakt + Recht */
    .contact-page-hero,
    .contact-options-section,
    .contact-fit,
    .contact-closing {
        padding-top: 86px;
        padding-bottom: 86px;
    }

    .contact-page-status {
        max-width: 680px;
    }

    .contact-channel-email {
        grid-template-columns: 120px minmax(0, 1fr) auto;
        gap: 28px;
    }

    .contact-fit-layout {
        gap: 38px;
    }

    /* Projektleisten */
    .case-project-bar-inner,
    .urban-project-bar-inner,
    .oceyan-project-bar-inner,
    .nova-project-bar-inner {
        grid-template-columns: 110px minmax(0, 1fr);
        gap: 18px;
        min-height: 72px;
    }

    .case-project-bar-inner > p,
    .urban-project-bar-inner > p,
    .oceyan-project-bar-inner > p,
    .nova-project-bar-inner > p {
        grid-column: 2;
        margin-top: -10px;
        justify-self: start;
        text-align: left;
    }

    /* Outdoor-Hosenfinder */
    .ohf-hero,
    .ohf-problem,
    .ohf-strategy,
    .ohf-flow,
    .ohf-data,
    .ohf-nurturing,
    .ohf-build-intro,
    .ohf-build-stage,
    .ohf-tech,
    .ohf-build-contribution-section {
        padding-top: 84px;
        padding-bottom: 84px;
    }

    .ohf-hero-bottom,
    .ohf-strategy-bottom,
    .ohf-flow-layout,
    .ohf-mail-step,
    .ohf-mail-right,
    .ohf-concept-note,
    .ohf-showcase-caption,
    .ohf-build-contribution {
        grid-template-columns: 1fr;
        gap: 30px;
    }

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

    .ohf-problem-layout {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 26px;
    }

    .ohf-problem-lines {
        grid-template-columns: 1fr;
    }

    .ohf-flow-layout {
        display: block;
    }

    .ohf-flow-nav {
        position: static;
        margin-bottom: 42px;
    }

    .ohf-flow-nav nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        display: grid;
        gap: 10px;
    }

    .ohf-flow-content {
        gap: 78px;
    }

    .ohf-data-row {
        grid-template-columns: 135px 150px minmax(0, 1fr);
        gap: 18px;
    }

    .ohf-data-conclusion {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .ohf-data-conclusion > span[aria-hidden="true"] {
        display: none;
    }

    .ohf-data-conclusion span,
    .ohf-data-conclusion strong {
        min-height: 74px;
    }

    .ohf-mail-timeline {
        gap: 88px;
    }

    .ohf-mail-right .ohf-mail-marker {
        order: -1;
    }

    .ohf-website-frame-bar {
        grid-template-columns: 80px 1fr 80px;
    }

    .ohf-tech-lines {
        grid-template-columns: 1fr;
    }

    /* UrbanRoots */
    .urban-hero,
    .urban-problem,
    .urban-positioning,
    .urban-identity,
    .urban-visual-system,
    .urban-benefits,
    .urban-landingpage-intro,
    .urban-landingpage-stage {
        padding-top: 84px;
        padding-bottom: 84px;
    }

    .urban-hero-layout,
    .urban-problem-grid,
    .urban-positioning-statement,
    .urban-logo-system,
    .urban-logo-rationale,
    .urban-image-language,
    .urban-brand-message,
    .urban-contribution,
    .urban-extended-scope {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .urban-hero-visual {
        width: 100%;
        max-width: 720px;
        margin-inline: auto;
    }

    .urban-problem-grid {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .urban-transformation {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .urban-transformation-arrow {
        justify-self: start;
        transform: rotate(90deg);
    }

    .urban-positioning-grid {
        grid-template-columns: 1fr;
    }

    .urban-positioning-grid > :last-child {
        grid-column: auto;
    }

    .urban-positioning-statement > :last-child {
        justify-self: start;
    }

    .urban-logo-main {
        min-height: 420px;
    }

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

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

    .urban-brandboard > :first-child {
        grid-column: 1 / -1;
    }

    .urban-benefit-row {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 10px 18px;
    }

    .urban-benefit-row > .urban-benefit-arrow {
        display: none;
    }

    .urban-benefit-row > *:not(:first-child) {
        grid-column: 2;
    }

    .urban-browser-bar {
        grid-template-columns: 76px 1fr 76px;
    }

    .urban-landingpage-caption {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .urban-conversion-flow {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* OCEYAN */
    .oceyan-hero,
    .oceyan-conflict,
    .oceyan-story,
    .oceyan-web,
    .oceyan-video,
    .oceyan-voice {
        padding-top: 84px;
        padding-bottom: 84px;
    }

    .oceyan-conflict-grid,
    .oceyan-copy-principle,
    .oceyan-video-grid,
    .oceyan-voice-layout,
    .oceyan-contribution {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .oceyan-conflict-grid {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .oceyan-tension {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .oceyan-tension-divider {
        width: 100%;
        height: 1px;
    }

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

    .oceyan-browser-bar {
        grid-template-columns: 76px 1fr 76px;
    }

    .oceyan-copy-principle > div {
        grid-template-columns: 1fr auto 1.3fr;
    }

    .oceyan-video-facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .oceyan-video-timeline > div {
        grid-template-columns: 64px 145px minmax(0, 1fr);
    }

    /* NovaRing */
    .nova-hero,
    .nova-data,
    .nova-segmentation,
    .nova-campaigns,
    .nova-measurement,
    .nova-closing,
    .nova-context-section {
        padding-top: 84px;
        padding-bottom: 84px;
    }

    .nova-data-primary,
    .nova-segments-grid,
    .nova-campaign-row,
    .nova-campaign-row-reverse,
    .nova-measurement-content {
        grid-template-columns: 1fr;
    }

    .nova-data-primary,
    .nova-campaign-row,
    .nova-campaign-row-reverse {
        gap: 44px;
    }

    .nova-campaign-row-reverse .nova-campaign-image,
    .nova-campaign-row-reverse .nova-campaign-copy {
        order: initial;
    }

    .nova-data-row {
        grid-template-columns: 180px minmax(0, 1fr) 60px;
    }

    .nova-data-note,
    .nova-campaign-kpis,
    .nova-optimization,
    .nova-closing-skills,
    .nova-context-layout {
        grid-template-columns: 125px minmax(0, 1fr);
        gap: 30px;
    }

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

    /* Verwandte Case Studies */
    .case-related-grid {
        grid-template-columns: 1fr;
    }

    .case-related-project {
        min-height: auto;
    }

    /* Erfahrung */
    .career-hero,
    .career-company-section,
    .career-breuning-intro,
    .career-story-section,
    .career-initiative-section,
    .career-eures-section,
    .career-eures-workflow,
    .career-toolkit,
    .career-education,
    .career-closing {
        padding-top: 84px;
        padding-bottom: 84px;
    }

    .career-hero-bottom,
    .career-principles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .career-company-heading {
        grid-template-columns: 60px minmax(0, 1fr);
        gap: 24px;
    }

    .career-company-meta {
        grid-column: 2;
        justify-self: start;
        text-align: left;
    }

    .career-story-item {
        grid-template-columns: 1fr;
        gap: 24px;
        min-height: auto;
        padding: 42px 0;
    }

    .career-story-node,
    .career-story-rail {
        display: none;
    }

    .career-story-item:nth-child(even) .career-story-content,
    .career-story-item:nth-child(odd) .career-story-content {
        grid-column: auto;
        text-align: left;
    }

    .career-eures-workflow-layout {
        gap: 38px;
    }

    .career-education-item {
        grid-template-columns: 105px minmax(0, 1fr);
        gap: 24px;
    }

    .career-education-item > :last-child {
        grid-column: 2;
    }

    /* Projekte */
    .pp-hero,
    .pp-showcase,
    .pp-practice,
    .pp-experience,
    .pp-final {
        padding-top: 84px;
        padding-bottom: 84px;
    }

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

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

    /* Über mich */
    .af-hero,
    .af-profile,
    .af-disciplines-section,
    .af-process,
    .af-personal,
    .af-interests-section,
    .af-collaboration,
    .af-closing {
        padding-top: 84px;
        padding-bottom: 84px;
    }

    .af-hero-bottom {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .af-process-track {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .af-process-arrow {
        width: 42px;
        justify-self: start;
        transform: rotate(90deg);
    }

    .af-interests article {
        grid-template-columns: 48px 150px minmax(0, 1fr);
    }

}


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

@media (max-width: 720px) {

    :root {
        --header-height: 68px;
        --radius-medium: 18px;
    }

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

    .header-inner {
        min-height: var(--header-height);
        gap: 10px;
    }

    .brand-logo-full {
        width: clamp(174px, 51vw, 220px);
    }

    .header-cv {
        min-height: 38px;
        padding: 0 12px;
        font-size: 0.72rem;
    }

    .header-cv span {
        display: none;
    }

    .menu-button {
        width: 42px;
        height: 42px;
        padding: 10px;
    }

    .main-navigation {
        top: calc(100% + 8px);
        padding: 12px;
        border-radius: 14px;
    }

    .nav-dropdown-menu {
        margin-inline: 4px;
        padding: 8px;
    }

    .nav-dropdown-menu > a {
        grid-template-columns: 26px minmax(0, 1fr);
        gap: 9px;
    }

    .nav-dropdown-menu strong {
        font-size: 0.84rem;
    }

    .nav-dropdown-menu small {
        font-size: 0.63rem;
    }

    .button {
        min-height: 48px;
        padding-inline: 18px;
    }

    h1 {
        font-size: clamp(2.55rem, 12vw, 4.1rem);
        line-height: 0.98;
        letter-spacing: -0.052em;
    }

    .subpage-hero h1,
    .contact-page-hero h1,
    .career-hero h1,
    .pp-hero h1,
    .af-hero-content h1,
    .ohf-hero h1,
    .urban-hero h1,
    .oceyan-hero h1,
    .nova-hero h1 {
        font-size: clamp(2.65rem, 12.5vw, 4.15rem);
        line-height: 0.97;
    }

    .section-heading h2,
    .projects-intro h2,
    .home-overview-heading h2,
    .contact-cta h2,
    .learning-positioning-heading h2,
    .learning-competencies-intro h2,
    .learning-practice-intro h2,
    .learning-status-heading h2,
    .learning-closing-main h2,
    .contact-options-heading h2,
    .contact-fit-intro h2,
    .contact-closing-main h2,
    .ohf-problem-heading h2,
    .ohf-data-heading h2,
    .ohf-nurturing-intro h2,
    .ohf-build-heading h2,
    .ohf-strategy-heading h2,
    .urban-problem-heading h2,
    .urban-positioning-intro h2,
    .urban-identity-intro h2,
    .urban-visual-heading h2,
    .urban-benefits-heading h2,
    .urban-landingpage-heading h2,
    .oceyan-conflict-heading h2,
    .oceyan-story-heading h2,
    .oceyan-web-heading h2,
    .oceyan-video-copy h2,
    .oceyan-voice-heading h2,
    .nova-section-heading h2,
    .nova-campaigns-heading h2,
    .nova-measurement-heading h2,
    .nova-closing-intro h2,
    .career-company-name h2,
    .career-initiative-main h2,
    .career-toolkit-title h2,
    .career-education-intro h2,
    .career-closing h2,
    .pp-showcase-intro h2,
    .pp-practice h2,
    .pp-experience h2,
    .af-profile-heading h2,
    .af-process-head h2,
    .af-personal-main h2,
    .af-closing h2 {
        font-size: clamp(2.15rem, 9.8vw, 3.35rem);
        line-height: 1.01;
        letter-spacing: -0.047em;
    }

    .section-heading-expertise h2,
    html[lang="en"] .section-heading-expertise h2 {
        max-width: none;
    }

    .eyebrow {
        margin-bottom: 14px;
        font-size: 0.66rem;
        letter-spacing: 0.14em;
    }

    .hero {
        padding: 66px 0 62px;
    }

    .hero-lead {
        font-size: 1rem;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 28px;
    }

    .hero-actions .button {
        width: 100%;
    }

    .availability {
        align-items: flex-start;
        font-size: 0.84rem;
    }

    .hero-visual {
        min-height: 400px;
    }

    .home-page .portrait-image-wrap {
        width: min(100%, 300px);
        border-radius: 22px;
    }

    .home-page .portrait-image {
        height: 380px;
    }

    .portrait-brush {
        width: 330px;
        height: 155px;
    }

    .portrait-orbit {
        width: 335px;
        height: 335px;
        transform: translate(16px, 8px);
    }

    .portrait-dots {
        right: 0;
        bottom: 45px;
        width: 100px;
        height: 100px;
    }

    .portrait-caption {
        left: 2px;
        bottom: 20px;
    }

    .expertise,
    .projects-section,
    .home-overview-section,
    .contact-cta,
    .subpage-hero,
    .learning-positioning-section,
    .learning-competencies,
    .learning-practice,
    .learning-ai,
    .learning-status,
    .learning-closing,
    .contact-page-hero,
    .contact-options-section,
    .contact-fit,
    .contact-closing,
    .career-hero,
    .career-company-section,
    .career-breuning-intro,
    .career-story-section,
    .career-initiative-section,
    .career-eures-section,
    .career-eures-workflow,
    .career-toolkit,
    .career-education,
    .career-closing,
    .pp-hero,
    .pp-showcase,
    .pp-practice,
    .pp-experience,
    .pp-final,
    .af-hero,
    .af-profile,
    .af-disciplines-section,
    .af-process,
    .af-personal,
    .af-interests-section,
    .af-collaboration,
    .af-closing {
        padding-top: 68px;
        padding-bottom: 68px;
    }

    .section-heading,
    .projects-intro,
    .home-overview-heading {
        margin-bottom: 38px;
    }

    .section-heading-note,
    .projects-intro-note {
        padding: 24px;
        border-radius: 20px;
    }

    .expertise-item {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 28px 0;
    }

    .expertise-number,
    .expertise-tags {
        grid-column: auto;
    }

    .expertise-tags {
        margin-top: 6px;
    }

    .projects-grid-two,
    .home-overview-grid {
        grid-template-columns: 1fr;
    }

    .project-image {
        height: auto;
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    .project-content {
        padding: 24px;
    }

    .project-card-home .project-content {
        min-height: 0;
    }

    .projects-more {
        margin-top: 36px;
        padding: 28px 24px;
    }

    .home-overview-card {
        min-height: 0;
        padding: 30px 25px;
    }

    .home-overview-number {
        top: 22px;
        right: 24px;
        font-size: 3rem;
    }

    .about-teaser {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 28px 24px;
    }

    .about-teaser-link {
        grid-column: auto;
    }

    .contact-cta h2 {
        max-width: none;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-top: 32px;
        padding-bottom: 30px;
    }

    .footer-logo {
        width: min(250px, 78vw);
    }

    .footer-navigation {
        justify-content: flex-start;
        gap: 14px 22px;
    }

    .footer-actions {
        grid-column: auto;
        flex-wrap: wrap;
    }

    .footer-bottom {
        min-height: 0;
        grid-template-columns: 1fr;
        justify-items: start;
        gap: 14px;
        padding-top: 22px;
        padding-bottom: 24px;
    }

    .footer-top-link {
        justify-self: start;
    }

    /* Weiterbildung */
    .learning-competencies-grid {
        gap: 16px;
    }

    .learning-ai-panel {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .learning-ai-number {
        justify-self: start;
    }

    .learning-ai-tools {
        grid-column: auto;
    }

    .learning-practice-project {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 16px;
    }

    .learning-status-item {
        grid-template-columns: 14px 1fr;
        gap: 13px;
    }

    /* Kontakt + Recht */
    .contact-page-status {
        padding: 26px 24px;
    }

    .contact-channel-email,
    .contact-channel-secondary {
        grid-template-columns: 1fr;
    }

    .contact-channel-email {
        gap: 18px;
    }

    .contact-channel-action {
        justify-self: start;
    }

    .contact-channel,
    .contact-channel-resource {
        padding: 24px;
    }

    .contact-fit-item {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 18px;
    }

    /* Projektleisten */
    .case-project-bar-inner,
    .urban-project-bar-inner,
    .oceyan-project-bar-inner,
    .nova-project-bar-inner {
        grid-template-columns: 1fr;
        gap: 2px;
        min-height: 0;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .case-project-bar-inner > p,
    .urban-project-bar-inner > p,
    .oceyan-project-bar-inner > p,
    .nova-project-bar-inner > p {
        grid-column: auto;
        margin: 3px 0 0;
    }

    /* Outdoor */
    .ohf-hero,
    .ohf-problem,
    .ohf-strategy,
    .ohf-flow,
    .ohf-data,
    .ohf-nurturing,
    .ohf-build-intro,
    .ohf-build-stage,
    .ohf-tech,
    .ohf-build-contribution-section,
    .urban-hero,
    .urban-problem,
    .urban-positioning,
    .urban-identity,
    .urban-visual-system,
    .urban-benefits,
    .urban-landingpage-intro,
    .urban-landingpage-stage,
    .oceyan-hero,
    .oceyan-conflict,
    .oceyan-story,
    .oceyan-web,
    .oceyan-video,
    .oceyan-voice,
    .nova-hero,
    .nova-data,
    .nova-segmentation,
    .nova-campaigns,
    .nova-measurement,
    .nova-closing,
    .nova-context-section {
        padding-top: 68px;
        padding-bottom: 68px;
    }

    .ohf-hero-facts {
        grid-template-columns: 1fr 1fr;
    }

    .ohf-problem-layout,
    .urban-problem-grid,
    .oceyan-conflict-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .ohf-problem-copy,
    .ohf-problem-lines,
    .urban-problem-copy,
    .urban-transformation,
    .oceyan-conflict-copy,
    .oceyan-tension {
        grid-column: auto;
    }

    .ohf-flow-nav nav {
        grid-template-columns: 1fr;
    }

    .ohf-flow-step-header {
        grid-template-columns: 42px 1fr;
        gap: 14px;
    }

    .ohf-data-row,
    .nova-data-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .ohf-data-conclusion {
        grid-template-columns: 1fr;
    }

    .ohf-mail-timeline {
        gap: 58px;
    }

    .ohf-concept-note,
    .ohf-build-contribution,
    .urban-logo-rationale,
    .urban-brand-message,
    .urban-contribution,
    .urban-extended-scope,
    .oceyan-copy-principle,
    .oceyan-contribution,
    .nova-data-note,
    .nova-campaign-kpis,
    .nova-optimization,
    .nova-closing-skills,
    .nova-context-layout {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .ohf-website-frame-bar,
    .urban-browser-bar,
    .oceyan-browser-bar {
        grid-template-columns: 62px 1fr 62px;
    }

    .ohf-showcase-caption,
    .urban-landingpage-caption {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .urban-hero-meta,
    .oceyan-hero-meta,
    .nova-hero-meta {
        grid-template-columns: 1fr;
    }

    .urban-logo-main {
        min-height: 320px;
    }

    .urban-logo-variants,
    .urban-brandboard {
        grid-template-columns: 1fr;
    }

    .urban-brandboard > :first-child {
        grid-column: auto;
    }

    .urban-logo-dark,
    .urban-logo-mono {
        min-height: 220px;
    }

    .urban-conversion-flow {
        grid-template-columns: 1fr;
    }

    .oceyan-storyline,
    .oceyan-video-facts {
        grid-template-columns: 1fr;
    }

    .oceyan-copy-principle > div {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .oceyan-copy-principle-arrow {
        justify-self: start;
        transform: rotate(90deg);
    }

    .oceyan-video-timeline > div,
    .nova-measurement-process > div {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .nova-segment-stats,
    .nova-segment-stats-two,
    .nova-contribution-grid,
    .nova-measurement-content {
        grid-template-columns: 1fr;
    }

    .nova-campaign-details > div {
        grid-template-columns: 74px minmax(0, 1fr);
        gap: 14px;
    }

    /* Related */
    .case-related-project {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 18px;
        padding: 24px;
    }

    .case-related-project > :last-child {
        grid-column: 2;
        justify-self: start;
    }

    /* Erfahrung */
    .career-hero-bottom,
    .career-principles {
        grid-template-columns: 1fr;
    }

    .career-company-heading {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .career-company-meta {
        grid-column: auto;
    }

    .career-eures-flow > li {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 16px;
    }

    .career-education-item {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .career-education-item > :last-child {
        grid-column: auto;
    }

    /* Projekte */
    .pp-hero-facts,
    .pp-practice-grid {
        grid-template-columns: 1fr;
    }

    /* Über mich */
    .af-hero-bottom,
    .af-portrait-meta,
    .af-disciplines {
        grid-template-columns: 1fr;
    }

    .af-interests article {
        grid-template-columns: 42px minmax(0, 1fr);
        min-height: 0;
        gap: 8px 16px;
    }

    .af-interests article > :last-child {
        grid-column: 2;
    }

    .af-closing-action {
        justify-self: start;
    }

    /* Lightboxes */
    .image-lightbox,
    .nova-lightbox {
        padding: 18px;
    }

    .image-lightbox-inner,
    .nova-lightbox-inner {
        width: min(100%, 1100px);
        max-height: calc(100vh - 36px);
    }

}


/* =========================================================
   05 / SEHR KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 420px) {

    .container {
        width: min(calc(100% - 28px), var(--container-width));
    }

    .brand-logo-full {
        width: min(49vw, 184px);
    }

    .header-cv {
        display: none;
    }

    .header-inner {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .menu-button {
        grid-column: 2;
    }

    .main-navigation {
        left: -2px;
        right: -2px;
    }

    h1,
    .subpage-hero h1,
    .contact-page-hero h1,
    .career-hero h1,
    .pp-hero h1,
    .af-hero-content h1,
    .ohf-hero h1,
    .urban-hero h1,
    .oceyan-hero h1,
    .nova-hero h1 {
        font-size: clamp(2.35rem, 12vw, 3.2rem);
    }

    .section-heading h2,
    .projects-intro h2,
    .home-overview-heading h2,
    .contact-cta h2,
    .learning-positioning-heading h2,
    .learning-competencies-intro h2,
    .learning-practice-intro h2,
    .learning-status-heading h2,
    .learning-closing-main h2,
    .contact-options-heading h2,
    .contact-fit-intro h2,
    .contact-closing-main h2,
    .ohf-problem-heading h2,
    .ohf-data-heading h2,
    .ohf-nurturing-intro h2,
    .ohf-build-heading h2,
    .ohf-strategy-heading h2,
    .urban-problem-heading h2,
    .urban-positioning-intro h2,
    .urban-identity-intro h2,
    .urban-visual-heading h2,
    .urban-benefits-heading h2,
    .urban-landingpage-heading h2,
    .oceyan-conflict-heading h2,
    .oceyan-story-heading h2,
    .oceyan-web-heading h2,
    .oceyan-video-copy h2,
    .oceyan-voice-heading h2,
    .nova-section-heading h2,
    .nova-campaigns-heading h2,
    .nova-measurement-heading h2,
    .nova-closing-intro h2,
    .career-company-name h2,
    .career-initiative-main h2,
    .career-toolkit-title h2,
    .career-education-intro h2,
    .career-closing h2,
    .pp-showcase-intro h2,
    .pp-practice h2,
    .pp-experience h2,
    .af-profile-heading h2,
    .af-process-head h2,
    .af-personal-main h2,
    .af-closing h2 {
        font-size: clamp(2rem, 10.5vw, 2.85rem);
    }

    .project-content,
    .section-heading-note,
    .projects-intro-note,
    .projects-more,
    .home-overview-card,
    .about-teaser,
    .contact-page-status,
    .contact-channel,
    .contact-channel-resource,
    .case-related-project {
        padding-left: 20px;
        padding-right: 20px;
    }

    .ohf-hero-facts {
        grid-template-columns: 1fr;
    }

    .ohf-website-frame-bar,
    .urban-browser-bar,
    .oceyan-browser-bar {
        grid-template-columns: 52px 1fr 52px;
    }

    .nova-campaign-details > div {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .footer-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .footer-contact,
    .footer-cv {
        width: 100%;
    }

}


/* =========================================================
   LANDSCAPE / NIEDRIGE VIEWPORTS
   ========================================================= */

@media (max-height: 650px) and (min-width: 721px) {

    .main-navigation {
        max-height: calc(100vh - 88px);
    }

    .hero {
        min-height: auto;
    }

}


/* =========================================================
   TOUCH-GERÄTE: HOVER NICHT ALS VORAUSSETZUNG
   ========================================================= */

@media (hover: none) {

    .project-card:hover,
    .expertise-item:hover,
    .button:hover,
    .footer-contact:hover,
    .footer-cv:hover {
        transform: none;
    }

    .project-card:hover .project-image img {
        transform: none;
    }

}


/* =========================================================
   DRUCK / SICHERES UMBRECHEN
   ========================================================= */

@media print {

    .site-header,
    .site-footer,
    .scroll-cue,
    .menu-button,
    .image-lightbox,
    .nova-lightbox {
        display: none !important;
    }

    body {
        color: #111;
        background: #fff;
    }

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

}
/* =========================================================
   RESPONSIVE FEINTUNING V2
   Header, Mobile Navigation und ausgewählte Case-Study-Fixes
   ========================================================= */

/* ---------------------------------------------------------
   01 / HEADER + SPRACHE
   --------------------------------------------------------- */

@media (max-width: 1120px) {

    .site-header,
    .site-header.is-scrolled {
        min-height: 76px;
    }

    .header-inner {
        min-height: 76px;
        grid-template-columns: minmax(0, 1fr) auto auto auto;
        grid-template-rows: 1fr;
        align-items: center;
        gap: 10px;
    }

    .brand {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }

    .brand-logo-full {
        width: clamp(280px, 31vw, 330px);
    }

    .header-cv {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        justify-self: end;
        margin: 0;
        min-height: 40px;
    }

    /*
       main.js verschiebt den Sprachlink bei kleinen Viewports
       aus der versteckten Navigation direkt in den Header.
    */
    .header-inner > .language-switch-link {
        grid-column: 3;
        grid-row: 1;

        min-width: 44px;
        min-height: 40px;

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

        padding: 0 11px;

        color: var(--color-accent);
        background: rgba(204, 230, 75, 0.05);

        border: 1px solid rgba(204, 230, 75, 0.42);
        border-radius: 999px;

        font-size: 0.75rem;
        font-weight: 900;
        line-height: 1;
        letter-spacing: 0.08em;

        text-decoration: none;
    }

    .header-inner > .language-switch-link:hover,
    .header-inner > .language-switch-link:focus-visible {
        color: #071610;
        background: var(--color-accent);
        border-color: var(--color-accent);
    }

    .menu-button {
        grid-column: 4;
        grid-row: 1;
        align-self: center;
        justify-self: end;
        width: 46px;
        height: 46px;
    }

    /*
       Die Navigation bleibt außerhalb des normalen Grid-Flows.
       Dadurch kann sie den CV-Button nicht mehr in eine zweite
       Header-Zeile drücken.
    */
    .main-navigation {
        position: absolute;
        top: calc(100% + 7px);
        left: 0;
        right: 0;

        z-index: 220;

        display: none;

        max-height: calc(100dvh - 96px);
        overflow-y: auto;
        overscroll-behavior: contain;

        padding: 16px;

        color: var(--color-text);
        background: rgba(7, 18, 15, 0.985);

        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 18px;

        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
        backdrop-filter: blur(18px);
    }

    .main-navigation.is-open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }


    /* -----------------------------------------------------
       PROJEKT-DROPDOWN: AUF MOBILE ZUNÄCHST GESCHLOSSEN
       ----------------------------------------------------- */

    .nav-dropdown {
        width: 100%;
    }

    .nav-dropdown-chevron {
        transform: none;
    }

    .nav-dropdown-menu {
        display: none;

        position: static;

        width: auto;

        margin: 2px 8px 10px;
        padding: 10px;

        opacity: 1;
        visibility: visible;

        transform: none;

        box-shadow: none;
        backdrop-filter: none;
    }

    .nav-dropdown:not(.is-open) .nav-dropdown-menu {
        display: none;
    }

    .nav-dropdown.is-open .nav-dropdown-menu {
        display: block;
    }

    .nav-dropdown:not(.is-open) .nav-dropdown-chevron {
        transform: none;
    }

    .nav-dropdown.is-open .nav-dropdown-chevron {
        transform: rotate(180deg);
    }

    /*
       Desktop-Hover darf auf Touch-/Mobile-Breiten
       das Untermenü nicht eigenständig öffnen.
    */
    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown:focus-within .nav-dropdown-menu {
        transform: none;
    }
}


@media (max-width: 720px) {

    .header-inner {
        gap: 8px;
    }

    .brand-logo-full {
        width: clamp(210px, 44vw, 240px);
    }

    .header-cv {
        min-height: 38px;
        padding-inline: 13px;
        font-size: 0.78rem;
    }

    .header-inner > .language-switch-link {
        min-width: 40px;
        min-height: 38px;
        padding-inline: 9px;
        font-size: 0.71rem;
    }

    .menu-button {
        width: 44px;
        height: 44px;
    }

    .main-navigation {
        top: calc(100% + 6px);
        padding: 14px;
        border-radius: 15px;
    }
}


/*
   Unter etwa 460 px wäre Logo + CV + Sprache + Menü zu eng.
   Dann verschwindet nur der CV-Button aus dem Header.
   DE/EN bleibt weiterhin sichtbar.
*/
@media (max-width: 460px) {

    .header-inner {
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 8px;
    }

    .brand-logo-full {
        width: min(55vw, 205px);
    }

    .header-cv {
        display: none;
    }

    .header-inner > .language-switch-link {
        grid-column: 2;
        grid-row: 1;
    }

    .menu-button {
        grid-column: 3;
        grid-row: 1;
    }
}


/* ---------------------------------------------------------
   02 / OUTDOOR-HOSENFINDER
   --------------------------------------------------------- */

@media (max-width: 720px) {

    /* Qualifizierungslogik: kompakte, klar lesbare Zeilen */
    .ohf-data-table {
        margin-top: 44px;
    }

    .ohf-data-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 7px 16px;
        align-items: baseline;
        padding: 21px 0;
    }

    .ohf-data-row strong {
        grid-column: 1;
        grid-row: 1;
    }

    .ohf-data-row span {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
    }

    .ohf-data-row p {
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: 40rem;
    }


    /*
       Besucher -> Bedarf -> Kontakt -> Lead
       wird als zusammenhängender vertikaler Prozess dargestellt.
    */
    .ohf-data-conclusion {
        width: min(100%, 380px);
        grid-template-columns: 1fr;
        gap: 0;

        margin-top: 46px;
        margin-inline: auto;
    }

    .ohf-data-conclusion span,
    .ohf-data-conclusion strong {
        min-height: 62px;
        padding: 14px 18px;

        border-radius: 8px;
    }

    .ohf-data-conclusion span {
        background: rgba(255, 255, 255, 0.42);
    }

    .ohf-data-conclusion b {
        display: block;
        justify-self: center;

        padding: 8px 0;

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

        transform: rotate(90deg);
    }


    /* Nurturing: keine Mittellinie mehr durch Text und Marker */
    .ohf-mail-timeline {
        gap: 66px;
        margin-top: 58px;
    }

    .ohf-mail-timeline::before {
        display: none;
    }

    .ohf-mail-step,
    .ohf-mail-right {
        position: relative;

        grid-template-columns: 1fr;
        gap: 24px;

        padding-top: 46px;
    }

    .ohf-mail-marker,
    .ohf-mail-right .ohf-mail-marker {
        position: absolute;

        top: 0;
        left: 0;

        display: flex;
        align-items: center;
        justify-items: initial;
        gap: 9px;

        transform: none;
    }

    .ohf-mail-marker strong {
        padding: 3px 7px;
    }

    .ohf-mail-copy,
    .ohf-mail-left .ohf-mail-copy,
    .ohf-mail-right .ohf-mail-copy {
        max-width: 620px;
        padding: 0;
    }

    .ohf-mail-copy {
        order: 1;
    }

    .ohf-mail-image {
        order: 2;
    }

    .ohf-mail-copy h3 {
        font-size: clamp(1.75rem, 8vw, 2.45rem);
    }


    /* HTML / CSS / JavaScript: keine irritierende senkrechte Trennlinie */
    .ohf-tech-lines {
        grid-template-columns: 1fr;
        margin-top: 50px;
    }

    .ohf-tech-lines article {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 16px;
        padding: 24px 0;
    }

    .ohf-tech-lines article:first-child {
        padding-left: 0;
    }

    .ohf-tech-lines article + article {
        border-left: 0;
        border-top: 1px solid var(--ohf-line);
    }
}


@media (max-width: 420px) {

    .ohf-data-row {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .ohf-data-row strong,
    .ohf-data-row span,
    .ohf-data-row p {
        grid-column: 1;
        grid-row: auto;
    }

    .ohf-data-row span {
        text-align: left;
    }

    .ohf-tech-lines article {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}


/* ---------------------------------------------------------
   03 / URBANROOTS FARBSYSTEM
   --------------------------------------------------------- */

@media (max-width: 900px) {

    /*
       Desktop nutzt für Warm Off-White grid-row: 1 / 3.
       Diese Regel muss auf kleineren Viewports explizit aufgehoben werden.
    */
    .urban-brandboard {
        grid-template-rows: none;
        grid-auto-rows: auto;
    }

    .urban-color-cream {
        grid-row: auto;
    }

    .urban-color {
        min-height: 180px;
    }

    .urban-color-cream {
        min-height: 220px;
    }
}


@media (max-width: 720px) {

    .urban-brandboard {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-rows: auto;

        gap: 10px;
        margin-top: 48px;
    }

    .urban-brandboard > :first-child {
        grid-column: auto;
    }

    .urban-color,
    .urban-color-cream {
        min-height: 155px;
        padding: 24px;
    }

    .urban-color-cream {
        min-height: 170px;
    }
}


/* ---------------------------------------------------------
   04 / ERFAHRUNG
   --------------------------------------------------------- */

@media (max-width: 720px) {

    /*
       DESIGN / PRODUCT / WEB sind auf Desktop bewusst große
       dekorative Begriffe. Auf Smartphone erzeugen sie nur
       leere Höhe und verlieren den Bezug zum jeweiligen Abschnitt.
    */
    .career-story-space {
        display: none;
    }

    .career-story-item {
        gap: 0;
        padding: 38px 0 44px;
    }

    .career-story-item + .career-story-item {
        margin-top: 0;
        border-top: 1px solid var(--career-line);
    }

    .career-story-content,
    .career-story-left .career-story-content,
    .career-story-right .career-story-content {
        justify-self: stretch;
        max-width: 100%;
        padding: 0;
    }
}

/* =========================================================
   ACCESSIBILITY FINAL PASS
   ========================================================= */

/* Einheitlicher, deutlich sichtbarer Tastaturfokus für alle Interaktionen. */
a:focus-visible,
button:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 4px;
}

/* Kleine Zusatztexte im hellen Dropdown erhalten etwas mehr Kontrast. */
.nav-dropdown-menu small {
    color: #607067;
}

/* Kleine Status- und Navigationslabels auf dunklen Projektkarten. */
.pp-card-status {
    color: rgba(255, 255, 255, 0.84);
    opacity: 1;
}

.pp-card .pp-project-link,
.pp-card .pp-project-link > span,
.pp-card-outdoor .pp-card-number,
.pp-card-urban .pp-card-number {
    color: #d2b56b;
}