/* =========================================================
   SABRINA DESIGNWERK
   PREMIUM EDITORIAL HERO V5
   ========================================================= */

body:has(.kinetic) {
    margin:0;
    overflow-x:clip;
    background:#151515;
}

body:has(.kinetic) .sdw-header,
body:has(.kinetic) .sdw-footer {
    display:none;
}

body:has(.kinetic) .site-main,
body:has(.kinetic) .content-area,
body:has(.kinetic) .entry-content,
body:has(.kinetic) .wp-site-blocks,
body:has(.kinetic) main {
    max-width:none !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
}

.kinetic {
    --cream:#FCFAF7;
    --ink:#151515;
    --sand:#D1BC8A;
    --blue:#0E599B;

    width:100%;
    margin-left:0;
    font-family:"avenir-lt-pro",sans-serif;
    background:var(--ink);
}

.kinetic::before {
    content:"";
    display:block;
    height:100svh;
}

.kinetic-stage {
    position:absolute;
    inset:0 0 auto 0;
    width:100%;
    height:100svh;
    overflow:hidden;
    background:#151515;
}

.kinetic-preview {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    transform:none !important;
    overflow:hidden;
    background:#151515;
}

.kinetic-sheet {
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    transform:none;
}

.sheet-a {
    z-index:1;
    opacity:1;
}

.sheet-b {
    z-index:2;
    opacity:0;
    clip-path:inset(0 100% 0 0);
}

.sheet-c {
    z-index:3;
    opacity:0;
    clip-path:inset(0 100% 0 0);
    mix-blend-mode:multiply;
}

.kinetic-preview.is-switching .sheet-b {
    opacity:1;
    clip-path:inset(0);
    transition:
        clip-path 760ms cubic-bezier(.16,1,.3,1);
}

.kinetic-preview.is-switching .sheet-c {
    opacity:.16;
    clip-path:inset(0);
    transform:translateX(4px);
    transition:
        clip-path 760ms cubic-bezier(.16,1,.3,1),
        transform 760ms cubic-bezier(.16,1,.3,1),
        opacity 180ms ease;
}

.kinetic-preview.is-settled .sheet-c {
    opacity:0;
    transform:translateX(0);
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

/* Lesbarkeit ohne das Bild totzudunkeln */
.kinetic-stage::after {
    content:"";
    position:absolute;
    inset:0;
    z-index:8;
    pointer-events:none;
    background:
        linear-gradient(
            90deg,
            rgba(10,10,11,.78) 0%,
            rgba(10,10,11,.58) 29%,
            rgba(10,10,11,.20) 57%,
            rgba(10,10,11,.04) 82%
        ),
        linear-gradient(
            0deg,
            rgba(10,10,11,.58) 0%,
            rgba(10,10,11,0) 42%
        );
}

.kinetic-topline {
    position:absolute;
    z-index:20;
    top:28px;
    left:3vw;
    right:3vw;
    display:flex;
    justify-content:space-between;
    color:var(--sand);
    font-size:10px;
    font-weight:500;
    letter-spacing:.20em;
    text-transform:uppercase;
}

.kinetic-register-mark {
    display:none;
}

.kinetic-preview-meta {
    display:none;
}

.kinetic-index {
    position:absolute;
    z-index:20;
    left:3vw;
    bottom:8vh;
    width:min(63vw,1120px);
    transform:none;
}

.kinetic-project {
    display:grid;
    grid-template-columns:42px minmax(0,1fr) 190px;
    align-items:center;
    width:100%;
    min-height:72px;
    padding:13px 0;
    border:0;
    border-top:1px solid rgba(255,255,255,.24);
    background:transparent;
    color:white;
    text-align:left;
    cursor:pointer;
    font-family:inherit;
}

.kinetic-project:last-child {
    border-bottom:1px solid rgba(255,255,255,.24);
}

.kinetic-no {
    font-size:9px;
    font-weight:500;
    letter-spacing:.18em;
    color:rgba(255,255,255,.52);
}

.kinetic-name {
    display:block;
    width:100%;
    max-width:none;
    white-space:nowrap;
    overflow:visible;
    font-size:clamp(24px,2.3vw,42px);
    font-weight:500;
    line-height:.9;
    letter-spacing:-.045em;
    color:rgba(255,255,255,.30);
    opacity:1;
    transition:
        color 300ms ease,
        font-size 450ms cubic-bezier(.16,1,.3,1);
}

.kinetic-type {
    margin:0;
    text-align:right;
    font-size:9px;
    font-weight:500;
    letter-spacing:.17em;
    text-transform:uppercase;
    color:rgba(255,255,255,.42);
}

.kinetic-project.is-active {
    min-height:126px;
}

.kinetic-project.is-active .kinetic-name {
    font-size:clamp(58px,5vw,96px);
    color:#fff;
}

.kinetic-project.is-active .kinetic-no {
    color:var(--sand);
}

.kinetic-project.is-active .kinetic-type {
    color:#fff;
}

.kinetic-project:hover .kinetic-name {
    color:rgba(255,255,255,.68);
}

.kinetic-project.is-active:hover .kinetic-name {
    color:#fff;
}

.kinetic-scroll-note {
    position:absolute;
    z-index:20;
    left:3vw;
    bottom:24px;
    display:flex;
    gap:18px;
    color:rgba(255,255,255,.68);
    font-size:9px;
    font-weight:500;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.kinetic-scroll-note span {
    animation:none;
}

.kinetic-case {
    position:relative;
    width:100%;
    min-height:100svh;
    margin:0;
    padding:8vw 5vw;
    overflow:hidden;
    background:var(--cream);
    color:var(--ink);
}

.kinetic-case-label {
    display:flex;
    gap:32px;
    color:var(--blue);
    font-size:10px;
    font-weight:500;
    letter-spacing:.2em;
}

.kinetic-case-title {
    width:100%;
    margin:14vh 0 28px;
    font-size:clamp(64px,9vw,170px);
    font-weight:500;
    line-height:.82;
    letter-spacing:-.065em;
    white-space:nowrap;
    color:var(--ink);
}

.kinetic-case-copy {
    margin:0;
    font-size:12px;
    letter-spacing:.16em;
    text-transform:uppercase;
}

@media (max-width:1100px) {
    .kinetic-topline {
        left:24px;
        right:24px;
        top:22px;
    }

    .kinetic-index {
        left:24px;
        right:24px;
        bottom:68px;
        width:auto;
    }

    .kinetic-project {
        grid-template-columns:32px minmax(0,1fr);
    }

    .kinetic-type {
        display:none;
    }

    .kinetic-project.is-active .kinetic-name {
        font-size:clamp(42px,8vw,72px);
    }

    .kinetic-name {
        font-size:clamp(20px,3.2vw,32px);
    }

    .kinetic-scroll-note {
        left:24px;
    }

    .kinetic-stage::after {
        background:
            linear-gradient(
                0deg,
                rgba(10,10,11,.86) 0%,
                rgba(10,10,11,.48) 55%,
                rgba(10,10,11,.10) 100%
            );
    }
}

@media (max-width:700px) {
    .kinetic-project.is-active .kinetic-name {
        white-space:normal;
        font-size:clamp(38px,11vw,62px);
    }

    .kinetic-case-title {
        white-space:normal;
    }
}

@media (prefers-reduced-motion:reduce) {
    .kinetic-sheet,
    .kinetic-name {
        transition:none !important;
    }
}


/* =========================================================
   PREMIUM CASE OPENER V2
   ========================================================= */

.kinetic-case {
    position:relative;
    width:100%;
    min-height:100svh;
    margin:0;
    padding:0;
    overflow:hidden;
    background:var(--cream);
    color:var(--ink);
}

.kinetic-case::after {
    content:"";
    position:absolute;
    z-index:1;
    top:0;
    right:0;
    width:54%;
    height:100%;
    background-image:var(--case-image);
    background-size:cover;
    background-position:center;
    clip-path:inset(0 0 0 100%);
    transition:
        clip-path 1100ms cubic-bezier(.16,1,.3,1);
}

.kinetic-case::before {
    content:"";
    position:absolute;
    z-index:2;
    left:46%;
    top:5vw;
    bottom:5vw;
    width:1px;
    background:rgba(21,21,21,.16);
}

.kinetic-case-label {
    position:absolute;
    z-index:5;
    top:6vw;
    left:5vw;
    display:flex;
    gap:32px;
    color:var(--blue);
    font-size:10px;
    font-weight:500;
    letter-spacing:.2em;
    text-transform:uppercase;
    opacity:0;
    transform:translateY(12px);
}

.kinetic-case-title {
    position:absolute;
    z-index:5;
    left:5vw;
    bottom:25vh;
    width:36vw;
    margin:0;
    font-size:clamp(62px,7vw,128px);
    font-weight:500;
    line-height:.84;
    letter-spacing:-.065em;
    white-space:normal;
    overflow-wrap:normal;
    color:var(--ink);
    opacity:0;
    transform:translateY(45px);
}

.kinetic-case-copy {
    position:absolute;
    z-index:5;
    left:5vw;
    bottom:15vh;
    margin:0;
    font-size:11px;
    font-weight:500;
    letter-spacing:.17em;
    text-transform:uppercase;
    opacity:0;
    transform:translateY(15px);
}

.kinetic-case.is-visible::after {
    clip-path:inset(0);
}

.kinetic-case.is-visible .kinetic-case-label {
    opacity:1;
    transform:translateY(0);
    transition:
        opacity 600ms ease 180ms,
        transform 800ms cubic-bezier(.16,1,.3,1) 180ms;
}

.kinetic-case.is-visible .kinetic-case-title {
    opacity:1;
    transform:translateY(0);
    transition:
        opacity 700ms ease 320ms,
        transform 1000ms cubic-bezier(.16,1,.3,1) 320ms;
}

.kinetic-case.is-visible .kinetic-case-copy {
    opacity:1;
    transform:translateY(0);
    transition:
        opacity 600ms ease 520ms,
        transform 800ms cubic-bezier(.16,1,.3,1) 520ms;
}

@media (max-width:900px) {
    .kinetic-case::after {
        width:100%;
        height:56%;
        top:44%;
    }

    .kinetic-case::before {
        display:none;
    }

    .kinetic-case-label {
        top:42px;
        left:24px;
    }

    .kinetic-case-title {
        left:24px;
        top:16vh;
        bottom:auto;
        width:calc(100% - 48px);
        font-size:clamp(52px,14vw,92px);
    }

    .kinetic-case-copy {
        left:24px;
        top:35vh;
        bottom:auto;
    }
}

@media (prefers-reduced-motion:reduce) {
    .kinetic-case::after {
        clip-path:inset(0) !important;
        transition:none !important;
    }

    .kinetic-case-label,
    .kinetic-case-title,
    .kinetic-case-copy {
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }
}

/* =========================================================
   CASE FINAL BALANCE
   42% information / 58% project image
   ========================================================= */

.kinetic-case::after {
    width:58%;
}

.kinetic-case::before {
    left:42%;
}

.kinetic-case-title {
    width:33vw;
    font-size:clamp(58px,6.3vw,116px);
    text-wrap:balance;
}

@media (min-width:1500px) {
    .kinetic-case-title {
        width:34vw;
    }
}

@media (max-width:900px) {
    .kinetic-case::after {
        top:44%;
        right:0;
        width:100%;
        height:56%;
    }

    .kinetic-case-title {
        left:24px;
        top:16vh;
        bottom:auto;
        width:calc(100% - 48px);
        font-size:clamp(52px,14vw,92px);
    }

    .kinetic-case-copy {
        left:24px;
        top:35vh;
        bottom:auto;
    }
}


/* =========================================================
   SERVICES — EDITORIAL SYSTEM
   ========================================================= */

.kinetic-services {
    display:grid;
    grid-template-columns:42% 58%;
    min-height:100svh;
    background:var(--ink);
    color:#fff;
}

.kinetic-services-intro {
    position:relative;
    padding:8vw 5vw;
    border-right:1px solid rgba(255,255,255,.15);
}

.kinetic-services-intro > span {
    color:var(--sand);
    font-size:10px;
    font-weight:500;
    letter-spacing:.2em;
}

.kinetic-services-intro h2 {
    position:sticky;
    top:10vh;
    margin:22vh 0 40px;
    font-size:clamp(48px,5.3vw,96px);
    font-weight:500;
    line-height:.86;
    letter-spacing:-.06em;
}

.kinetic-services-intro p {
    max-width:390px;
    margin:0;
    color:rgba(255,255,255,.68);
    font-size:17px;
    line-height:1.55;
}

.kinetic-services-list {
    display:flex;
    flex-direction:column;
}

.kinetic-service {
    position:relative;
    display:grid;
    grid-template-rows:auto auto 1fr;
    align-content:start;
    row-gap:clamp(42px,4vw,72px);
    min-height:52svh;
    padding:5vw;
    border-bottom:1px solid rgba(255,255,255,.16);
}

.kinetic-service > span {
    position:static;
    color:var(--sand);
    font-size:10px;
    font-weight:500;
    line-height:1;
    letter-spacing:.18em;
}

.kinetic-service h3 {
    margin:0;
    color:rgba(255,255,255,.25);
    font-size:clamp(48px,6vw,112px);
    font-weight:500;
    line-height:.84;
    letter-spacing:-.055em;
    transition:
        color 450ms ease,
        transform 700ms cubic-bezier(.16,1,.3,1);
}

.kinetic-service.is-visible h3 {
    color:#fff;
    transform:translateX(14px);
}

@media (max-width:900px) {
    .kinetic-services {
        grid-template-columns:1fr;
    }

    .kinetic-services-intro {
        padding:80px 24px;
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.16);
    }

    .kinetic-services-intro h2 {
        position:static;
        margin:80px 0 30px;
    }

    .kinetic-service {
        min-height:45svh;
        padding:48px 24px;
    }

    .kinetic-service {
        row-gap:36px;
    }
}

@media (prefers-reduced-motion:reduce) {
    .kinetic-service h3 {
        color:#fff;
        transform:none !important;
        transition:none !important;
    }
}

/* =========================================================
   SERVICES — STICKY PANEL FIX
   ========================================================= */

.kinetic-services-intro {
    position:sticky;
    top:0;
    align-self:start;
    height:100svh;
    padding:8vw 5vw;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.kinetic-services-intro > span {
    position:absolute;
    top:8vw;
    left:5vw;
}

.kinetic-services-intro h2 {
    position:static;
    margin:0 0 38px;
}

.kinetic-services-intro p {
    position:static;
    margin:0;
}

@media (max-width:900px) {
    .kinetic-services-intro {
        position:relative;
        top:auto;
        height:auto;
        min-height:auto;
        padding:72px 24px 68px;
    }

    .kinetic-services-intro > span {
        position:static;
        margin-bottom:52px;
    }

    .kinetic-services-intro h2 {
        margin:0 0 30px;
    }
}


/* =========================================================
   ABOUT SABRINA — EDITORIAL PORTRAIT WITHOUT PORTRAIT
   ========================================================= */

.kinetic-about {
    display:grid;
    grid-template-columns:42% 58%;
    min-height:100svh;
    background:var(--cream);
    color:var(--ink);
}

.kinetic-about-name {
    position:relative;
    min-height:100svh;
    padding:5vw;
    overflow:hidden;
    background:var(--sand);
}

.kinetic-about-label {
    position:absolute;
    top:5vw;
    left:5vw;
    color:var(--blue);
    font-size:10px;
    font-weight:500;
    letter-spacing:.20em;
}

.kinetic-about-word {
    position:absolute;
    left:4.5vw;
    top:50%;
    transform:translateY(-50%);
    font-size:clamp(105px,12vw,220px);
    font-weight:500;
    line-height:.67;
    letter-spacing:-.075em;
}

.kinetic-about-word span {
    display:block;
}

.kinetic-about-word span:nth-child(2) {
    margin-left:8vw;
}

.kinetic-about-word span:nth-child(3) {
    margin-left:2vw;
}

.kinetic-about-signature {
    position:absolute;
    left:5vw;
    bottom:5vw;
    font-size:10px;
    font-weight:500;
    letter-spacing:.19em;
}

.kinetic-about-content {
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:100svh;
    padding:8vw 7vw;
    border-left:1px solid rgba(21,21,21,.16);
}

.kinetic-about-lead {
    max-width:850px;
    margin:0;
    font-size:clamp(42px,5vw,92px);
    font-weight:500;
    line-height:.94;
    letter-spacing:-.055em;
}

.kinetic-about-text {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4vw;
    margin-top:9vh;
    padding-top:30px;
    border-top:1px solid rgba(21,21,21,.20);
}

.kinetic-about-text p {
    max-width:430px;
    margin:0;
    font-size:17px;
    line-height:1.65;
}

.kinetic-about-meta {
    display:flex;
    gap:30px;
    margin-top:8vh;
    color:var(--blue);
    font-size:9px;
    font-weight:500;
    letter-spacing:.18em;
}

.kinetic-about-word span {
    opacity:0;
    transform:translateX(-34px);
}

.kinetic-about.is-visible .kinetic-about-word span {
    opacity:1;
    transform:translateX(0);
    transition:
        opacity 700ms ease,
        transform 950ms cubic-bezier(.16,1,.3,1);
}

.kinetic-about.is-visible .kinetic-about-word span:nth-child(2) {
    transform:translateX(0);
    transition-delay:100ms;
}

.kinetic-about.is-visible .kinetic-about-word span:nth-child(3) {
    transform:translateX(0);
    transition-delay:200ms;
}

.kinetic-about-lead,
.kinetic-about-text,
.kinetic-about-meta {
    opacity:0;
    transform:translateY(24px);
}

.kinetic-about.is-visible .kinetic-about-lead {
    opacity:1;
    transform:none;
    transition:
        opacity 700ms ease 150ms,
        transform 900ms cubic-bezier(.16,1,.3,1) 150ms;
}

.kinetic-about.is-visible .kinetic-about-text {
    opacity:1;
    transform:none;
    transition:
        opacity 700ms ease 330ms,
        transform 900ms cubic-bezier(.16,1,.3,1) 330ms;
}

.kinetic-about.is-visible .kinetic-about-meta {
    opacity:1;
    transform:none;
    transition:
        opacity 600ms ease 480ms,
        transform 800ms cubic-bezier(.16,1,.3,1) 480ms;
}

@media (max-width:900px) {
    .kinetic-about {
        grid-template-columns:1fr;
    }

    .kinetic-about-name {
        min-height:72svh;
        padding:60px 24px;
    }

    .kinetic-about-label {
        top:40px;
        left:24px;
    }

    .kinetic-about-word {
        left:24px;
        font-size:clamp(100px,30vw,190px);
    }

    .kinetic-about-word span:nth-child(2) {
        margin-left:16vw;
    }

    .kinetic-about-signature {
        left:24px;
        bottom:40px;
    }

    .kinetic-about-content {
        min-height:auto;
        padding:90px 24px;
        border-left:0;
    }

    .kinetic-about-lead {
        font-size:clamp(42px,12vw,72px);
    }

    .kinetic-about-text {
        grid-template-columns:1fr;
        gap:28px;
        margin-top:70px;
    }

    .kinetic-about-meta {
        flex-wrap:wrap;
        margin-top:60px;
    }
}

@media (prefers-reduced-motion:reduce) {
    .kinetic-about-word span,
    .kinetic-about-lead,
    .kinetic-about-text,
    .kinetic-about-meta {
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }
}


/* =========================================================
   ABOUT — AUTHENTIC PORTRAIT VERSION
   ========================================================= */

.kinetic-about {
    display:grid;
    grid-template-columns:42% 58%;
    width:100%;
    min-height:100svh;
    background:var(--cream);
    color:var(--ink);
}

.kinetic-about-portrait {
    position:relative;
    height:100svh;
    overflow:hidden;
    background:var(--sand);
}

.kinetic-about-portrait img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 32%;
    transform:scale(1.025);
}

.kinetic-about-portrait::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(
            0deg,
            rgba(10,10,10,.28) 0%,
            rgba(10,10,10,0) 34%
        );
}

.kinetic-about-image-meta {
    position:absolute;
    z-index:3;
    left:34px;
    right:34px;
    bottom:30px;
    display:flex;
    justify-content:space-between;
    color:#fff;
    font-size:9px;
    font-weight:500;
    letter-spacing:.19em;
    text-transform:uppercase;
}

.kinetic-about-content {
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:100svh;
    padding:7vw;
    border-left:1px solid rgba(21,21,21,.14);
}

.kinetic-about-kicker {
    color:var(--blue);
    font-size:10px;
    font-weight:500;
    letter-spacing:.20em;
}

.kinetic-about-content h2 {
    margin:5vh 0 0;
    font-size:clamp(62px,6.2vw,118px);
    font-weight:500;
    line-height:.82;
    letter-spacing:-.065em;
}

.kinetic-about-copy {
    max-width:720px;
    margin:7vh 0 0;
    padding-top:28px;
    border-top:1px solid rgba(21,21,21,.20);
    font-size:18px;
    line-height:1.65;
}

.kinetic-about-points {
    max-width:720px;
    margin:4vh 0 0;
    padding:0;
    list-style:none;
    border-top:1px solid rgba(21,21,21,.16);
}

.kinetic-about-points li {
    position:relative;
    margin:0;
    padding:13px 0 13px 28px;
    border-bottom:1px solid rgba(21,21,21,.16);
    font-size:14px;
    line-height:1.4;
}

.kinetic-about-points li::before {
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:10px;
    height:1px;
    background:var(--blue);
    transform:translateY(-50%);
}

.kinetic-about-meta {
    display:flex;
    gap:30px;
    margin-top:5vh;
    color:var(--blue);
    font-size:9px;
    font-weight:500;
    letter-spacing:.18em;
}

@media (max-width:900px) {
    .kinetic-about {
        grid-template-columns:1fr;
    }

    .kinetic-about-portrait {
        height:75svh;
    }

    .kinetic-about-portrait img {
        max-width:100%;
        object-position:center 30%;
        transform:none;
    }

    .kinetic-about-content {
        min-height:auto;
        padding:80px 24px;
        border-left:0;
    }

    .kinetic-about-content h2 {
        margin-top:50px;
        max-width:100%;
        font-size:clamp(38px,9.4vw,52px);
        line-height:.96;
        letter-spacing:-.055em;
    }

    .kinetic-about-copy {
        margin-top:60px;
    }

    .kinetic-about-meta {
        flex-wrap:wrap;
    }
}

.kinetic-about-portrait {
    clip-path:inset(0 0 10% 0);
}

.kinetic-about.is-visible .kinetic-about-portrait {
    clip-path:inset(0);
    transition:
        clip-path 1100ms cubic-bezier(.16,1,.3,1);
}

.kinetic-about.is-visible .kinetic-about-portrait img {
    transform:scale(1);
    transition:
        transform 1500ms cubic-bezier(.16,1,.3,1);
}

.kinetic-about-kicker,
.kinetic-about-content h2,
.kinetic-about-copy,
.kinetic-about-points {
    opacity:0;
    transform:translateY(18px);
}

.kinetic-about.is-visible .kinetic-about-kicker,
.kinetic-about.is-visible .kinetic-about-content h2,
.kinetic-about.is-visible .kinetic-about-copy,
.kinetic-about.is-visible .kinetic-about-points {
    opacity:1;
    transform:none;
    transition:
        opacity 650ms ease,
        transform 850ms cubic-bezier(.16,1,.3,1);
}

.kinetic-about.is-visible .kinetic-about-content h2 {
    transition-delay:100ms;
}

.kinetic-about.is-visible .kinetic-about-copy {
    transition-delay:220ms;
}

.kinetic-about.is-visible .kinetic-about-points {
    transition-delay:320ms;
}

@media (prefers-reduced-motion:reduce) {
    .kinetic-about-portrait,
    .kinetic-about-portrait img,
    .kinetic-about-kicker,
    .kinetic-about-content h2,
    .kinetic-about-copy,
    .kinetic-about-points {
        opacity:1 !important;
        transform:none !important;
        clip-path:none !important;
        transition:none !important;
    }
}


/* =========================================================
   PROJECT INDEX — FIVE WORKS
   ========================================================= */

.kinetic-index {
    bottom:5vh;
}

.kinetic-project {
    min-height:54px;
    padding:9px 0 10px;
}

.kinetic-project.is-active {
    min-height:106px;
}

.kinetic-name {
    font-size:clamp(19px,1.65vw,30px);
}

.kinetic-project.is-active .kinetic-name {
    font-size:clamp(52px,4.6vw,88px);
}

@media (max-height:850px) and (min-width:901px) {
    .kinetic-project {
        min-height:46px;
        padding:6px 0 7px;
    }

    .kinetic-project.is-active {
        min-height:92px;
    }

    .kinetic-project.is-active .kinetic-name {
        font-size:clamp(46px,4vw,74px);
    }
}

/* =========================================================
   TYPOGRAPHY — UMLAUT / LINE HEIGHT CORRECTION
   ========================================================= */

.kinetic-about-content h2 {
    line-height: .94;
    letter-spacing: -.055em;
}

/* Auch bei den großen Leistungsüberschriften etwas mehr Luft
   für Ä / Ö / Ü und andere Oberlängen */
.kinetic-service h3 {
    line-height: .90;
}

/* =========================================================
   SABRINA DESIGNWERK — BRAND MARK
   ========================================================= */

.kinetic-topline {
    align-items:flex-start;
}

.kinetic-brand {
    position:relative;
    z-index:2;
    display:block;
    width:62px;
    height:62px;
    border-radius:50%;
    text-decoration:none;
}

.kinetic-brand img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

.kinetic-work-label {
    padding-top:8px;
}

@media (max-width:900px) {
    .kinetic-brand {
        width:52px;
        height:52px;
    }

    .kinetic-work-label {
        padding-top:6px;
        font-size:8px;
    }
}

/* Logo + Wortmarke */
.kinetic-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    width: auto;
    height: auto;
    text-decoration: none;
}

.kinetic-brand img {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: block;
}

.kinetic-brand span {
    display: inline-block;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .19em;
    white-space: nowrap;
    text-transform: uppercase;
    line-height: 1;
    color: #cdb57d;
}

@media (max-width: 700px) {
    .kinetic-brand {
        gap: 10px;
    }

    .kinetic-brand img {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .kinetic-brand span {
        font-size: 8px;
        letter-spacing: .16em;
    }
}

/* =========================================================
   DESIGN MIT HERZ
   ========================================================= */

.kinetic-heart {
    background:var(--cream);
    color:var(--ink);
}

.kinetic-heart-head {
    display:grid;
    grid-template-columns:42% 58%;
    padding:10vw 5vw 8vw;
    border-bottom:1px solid rgba(21,21,21,.16);
}

.kinetic-heart-head > span {
    color:var(--blue);
    font-size:10px;
    font-weight:500;
    letter-spacing:.20em;
}

.kinetic-heart-head h2 {
    grid-column:2;
    margin:0;
    font-size:clamp(58px,6vw,112px);
    font-weight:500;
    line-height:.90;
    letter-spacing:-.06em;
}

.kinetic-heart-head p {
    grid-column:2;
    max-width:760px;
    margin:6vh 0 0;
    padding-top:28px;
    border-top:1px solid rgba(21,21,21,.18);
    font-size:18px;
    line-height:1.65;
}

.kinetic-heart-services {
    padding:0 5vw;
}

.kinetic-heart-item {
    display:grid;
    grid-template-columns:7% 35% 58%;
    align-items:start;
    padding:4.5vw 0;
    border-bottom:1px solid rgba(21,21,21,.18);
}

.kinetic-heart-item > span {
    color:var(--blue);
    font-size:10px;
    font-weight:500;
    letter-spacing:.18em;
}

.kinetic-heart-item h3 {
    margin:0;
    font-size:clamp(38px,4vw,74px);
    font-weight:500;
    line-height:.92;
    letter-spacing:-.05em;
}

.kinetic-heart-item p {
    max-width:650px;
    margin:5px 0 0;
    font-size:17px;
    line-height:1.65;
}

.kinetic-support {
    display:grid;
    grid-template-columns:42% 58%;
    margin-top:8vw;
    background:var(--sand);
}

.kinetic-support-head {
    padding:7vw 5vw;
}

.kinetic-support-head > span {
    color:var(--blue);
    font-size:10px;
    font-weight:500;
    letter-spacing:.20em;
}

.kinetic-support-head h2 {
    margin:18vh 0 0;
    font-size:clamp(52px,5.3vw,98px);
    font-weight:500;
    line-height:.90;
    letter-spacing:-.06em;
}

.kinetic-support-list {
    border-left:1px solid rgba(21,21,21,.18);
}

.kinetic-support-item {
    min-height:34svh;
    padding:4vw 5vw;
    border-bottom:1px solid rgba(21,21,21,.18);
}

.kinetic-support-item > span {
    color:var(--blue);
    font-size:9px;
    font-weight:500;
    letter-spacing:.18em;
}

.kinetic-support-item h3 {
    margin:5vh 0 22px;
    font-size:clamp(34px,3.6vw,68px);
    font-weight:500;
    line-height:.92;
    letter-spacing:-.05em;
}

.kinetic-support-item p {
    max-width:650px;
    margin:0;
    font-size:17px;
    line-height:1.65;
}

@media (max-width:900px) {
    .kinetic-heart-head,
    .kinetic-support {
        grid-template-columns:1fr;
    }

    .kinetic-heart-head {
        padding:80px 24px;
    }

    .kinetic-heart-head h2,
    .kinetic-heart-head p {
        grid-column:1;
    }

    .kinetic-heart-head h2 {
        margin-top:60px;
    }

    .kinetic-heart-item {
        grid-template-columns:36px 1fr;
        padding:50px 0;
    }

    .kinetic-heart-item h3 {
        grid-column:2;
    }

    .kinetic-heart-item p {
        grid-column:2;
        margin-top:25px;
    }

    .kinetic-support-head {
        padding:80px 24px;
    }

    .kinetic-support-head h2 {
        margin-top:70px;
    }

    .kinetic-support-list {
        border-left:0;
        border-top:1px solid rgba(21,21,21,.18);
    }

    .kinetic-support-item {
        padding:55px 24px;
    }
}

/* Headline mit Umlauten: etwas mehr vertikale Luft */
.kinetic-support-head h2 {
    line-height: .98;
}

/* =========================================================
   TESTIMONIAL
   ========================================================= */

.kinetic-proof {
    position:relative;
    min-height:78svh;
    padding:8vw 7vw;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:var(--blue);
    color:#fff;
}

.kinetic-proof-label {
    position:absolute;
    top:5vw;
    left:5vw;
    color:var(--sand);
    font-size:10px;
    font-weight:500;
    letter-spacing:.2em;
}

.kinetic-proof blockquote {
    max-width:1350px;
    margin:0;
    font-size:clamp(48px,6vw,108px);
    font-weight:500;
    line-height:.96;
    letter-spacing:-.055em;
}

.kinetic-proof-author {
    display:flex;
    gap:20px;
    align-items:baseline;
    margin-top:7vh;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.3);
}

.kinetic-proof-author strong {
    font-size:13px;
    letter-spacing:.08em;
}

.kinetic-proof-author span {
    font-size:13px;
    opacity:.7;
}

/* =========================================================
   CONTACT
   ========================================================= */

.kinetic-contact {
    display:grid;
    grid-template-columns:42% 58%;
    background:var(--cream);
    color:var(--ink);
}

.kinetic-contact-info {
    min-width:0;
    min-height:100svh;
    padding:7vw 5vw;
    background:var(--sand);
}

.kinetic-contact-label,
.kinetic-hours > span,
.kinetic-form-head > span {
    color:var(--blue);
    font-size:10px;
    font-weight:500;
    letter-spacing:.2em;
}

.kinetic-contact-info h2 {
    margin:16vh 0 0;
    font-size:clamp(56px,5.4vw,102px);
    font-weight:500;
    line-height:.96;
    letter-spacing:-.06em;
}

.kinetic-contact-intro {
    max-width:540px;
    margin:6vh 0 0;
    font-size:17px;
    line-height:1.65;
}

.kinetic-contact-details {
    display:flex;
    flex-direction:column;
    gap:11px;
    margin-top:7vh;
}

.kinetic-contact-details > span {
    margin-bottom:12px;
    font-size:9px;
    letter-spacing:.18em;
}

.kinetic-contact-details a {
    color:var(--ink);
    font-size:18px;
    text-decoration:none;
}

.kinetic-contact-form {
    min-width:0;
    min-height:100svh;
    padding:7vw;
}

.kinetic-hours {
    display:flex;
    justify-content:space-between;
    gap:40px;
    padding-bottom:5vh;
    border-bottom:1px solid rgba(21,21,21,.18);
}

.kinetic-hours p {
    margin:0;
    line-height:1.7;
}

.kinetic-form-head {
    margin-top:8vh;
}

.kinetic-form-head h3 {
    margin:25px 0 6vh;
    font-size:clamp(46px,5vw,90px);
    font-weight:500;
    line-height:.94;
    letter-spacing:-.055em;
}

.kinetic-form-shell form {
    width:100%;
}

.kinetic-form-shell input,
.kinetic-form-shell textarea,
.kinetic-form-shell select {
    width:100%;
    max-width:none;
    border:0;
    border-bottom:1px solid rgba(21,21,21,.35);
    border-radius:0;
    padding:15px 0;
    background:transparent;
    color:var(--ink);
    font:inherit;
}

.kinetic-form-shell textarea {
    min-height:140px;
    resize:vertical;
}

.kinetic-form-shell button,
.kinetic-form-shell input[type="submit"] {
    width:auto;
    margin-top:26px;
    padding:15px 28px;
    border:1px solid var(--ink);
    background:var(--ink);
    color:#fff;
    font-size:11px;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
    cursor:pointer;
}

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

.kinetic-footer {
    display:grid;
    grid-template-columns:2fr 1fr 1.3fr;
    gap:6vw;
    padding:6vw 5vw 3vw;
    background:var(--ink);
    color:#fff;
}

.kinetic-footer-brand {
    display:flex;
    align-items:center;
    gap:22px;
}

.kinetic-footer-brand img {
    width:76px;
    height:76px;
    padding:7px;
    border-radius:50%;
    background:var(--sand);
}

.kinetic-footer-brand div,
.kinetic-footer-contact {
    display:flex;
    flex-direction:column;
    gap:8px;
}

.kinetic-footer strong {
    color:var(--sand);
    font-size:11px;
    letter-spacing:.18em;
}

.kinetic-footer span,
.kinetic-footer p,
.kinetic-footer a {
    color:rgba(255,255,255,.72);
    font-size:13px;
    line-height:1.6;
}

.kinetic-footer a {
    text-decoration:none;
}

.kinetic-footer-address > span,
.kinetic-footer-contact > span {
    color:var(--sand);
    font-size:9px;
    font-weight:500;
    letter-spacing:.18em;
}

.kinetic-footer-legal {
    grid-column:1 / -1;
    display:flex;
    gap:28px;
    padding-top:35px;
    border-top:1px solid rgba(255,255,255,.16);
}

.kinetic-footer-copy {
    grid-column:1 / -1;
    padding-top:20px;
    font-size:10px;
    letter-spacing:.12em;
    color:rgba(255,255,255,.45);
}

@media (max-width:900px) {
    .kinetic-proof {
        min-height:auto;
        padding:100px 24px;
    }

    .kinetic-proof-label {
        top:45px;
        left:24px;
    }

    .kinetic-proof-author {
        flex-direction:column;
        align-items:flex-start;
    }

    .kinetic-contact {
        grid-template-columns:1fr;
    }

    .kinetic-contact-info,
    .kinetic-contact-form {
        min-height:auto;
        padding:80px 24px;
    }

    .kinetic-contact-info h2 {
        margin-top:80px;
    }

    .kinetic-footer {
        grid-template-columns:1fr;
        padding:70px 24px 30px;
    }

    .kinetic-footer-legal,
    .kinetic-footer-copy {
        grid-column:1;
    }
}

/* =========================================================
   FINAL BALANCE — TYPO / CONTACT / FOOTER
   ========================================================= */

/* Genug Abstand für Ü in der zweiten Zeile */
.kinetic-support-head h2 {
    line-height: 1.08;
}

/* Lange Kontaktzeile innerhalb der 42%-Spalte halten */
.kinetic-contact-info h2 {
    font-size: clamp(50px, 4.35vw, 82px);
    line-height: 1.01;
    max-width: 100%;
}

/* Kontakt nur so hoch wie tatsächlich benötigt */
.kinetic-contact-info,
.kinetic-contact-form {
    min-height: auto;
}

.kinetic-contact-info {
    padding-top: 7vw;
    padding-bottom: 7vw;
}

.kinetic-contact-form {
    padding-top: 7vw;
    padding-bottom: 7vw;
}

/* Footer kompakter und bewusster */
.kinetic-footer {
    column-gap: 6vw;
    row-gap: 32px;
    padding: 4.5vw 5vw 2.5vw;
}

.kinetic-footer-legal {
    padding-top: 26px;
}

.kinetic-footer-copy {
    padding-top: 4px;
}

@media (max-width:900px) {
    .kinetic-support-head h2 {
        line-height: 1.04;
    }

    .kinetic-contact-info h2 {
        font-size: clamp(46px, 12vw, 70px);
    }

    .kinetic-footer {
        row-gap: 35px;
        padding: 65px 24px 28px;
    }
}

/* =========================================================
   TESTIMONIAL — FINAL TYPOGRAPHY
   ========================================================= */

.kinetic-proof blockquote {
    max-width: 1500px;
    font-size: clamp(48px, 5.35vw, 102px);
    line-height: 1.01;
    letter-spacing: -.052em;
}

.kinetic-proof-company {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .08em;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.45);
    padding-bottom: 3px;
    transition: border-color 220ms ease;
}

.kinetic-proof-company:hover,
.kinetic-proof-company:focus-visible {
    border-bottom-color: var(--sand);
}

@media (max-width:900px) {
    .kinetic-proof-break {
        display: none;
    }

    .kinetic-proof blockquote {
        font-size: clamp(42px, 11vw, 70px);
        line-height: 1.02;
    }
}

/* =========================================================
   TESTIMONIAL — WARM EDITORIAL VERSION
   ========================================================= */

.kinetic-proof-warm {
    display:grid;
    grid-template-columns:32% 68%;
    min-height:72svh;
    padding:0;
    background:var(--cream);
    color:var(--ink);
}

.kinetic-proof-client-panel {
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:5vw;
    background:var(--sand);
}

.kinetic-proof-warm .kinetic-proof-label {
    position:absolute;
    top:5vw;
    left:5vw;
    color:var(--blue);
}

.kinetic-proof-client {
    display:flex;
    align-items:center;
    gap:22px;
    color:var(--ink);
    text-decoration:none;
}

.kinetic-proof-client img {
    width:88px;
    height:88px;
    flex:0 0 88px;
    object-fit:contain;
    border-radius:50%;
    background:#fff;
}

.kinetic-proof-client-text {
    display:flex;
    flex-direction:column;
    gap:7px;
}

.kinetic-proof-client-text strong {
    font-size:13px;
    font-weight:500;
    letter-spacing:.06em;
}

.kinetic-proof-client-text small {
    font-size:13px;
    opacity:.65;
}

.kinetic-proof-client:hover strong,
.kinetic-proof-client:focus-visible strong {
    text-decoration:underline;
    text-underline-offset:4px;
}

.kinetic-proof-quote-panel {
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:7vw;
    border-left:1px solid rgba(21,21,21,.16);
}

.kinetic-proof-mark {
    position:absolute;
    top:4vw;
    left:7vw;
    color:var(--sand);
    font-size:clamp(90px,9vw,165px);
    font-weight:500;
    line-height:1;
}

.kinetic-proof-warm blockquote {
    max-width:1100px;
    margin:7vh 0 0;
    color:var(--ink);
    font-size:clamp(44px,4.25vw,78px);
    font-weight:500;
    line-height:1.08;
    letter-spacing:-.045em;
}

.kinetic-proof-caption {
    margin-top:7vh;
    padding-top:22px;
    border-top:1px solid rgba(21,21,21,.18);
    color:var(--blue);
    font-size:9px;
    font-weight:500;
    letter-spacing:.19em;
}

@media (max-width:900px) {
    .kinetic-proof-warm {
        grid-template-columns:1fr;
        min-height:auto;
    }

    .kinetic-proof-client-panel {
        min-height:340px;
        padding:60px 24px 40px;
    }

    .kinetic-proof-warm .kinetic-proof-label {
        top:40px;
        left:24px;
    }

    .kinetic-proof-quote-panel {
        padding:100px 24px 70px;
        border-left:0;
    }

    .kinetic-proof-mark {
        top:35px;
        left:24px;
    }

    .kinetic-proof-warm blockquote {
        margin-top:30px;
        font-size:clamp(38px,10vw,62px);
    }
}

/* =========================================================
   TESTIMONIAL B — PERSONAL CUSTOMER REFERENCE
   ========================================================= */

.kinetic-proof-card {
    padding:9vw 5vw;
    background:var(--cream);
    color:var(--ink);
}

.kinetic-proof-card-head {
    display:grid;
    grid-template-columns:32% 68%;
    padding-bottom:6vw;
}

.kinetic-proof-card-head > span {
    color:var(--blue);
    font-size:10px;
    font-weight:500;
    letter-spacing:.2em;
}

.kinetic-proof-card-head h2 {
    margin:0;
    max-width:900px;
    font-size:clamp(50px,5vw,92px);
    font-weight:500;
    line-height:.98;
    letter-spacing:-.055em;
}

.kinetic-proof-card-body {
    display:grid;
    grid-template-columns:32% 68%;
    border-top:1px solid rgba(21,21,21,.20);
    border-bottom:1px solid rgba(21,21,21,.20);
}

.kinetic-proof-customer {
    display:flex;
    align-items:center;
    gap:24px;
    padding:4vw 4vw 4vw 0;
    border-right:1px solid rgba(21,21,21,.18);
}

.kinetic-proof-customer img {
    width:92px;
    height:92px;
    flex:0 0 92px;
    object-fit:contain;
    border-radius:50%;
    background:#fff;
}

.kinetic-proof-customer > div {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.kinetic-proof-customer a {
    color:var(--ink);
    font-size:14px;
    font-weight:500;
    text-decoration:none;
    border-bottom:1px solid var(--sand);
    padding-bottom:3px;
}

.kinetic-proof-customer span {
    margin-top:8px;
    font-size:13px;
    opacity:.62;
}

.kinetic-proof-customer small {
    margin-top:24px;
    color:var(--blue);
    font-size:9px;
    font-weight:500;
    line-height:1.55;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.kinetic-proof-card blockquote {
    position:relative;
    align-self:center;
    max-width:950px;
    margin:0;
    padding:5vw 2vw 5vw 6vw;
    color:var(--ink);
    font-size:clamp(32px,3vw,54px);
    font-weight:200;
    line-height:1.22;
    letter-spacing:-.025em;
}

.kinetic-proof-card blockquote::before {
    content:"„";
    position:absolute;
    left:2vw;
    top:4vw;
    color:var(--sand);
    font-size:82px;
    font-weight:500;
    line-height:1;
}

@media (max-width:900px) {
    .kinetic-proof-card {
        padding:80px 24px;
    }

    .kinetic-proof-card-head,
    .kinetic-proof-card-body {
        grid-template-columns:minmax(0,1fr);
    }

    .kinetic-proof-card-head > span,
    .kinetic-proof-card-head h2 {
        min-width:0;
        max-width:100%;
    }

    .kinetic-proof-card-head h2 {
        margin-top:55px;
        font-size:clamp(36px,10vw,44px);
        line-height:1;
    }

    .kinetic-proof-customer {
        padding:40px 0;
        border-right:0;
        border-bottom:1px solid rgba(21,21,21,.18);
    }

    .kinetic-proof-card blockquote {
        padding:80px 0 55px;
        font-size:clamp(30px,8vw,46px);
    }

    .kinetic-proof-card blockquote::before {
        left:0;
        top:30px;
        font-size:64px;
    }
}

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

.kinetic-footer {
    grid-template-columns:1.7fr 1fr 1.2fr .8fr;
}

.kinetic-footer-social {
    display:flex;
    flex-direction:column;
    gap:18px;
}

.kinetic-footer-social > span {
    color:var(--sand);
    font-size:9px;
    font-weight:500;
    letter-spacing:.18em;
}

.kinetic-social-links {
    display:flex;
    gap:10px;
}

.kinetic-social-links a {
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.28);
    border-radius:50%;
    color:#fff;
    text-decoration:none;
    transition:
        background 220ms ease,
        color 220ms ease,
        border-color 220ms ease,
        transform 220ms ease;
}

.kinetic-social-links a span {
    color:inherit;
    font-size:11px;
    font-weight:500;
    line-height:1;
    letter-spacing:.02em;
}

.kinetic-social-links a:hover,
.kinetic-social-links a:focus-visible {
    background:var(--sand);
    border-color:var(--sand);
    color:var(--ink);
    transform:translateY(-2px);
}

@media (max-width:900px) {
    .kinetic-footer {
        grid-template-columns:1fr;
    }
}

/* =========================================================
   SOCIAL — ORIGINAL BRAND SHAPES / MONOCHROME
   ========================================================= */

.kinetic-social-links a {
    width:44px;
    height:44px;
    border:1px solid rgba(255,255,255,.30);
}

.kinetic-social-links .social-icon {
    display:block;
    width:17px;
    height:17px;
    fill:currentColor;
}

.kinetic-social-links .social-facebook {
    width:14px;
    height:20px;
}

.kinetic-social-links .social-instagram {
    width:19px;
    height:19px;
}

.kinetic-social-links .social-linkedin {
    width:18px;
    height:18px;
}

.kinetic-social-links a:hover,
.kinetic-social-links a:focus-visible {
    background:var(--sand);
    border-color:var(--sand);
    color:var(--ink);
    transform:translateY(-2px);
}

/* =========================================================
   BACK TO TOP — neben Chaty
   ========================================================= */

.kinetic-backtotop {
    position: fixed;
    z-index: 99990;
    right: 96px;
    bottom: 25px;

    width: 54px;
    height: 54px;

    display: grid;
    place-items: center;

    padding: 0;
    border: 1px solid rgba(21,21,21,.16);
    border-radius: 50%;

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

    font-family: inherit;
    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);

    transition:
        opacity 220ms ease,
        visibility 220ms ease,
        transform 220ms ease,
        background 220ms ease,
        color 220ms ease;
}

.kinetic-backtotop.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.kinetic-backtotop svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kinetic-backtotop:hover,
.kinetic-backtotop:focus-visible {
    background: var(--ink);
    color: var(--sand);
}

@media (max-width:700px) {
    .kinetic-backtotop {
        right: 88px;
        bottom: 20px;
        width: 50px;
        height: 50px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kinetic-backtotop {
        transition: none;
    }
}

/* =========================================================
   BACK TO TOP — Chaty vollständig freihalten
   Chaty öffnet nach oben, CTA erscheint links.
   ========================================================= */

.kinetic-backtotop {
    right: 25px;
    bottom: 225px;
}

@media (max-width:700px) {
    .kinetic-backtotop {
        right: 20px;
        bottom: 215px;
    }
}

/* Back-to-top exakt auf Chaty-Mittelachse */
.kinetic-backtotop {
    right: 36px;
}

@media (max-width:700px) {
    .kinetic-backtotop {
        right: 31px;
    }
}

/* Back-to-top exakt auf Chaty-Mittelachse */
.kinetic-backtotop {
    right: 25px;
}

@media (max-width:700px) {
    .kinetic-backtotop {
        right: 25px;
    }
}

/* Back-to-top optisch exakt auf Chaty-Achse */
.kinetic-backtotop {
    right: 29px;
}

@media (max-width:700px) {
    .kinetic-backtotop {
        right: 29px;
    }
}

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

.kinetic-topline {
    display:grid;
    grid-template-columns:minmax(240px,1fr) auto auto;
    align-items:center;
    gap:38px;
}

.kinetic-nav {
    display:flex;
    align-items:center;
    gap:26px;
}

.kinetic-nav a {
    position:relative;
    color:rgba(255,255,255,.78);
    font-size:9px;
    font-weight:500;
    line-height:1;
    letter-spacing:.17em;
    text-decoration:none;
    text-transform:uppercase;
    white-space:nowrap;
    transition:color 180ms ease;
}

.kinetic-nav a::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-8px;
    height:1px;
    background:var(--sand);
    transform:scaleX(0);
    transform-origin:right center;
    transition:transform 260ms cubic-bezier(.16,1,.3,1);
}

.kinetic-nav a:hover,
.kinetic-nav a:focus-visible {
    color:#fff;
}

.kinetic-nav a:hover::after,
.kinetic-nav a:focus-visible::after {
    transform:scaleX(1);
    transform-origin:left center;
}

.kinetic-work-label {
    white-space:nowrap;
}

@media (max-width:900px) {
    .kinetic-topline {
        grid-template-columns:auto 1fr;
        gap:20px;
    }

    .kinetic-work-label {
        display:none;
    }

    .kinetic-nav {
        justify-content:flex-end;
        gap:16px;
    }

    .kinetic-nav a {
        font-size:8px;
        letter-spacing:.11em;
    }
}

@media (max-width:620px) {
    .kinetic-brand span {
        display:none;
    }

    .kinetic-nav {
        gap:11px;
    }

    .kinetic-nav a {
        font-size:7px;
        letter-spacing:.07em;
    }
}

/* =========================================================
   TOPLINE — ALIGNMENT + CONTRAST
   ========================================================= */

.kinetic-topline {
    position: relative;
    isolation: isolate;
    min-height: 54px;
    align-items: center;
}

/* dezente Abdunklung nur hinter der Kopfleiste */
.kinetic-topline::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -4vw;
    right: -4vw;
    top: -32px;
    height: 112px;
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            rgba(10,10,10,.44) 0%,
            rgba(10,10,10,.22) 58%,
            rgba(10,10,10,0) 100%
        );
}

.kinetic-nav {
    align-items: center;
}

.kinetic-nav a,
.kinetic-work-label {
    margin: 0;
    padding: 0;
    line-height: 1;
    transform: none;
    vertical-align: middle;
}

/* Gold bewusst erhalten, aber klarer lesbar */
.kinetic-work-label {
    display: flex;
    align-items: center;
    align-self: center;
    color: #D8BE7C;
    opacity: 1;
    font-weight: 500;
    text-shadow: 0 1px 10px rgba(0,0,0,.30);
}

/* Navigation ebenfalls etwas stabiler auf hellen Bildern */
.kinetic-nav a {
    color: rgba(255,255,255,.92);
    text-shadow: 0 1px 8px rgba(0,0,0,.28);
}

/* =========================================================
   WORK LABEL — RIGHT EDGE FIX
   ========================================================= */

.kinetic-topline {
    overflow: hidden;
    gap: 24px;
}

.kinetic-work-label {
    display: block;
    margin-left: auto;
    padding-right: 20px;
    max-width: calc(100% - 40px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    font-size: clamp(8px, .72vw, 11px);
    letter-spacing: .16em;
    text-align: right;
    flex: 0 1 auto;
}

@media (max-width: 1280px) {
    .kinetic-work-label {
        padding-right: 12px;
        font-size: 9px;
        letter-spacing: .14em;
    }
}

@media (max-width: 1100px) {
    .kinetic-work-label {
        max-width: 180px;
    }
}

/* =========================================================
   TOPLINE — FULL WORK LABEL
   ========================================================= */

.kinetic-topline {
    grid-template-columns:auto minmax(0,1fr) max-content;
    column-gap:24px;
    overflow:visible;
}

.kinetic-nav {
    justify-self:end;
}

.kinetic-work-label {
    width:max-content;
    max-width:none;
    min-width:max-content;
    padding-right:0;
    overflow:visible;
    text-overflow:clip;
    white-space:nowrap;
    font-size:9px;
    letter-spacing:.13em;
    text-align:right;
}

@media (max-width:1280px) {
    .kinetic-work-label {
        font-size:8px;
        letter-spacing:.10em;
    }
}

/* =========================================================
   TOPLINE — FINAL RIGHT LABEL FIX
   ========================================================= */

.kinetic-topline {
    position:relative;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    column-gap:32px;
    overflow:visible;
    padding-right:190px;
}

.kinetic-nav {
    justify-self:end;
}

.kinetic-work-label {
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    width:auto;
    max-width:none;
    min-width:0;
    padding:0;
    margin:0;
    overflow:visible;
    white-space:nowrap;
    font-size:8px;
    letter-spacing:.10em;
    line-height:1;
    text-align:right;
    color:#D8BE7C;
}

@media (max-width:1280px) {
    .kinetic-topline {
        padding-right:165px;
        column-gap:22px;
    }

    .kinetic-work-label {
        font-size:7px;
        letter-spacing:.08em;
    }

    .kinetic-nav {
        gap:18px;
    }
}

/* =========================================================
   TOPLINE — GEOMETRY FIX
   Ursache: left/right aus absoluter Basisregel blieben
   bei späterem position:relative aktiv.
   ========================================================= */

.kinetic-topline {
    position:absolute;
    top:28px;
    left:3vw;
    right:3vw;
    width:auto;
    padding-right:190px;
    box-sizing:border-box;
}

.kinetic-work-label {
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    width:max-content;
    max-width:none;
    overflow:visible;
    white-space:nowrap;
}

@media (max-width:1280px) {
    .kinetic-topline {
        padding-right:165px;
    }
}

/* Topline Typografie exakt angleichen */
.kinetic-brand span,
.kinetic-nav a,
.kinetic-work-label {
    font-size:9px;
    line-height:1;
}

.kinetic-work-label {
    letter-spacing:.10em;
}

/* Mobile Topline final */
@media (max-width:900px) {
    .kinetic-work-label {
        display:none;
    }
}

/* =========================================================
   STICKY NAVIGATION
   erscheint erst nach dem Hero
   ========================================================= */

.kinetic-sticky-nav {
    position:fixed;
    z-index:9990;
    top:0;
    left:0;
    right:0;
    height:64px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;

    padding:0 3vw;

    background:rgba(21,21,21,.92);
    border-bottom:1px solid rgba(209,188,138,.22);

    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-100%);

    transition:
        transform 420ms cubic-bezier(.16,1,.3,1),
        opacity 240ms ease,
        visibility 240ms ease;
}

.kinetic-sticky-nav.is-visible {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
}

.kinetic-sticky-brand {
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--sand);
    text-decoration:none;
    white-space:nowrap;
}

.kinetic-sticky-brand img {
    display:block;
    width:36px;
    height:36px;
    object-fit:contain;
}

.kinetic-sticky-brand span {
    font-size:8px;
    font-weight:500;
    line-height:1;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.kinetic-sticky-links {
    display:flex;
    align-items:center;
    gap:27px;
}

.kinetic-sticky-links a {
    position:relative;
    color:rgba(255,255,255,.84);
    font-size:8px;
    font-weight:500;
    line-height:1;
    letter-spacing:.15em;
    text-decoration:none;
    text-transform:uppercase;
    white-space:nowrap;

    transition:color 180ms ease;
}

.kinetic-sticky-links a::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-8px;
    height:1px;

    background:var(--sand);

    transform:scaleX(0);
    transform-origin:right center;

    transition:transform 260ms cubic-bezier(.16,1,.3,1);
}

.kinetic-sticky-links a:hover,
.kinetic-sticky-links a:focus-visible {
    color:var(--sand);
}

.kinetic-sticky-links a:hover::after,
.kinetic-sticky-links a:focus-visible::after {
    transform:scaleX(1);
    transform-origin:left center;
}

#leistungen,
#ueber-mich,
#kontakt {
    scroll-margin-top:76px;
}

@media (max-width:700px) {
    .kinetic-sticky-nav {
        height:58px;
        padding:0 18px;
        gap:16px;
    }

    .kinetic-sticky-brand img {
        width:34px;
        height:34px;
    }

    .kinetic-sticky-brand span {
        display:none;
    }

    .kinetic-sticky-links {
        gap:15px;
    }

    .kinetic-sticky-links a {
        font-size:7px;
        letter-spacing:.08em;
    }

    #leistungen,
    #ueber-mich,
    #kontakt {
        scroll-margin-top:68px;
    }
}

@media (prefers-reduced-motion:reduce) {
    .kinetic-sticky-nav {
        transition:none;
    }
}

/* =========================================================
   STICKY NAV — ANKER EXAKT UNTER DER LEISTE
   ========================================================= */

#leistungen,
#ueber-mich,
#kontakt {
    scroll-margin-top:64px;
}

@media (max-width:700px) {
    #leistungen,
    #ueber-mich,
    #kontakt {
        scroll-margin-top:58px;
    }
}

/* =========================================================
   MOBILE HEADER — Logo und Navigation sauber trennen
   ========================================================= */

@media (max-width:700px) {
    .kinetic-topline {
        grid-template-columns:42px minmax(0,1fr);
        column-gap:18px;
        align-items:center;
    }

    .kinetic-brand {
        width:42px;
        height:42px;
        min-width:42px;
    }

    .kinetic-brand img {
        width:42px;
        height:42px;
        display:block;
    }

    .kinetic-brand span {
        display:none;
    }

    .kinetic-nav {
        min-width:0;
        justify-content:flex-end;
        gap:14px;
    }

    .kinetic-nav a {
        font-size:8px;
        letter-spacing:.08em;
    }
}

/* =========================================================
   MOBILE FLOATING CONTROLS
   ========================================================= */

@media (max-width:700px) {

    /* Chaty: 54px -> optisch ca. 46px */
    .chaty-widget {
        transform:scale(.85);
        transform-origin:right bottom;
    }

    /* CTA-Sprechblase auf Mobile nicht anzeigen */
    .chaty-widget .on-hover-text,
    .chaty-widget .chaty-tooltip::before,
    .chaty-widget .chaty-tooltip::after {
        display:none !important;
    }

    /* Back-to-top etwas zurückhaltender */
    .kinetic-backtotop {
        width:42px;
        height:42px;
    }

    .kinetic-backtotop svg {
        width:15px;
        height:15px;
    }
}

/* Mobile Back-to-top proportional zu Chaty */
@media (max-width:700px) {
    .kinetic-backtotop {
        width:40px;
        height:40px;
    }

    .kinetic-backtotop svg {
        width:14px;
        height:14px;
    }
}

/* =========================================================
   MOBILE SERVICES — kompaktere Leistungsfelder
   ========================================================= */

@media (max-width:700px) {
    .kinetic-service {
        min-height:34svh;
        padding:42px 24px 34px;
    }

    .kinetic-service > span {
        top:28px;
        left:24px;
    }

    .kinetic-service h3 {
        font-size:clamp(38px,10vw,46px);
        line-height:.94;
        letter-spacing:-.05em;
    }
}

/* =========================================================
   MOBILE DESIGN MIT HERZ — bewusster Zeilenfall
   ========================================================= */

@media (max-width:700px) {
    .kinetic-heart-head h2 {
        font-size:clamp(40px,10vw,44px);
        line-height:.96;
        letter-spacing:-.055em;
    }
}

/* =========================================================
   SMALL MOBILE — 390px / iPhone 12–14 Klasse
   ========================================================= */

@media (max-width:400px) {

    /* Hero-Kopf: Logo und Navigation sauber trennen */
    .kinetic-topline {
        grid-template-columns:36px minmax(0,1fr);
        column-gap:12px;
    }

    .kinetic-brand,
    .kinetic-brand img {
        width:36px;
        height:36px;
        min-width:36px;
    }

    .kinetic-nav {
        min-width:0;
        gap:10px;
    }

    .kinetic-nav a {
        font-size:7px;
        letter-spacing:.05em;
    }

    /* Support-Bereich darf Grid nicht verbreitern */
    .kinetic-support {
        grid-template-columns:minmax(0,1fr);
        width:100%;
        min-width:0;
    }

    .kinetic-support-head,
    .kinetic-support-list,
    .kinetic-support-item {
        width:100%;
        min-width:0;
        max-width:100%;
    }

    .kinetic-support-head h2,
    .kinetic-support-item h3,
    .kinetic-support-item p {
        min-width:0;
        max-width:100%;
    }
}

/* =========================================================
   SMALL MOBILE — lange aktive Projekttitel
   ========================================================= */

@media (max-width:400px) {
    .kinetic-project.is-active .kinetic-name {
        font-size:clamp(34px,9.2vw,38px);
        letter-spacing:-.045em;
    }
}

/* Testimonial — kein zusätzliches dekoratives Anführungszeichen */
.kinetic-proof-card blockquote::before {
    display:none;
}

/* =========================================================
   TABLET PORTRAIT — Leistungen kompakter
   ========================================================= */

@media (min-width:701px) and (max-width:900px) {
    .kinetic-service {
        min-height:36svh;
        padding:46px 32px 40px;
        row-gap:36px;
    }

    .kinetic-service h3 {
        font-size:clamp(46px,6.5vw,58px);
    }
}

/* =========================================================
   TABLET PORTRAIT — Über mich
   ========================================================= */

@media (min-width:701px) and (max-width:900px) {
    .kinetic-about-content {
        padding:90px 48px;
    }

    .kinetic-about-copy,
    .kinetic-about-points {
        max-width:620px;
    }

    .kinetic-about-meta {
        max-width:620px;
    }
}

/* Tablet — Luft für Umlaute in großer About-Headline */
@media (min-width:701px) and (max-width:900px) {
    .kinetic-about-content h2 {
        line-height:1.04;
    }
}

/* =========================================================
   MUENCHEN HERO — TEST
   ========================================================= */

.kinetic-munich-hero {
    position:relative;
    min-height:100svh;
    overflow:hidden;
    background:#101113;
    color:#fff;
}

.kinetic-munich-bg {
    position:absolute;
    inset:-3%;
    background:
        url("/wp-content/uploads/2026/09/ChatGPT-Image-6.-Sept.-2026-19_58_42.png")
        center center / cover no-repeat;
    transform:scale(1.02);
    animation:kineticMunichMove 18s cubic-bezier(.22,.61,.36,1) forwards;
    will-change:transform;
}

.kinetic-munich-overlay {
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            rgba(7,10,16,.48) 0%,
            rgba(7,10,16,.20) 42%,
            rgba(7,10,16,.62) 100%
        );
}

.kinetic-munich-topline {
    position:absolute;
    z-index:5;
    top:0;
    left:0;
    right:0;
    padding:28px 5vw;
}

.kinetic-munich-content {
    position:relative;
    z-index:3;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:100svh;
    width:min(1050px,82vw);
    padding:120px 5vw 100px;
}

.kinetic-munich-kicker {
    margin-bottom:34px;
    color:var(--sand);
    font-size:10px;
    font-weight:500;
    letter-spacing:.22em;
}

.kinetic-munich-content h1 {
    margin:0;
    max-width:1000px;
    font-size:clamp(64px,8vw,150px);
    font-weight:500;
    line-height:.84;
    letter-spacing:-.065em;
}

.kinetic-munich-content p {
    max-width:610px;
    margin:42px 0 0;
    color:rgba(255,255,255,.88);
    font-size:19px;
    line-height:1.6;
}

.kinetic-munich-scroll {
    position:absolute;
    z-index:4;
    left:5vw;
    bottom:34px;
    display:flex;
    gap:14px;
    align-items:center;
    color:#fff;
    font-size:9px;
    font-weight:500;
    letter-spacing:.2em;
    text-decoration:none;
}

@keyframes kineticMunichMove {
    from {
        transform:scale(1.02) translate3d(0,0,0);
    }

    to {
        transform:scale(1.075) translate3d(-1.2%,.5%,0);
    }
}

@media (max-width:900px) {
    .kinetic-munich-content {
        width:100%;
        padding:120px 24px 90px;
    }

    .kinetic-munich-content h1 {
        font-size:clamp(48px,12vw,82px);
        line-height:.90;
    }

    .kinetic-munich-content p {
        max-width:520px;
        margin-top:30px;
        font-size:17px;
    }

    .kinetic-munich-topline {
        padding:22px 24px;
    }

    .kinetic-munich-scroll {
        left:24px;
        bottom:26px;
    }
}

@media (prefers-reduced-motion:reduce) {
    .kinetic-munich-bg {
        animation:none;
        transform:scale(1.03);
    }
}

/* =========================================================
   FLOW NACH NEUEM MUENCHEN-HERO
   Alter Projekt-Hero bleibt erhalten, liegt aber im Seitenfluss
   ========================================================= */

.kinetic::before {
    display:none;
    height:0;
}

.kinetic-stage {
    position:relative;
    inset:auto;
    width:100%;
    height:100svh;
}

/* =========================================================
   MUENCHEN HERO — VISUAL FINETUNING
   ========================================================= */

.kinetic-munich-bg {
    inset:-5%;
    transform:scale(1.035) translate3d(-1%,.4%,0);
    animation:kineticMunichCamera 15s ease-in-out infinite alternate;
}

.kinetic-munich-content h1 {
    color:#F3EFE7;
    line-height:.94;
    letter-spacing:-.055em;
}

.kinetic-munich-content p {
    color:rgba(243,239,231,.90);
}

.kinetic-munich-kicker {
    color:var(--sand);
}

.kinetic-munich-kicker,
.kinetic-munich-content h1,
.kinetic-munich-content p,
.kinetic-munich-scroll {
    opacity:0;
    transform:translateY(24px);
    animation:kineticMunichTextIn 900ms cubic-bezier(.16,1,.3,1) forwards;
}

.kinetic-munich-kicker {
    animation-delay:180ms;
}

.kinetic-munich-content h1 {
    animation-delay:320ms;
}

.kinetic-munich-content p {
    animation-delay:520ms;
}

.kinetic-munich-scroll {
    animation-delay:720ms;
}

@keyframes kineticMunichCamera {
    from {
        transform:scale(1.035) translate3d(-1%,.4%,0);
    }

    to {
        transform:scale(1.105) translate3d(1.4%,-.7%,0);
    }
}

@keyframes kineticMunichTextIn {
    to {
        opacity:1;
        transform:translateY(0);
    }
}

@media (max-width:900px) {
    .kinetic-munich-content h1 {
        line-height:.98;
    }
}

@media (prefers-reduced-motion:reduce) {
    .kinetic-munich-bg {
        animation:none;
        transform:scale(1.04);
    }

    .kinetic-munich-kicker,
    .kinetic-munich-content h1,
    .kinetic-munich-content p,
    .kinetic-munich-scroll {
        opacity:1;
        transform:none;
        animation:none;
    }
}

/* =========================================================
   MUNICH HERO — COLOR TUNING
   ========================================================= */

.kinetic-munich-hero h1 {
    color:#F3EFE7;
    text-shadow:0 2px 18px rgba(0,0,0,.22);
}

.kinetic-munich-hero p {
    color:rgba(243,239,231,.90);
    text-shadow:0 1px 10px rgba(0,0,0,.18);
}

.kinetic-munich-hero .kinetic-scroll-note,
.kinetic-munich-hero .kinetic-munich-kicker,
.kinetic-munich-hero .kinetic-munich-eyebrow,
.kinetic-munich-hero .kinetic-munich-label {
    color:#D1BC8A;
}

/* =========================================================
   FOOTER LOGO — ohne goldenen/beigen Ring
   ========================================================= */

.kinetic-footer-brand img {
    padding:0;
    background:transparent;
    object-fit:contain;
}


/* =========================================================
   ABOUT — EXPANDED EDITORIAL VERSION
   ========================================================= */

/* Langer About-Text soll oben beginnen, nicht vertikal zentriert */
.kinetic-about-content {
    justify-content:flex-start;
}

/* Zusätzliche Geschichte */
.kinetic-about-story {
    width:100%;
    max-width:720px;
    margin-top:44px;
}

.kinetic-about-story-block {
    position:relative;
    padding:28px 0 30px;
    border-top:1px solid rgba(21,21,21,.16);
}

.kinetic-about-story-block > span {
    display:block;
    margin-bottom:15px;
    color:var(--blue);
    font-size:9px;
    font-weight:500;
    line-height:1.2;
    letter-spacing:.20em;
    text-transform:uppercase;
}

.kinetic-about-story-block p {
    max-width:680px;
    margin:0;
    font-size:15px;
    line-height:1.62;
    color:rgba(21,21,21,.88);
}

.kinetic-about-story-block p + p {
    margin-top:18px;
}

/* Bestehende Liste etwas klarer vom Langtext absetzen */
.kinetic-about-points {
    margin-top:34px;
}

/* Dezente Einblendung der neuen Story */
.kinetic-about-story {
    opacity:0;
    transform:translateY(18px);
}

.kinetic-about.is-visible .kinetic-about-story {
    opacity:1;
    transform:none;
    transition:
        opacity 700ms ease 280ms,
        transform 900ms cubic-bezier(.16,1,.3,1) 280ms;
}


/* =========================================================
   ABOUT — STICKY PORTRAIT DESKTOP
   ========================================================= */

@media (min-width:901px) {
    .kinetic-about {
        align-items:start;
    }

    .kinetic-about-portrait {
        position:sticky;
        top:0;
        align-self:start;
        height:100svh;
    }

    .kinetic-about-content {
        min-height:100svh;
        padding-top:7vw;
        padding-bottom:7vw;
    }
}


/* =========================================================
   ABOUT — TABLET
   ========================================================= */

@media (min-width:701px) and (max-width:900px) {
    .kinetic-about-story {
        max-width:620px;
        margin-top:38px;
    }

    .kinetic-about-story-block {
        padding:24px 0 26px;
    }

    .kinetic-about-story-block p {
        max-width:620px;
        font-size:15px;
        line-height:1.62;
    }
}


/* =========================================================
   ABOUT — MOBILE
   ========================================================= */

@media (max-width:700px) {
    .kinetic-about-story {
        margin-top:34px;
    }

    .kinetic-about-story-block {
        padding:22px 0 24px;
    }

    .kinetic-about-story-block > span {
        margin-bottom:12px;
    }

    .kinetic-about-story-block p {
        font-size:15px;
        line-height:1.58;
    }

    .kinetic-about-points {
        margin-top:28px;
    }
}


/* Reduced Motion */
@media (prefers-reduced-motion:reduce) {
    .kinetic-about-story {
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }
}


/* =========================================================
   ABOUT — INTERACTIVE POINTS
   ========================================================= */

.kinetic-about-points {
    width:100%;
    max-width:720px;
    margin-top:34px;
    padding:0;
    border-top:1px solid rgba(21,21,21,.16);
}

.kinetic-about-point {
    border-bottom:1px solid rgba(21,21,21,.16);
    transition:
        background 280ms ease,
        transform 280ms cubic-bezier(.16,1,.3,1);
}

.kinetic-about-point summary {
    position:relative;
    display:block;
    padding:16px 44px 16px 28px;
    cursor:pointer;
    list-style:none;
    font-size:14px;
    line-height:1.4;
    transition:
        padding 280ms cubic-bezier(.16,1,.3,1),
        font-size 280ms cubic-bezier(.16,1,.3,1);
}

.kinetic-about-point summary::-webkit-details-marker {
    display:none;
}

.kinetic-about-point summary::before {
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:10px;
    height:1px;
    background:var(--blue);
    transform:translateY(-50%);
}

.kinetic-about-point summary::after {
    content:"+";
    position:absolute;
    right:4px;
    top:50%;
    color:var(--blue);
    font-size:18px;
    font-weight:400;
    transform:translateY(-50%);
    transition:transform 280ms ease;
}

.kinetic-about-point[open] summary::after {
    transform:translateY(-50%) rotate(45deg);
}

.kinetic-about-point-body {
    padding:0 44px 20px 28px;
}

.kinetic-about-point-body p {
    max-width:590px;
    margin:0;
    color:rgba(21,21,21,.72);
    font-size:13px;
    line-height:1.6;
}

.kinetic-about-point:hover,
.kinetic-about-point:focus-within,
.kinetic-about-point[open] {
    background:rgba(209,188,138,.11);
}

@media (hover:hover) and (pointer:fine) {
    .kinetic-about-point:hover summary {
        padding-top:19px;
        padding-bottom:19px;
        font-size:15px;
    }

    .kinetic-about-point:not([open]):hover > .kinetic-about-point-body {
        display:block;
        animation:kineticAboutPointIn 300ms ease both;
    }
}

@keyframes kineticAboutPointIn {
    from {
        opacity:0;
        transform:translateY(-4px);
    }

    to {
        opacity:1;
        transform:none;
    }
}

@media (max-width:700px) {
    .kinetic-about-point summary {
        padding:15px 38px 15px 24px;
    }

    .kinetic-about-point-body {
        padding:0 32px 18px 24px;
    }
}

@media (prefers-reduced-motion:reduce) {
    .kinetic-about-point,
    .kinetic-about-point summary,
    .kinetic-about-point-body {
        transition:none !important;
        animation:none !important;
    }
}


/* =========================================================
   ABOUT — KEIN SCROLL-SPRUNG BEIM AUFKLAPPEN
   ========================================================= */

.kinetic-about,
.kinetic-about-content,
.kinetic-about-points,
.kinetic-about-point {
    overflow-anchor:none;
}

@media (min-width:901px) {
    .kinetic-about-portrait {
        top:0;
    }
}


/* =========================================================
   DECORATIVE NUMBERS REMOVED
   ========================================================= */

/* Leistungen */
.kinetic-service {
    grid-template-rows:auto 1fr;
    row-gap:0;
}

.kinetic-service h3 {
    margin-top:clamp(20px,2.5vw,44px);
}


/* Design mit Herz */
.kinetic-heart-item {
    grid-template-columns:38% 62%;
}

.kinetic-heart-item h3 {
    grid-column:1;
}

.kinetic-heart-item p {
    grid-column:2;
}


/* Wie ich dich unterstützen kann */
.kinetic-support-item h3 {
    margin-top:0;
}


/* Mobile / Tablet */
@media (max-width:900px) {
    .kinetic-heart-item {
        grid-template-columns:1fr;
    }

    .kinetic-heart-item h3,
    .kinetic-heart-item p {
        grid-column:1;
    }
}


/* =========================================================
   HEART + SUPPORT — QUIET EDITORIAL MOTION
   ========================================================= */

/* Überschriften */
.kinetic-light-motion-ready .kinetic-heart-head > span,
.kinetic-light-motion-ready .kinetic-heart-head h2,
.kinetic-light-motion-ready .kinetic-heart-head p,
.kinetic-light-motion-ready .kinetic-support-head > span,
.kinetic-light-motion-ready .kinetic-support-head h2 {
    opacity:0;
    transform:translateY(22px);
}

/* Einzelne Inhalte */
.kinetic-light-motion-ready .kinetic-heart-item h3,
.kinetic-light-motion-ready .kinetic-heart-item p,
.kinetic-light-motion-ready .kinetic-support-item h3,
.kinetic-light-motion-ready .kinetic-support-item p {
    opacity:0;
    transform:translateY(18px);
}


/* DESIGN MIT HERZ — Header */
.kinetic-heart-head.is-revealed > span {
    opacity:1;
    transform:none;
    transition:
        opacity 550ms ease,
        transform 750ms cubic-bezier(.16,1,.3,1);
}

.kinetic-heart-head.is-revealed h2 {
    opacity:1;
    transform:none;
    transition:
        opacity 700ms ease 100ms,
        transform 900ms cubic-bezier(.16,1,.3,1) 100ms;
}

.kinetic-heart-head.is-revealed p {
    opacity:1;
    transform:none;
    transition:
        opacity 650ms ease 240ms,
        transform 850ms cubic-bezier(.16,1,.3,1) 240ms;
}


/* DESIGN MIT HERZ — Zeilen */
.kinetic-heart-item.is-revealed h3 {
    opacity:1;
    transform:none;
    transition:
        opacity 650ms ease,
        transform 850ms cubic-bezier(.16,1,.3,1);
}

.kinetic-heart-item.is-revealed p {
    opacity:1;
    transform:none;
    transition:
        opacity 650ms ease 130ms,
        transform 850ms cubic-bezier(.16,1,.3,1) 130ms;
}


/* SUPPORT — Header */
.kinetic-support-head.is-revealed > span {
    opacity:1;
    transform:none;
    transition:
        opacity 550ms ease,
        transform 750ms cubic-bezier(.16,1,.3,1);
}

.kinetic-support-head.is-revealed h2 {
    opacity:1;
    transform:none;
    transition:
        opacity 700ms ease 110ms,
        transform 900ms cubic-bezier(.16,1,.3,1) 110ms;
}


/* SUPPORT — einzelne Felder */
.kinetic-support-item.is-revealed h3 {
    opacity:1;
    transform:none;
    transition:
        opacity 650ms ease,
        transform 850ms cubic-bezier(.16,1,.3,1);
}

.kinetic-support-item.is-revealed p {
    opacity:1;
    transform:none;
    transition:
        opacity 650ms ease 140ms,
        transform 850ms cubic-bezier(.16,1,.3,1) 140ms;
}


/* Keine Bewegung bei reduzierter Bewegung */
@media (prefers-reduced-motion:reduce) {
    .kinetic-heart-head > span,
    .kinetic-heart-head h2,
    .kinetic-heart-head p,
    .kinetic-heart-item h3,
    .kinetic-heart-item p,
    .kinetic-support-head > span,
    .kinetic-support-head h2,
    .kinetic-support-item h3,
    .kinetic-support-item p {
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }
}


/* =========================================================
   HEART + SUPPORT — MOTION TUNING
   ========================================================= */

.kinetic-light-motion-ready .kinetic-heart-head > span,
.kinetic-light-motion-ready .kinetic-heart-head h2,
.kinetic-light-motion-ready .kinetic-support-head > span,
.kinetic-light-motion-ready .kinetic-support-head h2 {
    transform:translateY(46px);
}

.kinetic-light-motion-ready .kinetic-heart-head p {
    transform:translateY(30px);
}

.kinetic-light-motion-ready .kinetic-heart-item h3,
.kinetic-light-motion-ready .kinetic-heart-item p,
.kinetic-light-motion-ready .kinetic-support-item h3,
.kinetic-light-motion-ready .kinetic-support-item p {
    transform:translateY(30px);
}

.kinetic-heart-head.is-revealed h2,
.kinetic-support-head.is-revealed h2 {
    transition-duration:800ms,1050ms;
}

.kinetic-heart-item.is-revealed h3,
.kinetic-support-item.is-revealed h3 {
    transition-duration:700ms,950ms;
}

.kinetic-heart-item.is-revealed p,
.kinetic-support-item.is-revealed p {
    transition-duration:700ms,950ms;
}


/* =========================================================
   PROJECT CASE — INDIVIDUAL IMAGE POSITION
   ========================================================= */

.kinetic-case::after {
    background-position:var(--case-position, center);
}


/* =========================================================
   PROJECTS — FINAL TABLET / MOBILE RESPONSIVE
   ========================================================= */

/* Tablet einschließlich iPad Pro 1024 */
@media (max-width:1100px) {

    /* Projektübersicht ruhiger machen */
    .kinetic-stage::after {
        background:
            linear-gradient(
                0deg,
                rgba(10,10,11,.94) 0%,
                rgba(10,10,11,.74) 58%,
                rgba(10,10,11,.34) 100%
            );
    }

    .kinetic-project.is-active .kinetic-name {
        font-size:clamp(40px,6.2vw,64px);
    }


    /* Case nicht mehr als enge Desktop-Zweispalte */
    .kinetic-case::before {
        display:none;
    }

    .kinetic-case::after {
        top:46%;
        right:0;
        width:100%;
        height:54%;

        background-size:
            var(--case-mobile-size, cover);

        background-position:
            var(--case-mobile-position, center);

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

    .kinetic-case-label {
        top:42px;
        left:5vw;
    }

    .kinetic-case-title {
        left:5vw;
        top:15vh;
        bottom:auto;
        width:90vw;

        font-size:
            clamp(52px,8.5vw,92px);
    }

    .kinetic-case-copy {
        left:5vw;
        top:35vh;
        bottom:auto;
    }
}


/* Smartphones */
@media (max-width:700px) {

    .kinetic-stage::after {
        background:
            linear-gradient(
                0deg,
                rgba(10,10,11,.97) 0%,
                rgba(10,10,11,.82) 62%,
                rgba(10,10,11,.48) 100%
            );
    }

    .kinetic-index {
        left:20px;
        right:20px;
        bottom:62px;
    }

    .kinetic-project {
        min-height:44px;
        padding:6px 0 7px;
    }

    .kinetic-project.is-active {
        min-height:78px;
    }

    .kinetic-name {
        font-size:clamp(17px,5.2vw,22px);
    }

    .kinetic-project.is-active .kinetic-name {
        font-size:clamp(34px,9vw,42px);
        line-height:.94;
    }


    /* Case auf Mobil kompakter */
    .kinetic-case {
        min-height:clamp(720px,88svh,820px);
    }

    .kinetic-case-label {
        top:36px;
        left:24px;
    }

    .kinetic-case-title {
        left:24px;
        top:15vh;
        width:calc(100% - 48px);

        font-size:clamp(48px,13vw,62px);
        line-height:.88;
    }

    .kinetic-case-copy {
        left:24px;
        top:35vh;
    }

    .kinetic-case::after {
        top:auto;
        bottom:0;
        width:100%;
        height:56vw;

        background-size:
            var(--case-mobile-size, cover);

        background-position:
            var(--case-mobile-position, center);

        background-repeat:no-repeat;
    }
}


/* =========================================================
   PROJECT CASE — FINAL TABLET BALANCE
   701–1100 px
   ========================================================= */

@media (min-width:701px) and (max-width:1100px) {

    .kinetic-case {
        min-height:0;
        height:calc(390px + 50vw);
    }

    .kinetic-case-label {
        top:42px;
        left:5vw;
    }

    .kinetic-case-title {
        top:135px;
        left:5vw;
        width:90vw;
        font-size:clamp(58px,8vw,88px);
        line-height:.88;
    }

    .kinetic-case-copy {
        top:300px;
        left:5vw;
    }

    .kinetic-case::after {
        top:auto;
        bottom:0;
        width:100%;
        height:50vw;
        max-height:550px;

        background-size:
            var(--case-mobile-size, cover);

        background-position:
            var(--case-mobile-position, center top);

        background-repeat:no-repeat;
    }
}


/* =========================================================
   MUENCHEN HERO — VIDEO COMPARISON VERSION
   ========================================================= */

.kinetic-video-version .kinetic-munich-video {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    pointer-events:none;
}

.kinetic-video-version .kinetic-munich-bg {
    animation:none;
    transform:none;
}

/* Bei gewünschter reduzierter Bewegung statisches Münchenbild */
@media (prefers-reduced-motion:reduce) {
    .kinetic-video-version .kinetic-munich-video {
        display:none;
    }
}


/* =========================================================
   PORTFOLIO VERSION — BEWERBUNG / SELECTED WORK
   ========================================================= */

.kinetic-portfolio-version .kinetic-portfolio {
    width:100%;
    background:var(--cream);
    color:var(--ink);
}

.kinetic-portfolio-version .kinetic-portfolio-intro {
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    min-height:76svh;
    padding:8vw 5vw;
    background:#111;
    color:#fff;
}

.kinetic-portfolio-version .kinetic-portfolio-intro > span {
    margin-bottom:42px;
    color:var(--sand);
    font-size:10px;
    font-weight:500;
    letter-spacing:.20em;
}

.kinetic-portfolio-version .kinetic-portfolio-intro h2 {
    max-width:1200px;
    margin:0;
    font-size:clamp(64px,8vw,150px);
    font-weight:500;
    line-height:.84;
    letter-spacing:-.06em;
}


.kinetic-portfolio-version .kinetic-portfolio-item {
    display:grid;
    grid-template-columns:34% 66%;
    align-items:center;
    min-height:88svh;
    padding:5vw;
    border-bottom:1px solid rgba(21,21,21,.16);
}

.kinetic-portfolio-version .kinetic-portfolio-item:nth-child(odd) {
    background:#f2eee5;
}

.kinetic-portfolio-version .kinetic-portfolio-text {
    padding-right:5vw;
}

.kinetic-portfolio-version .kinetic-portfolio-text > span {
    display:block;
    margin-bottom:34px;
    color:var(--ink);
    font-size:9px;
    font-weight:500;
    letter-spacing:.19em;
}

.kinetic-portfolio-version .kinetic-portfolio-text h3 {
    margin:0;
    font-size:clamp(52px,5vw,96px);
    font-weight:500;
    line-height:.86;
    letter-spacing:-.06em;
}

.kinetic-portfolio-version .kinetic-portfolio-text p {
    max-width:430px;
    margin:34px 0 0;
    color:rgba(21,21,21,.70);
    font-size:15px;
    line-height:1.6;
}

.kinetic-portfolio-version .kinetic-portfolio-media {
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    padding:2vw;
    background:rgba(255,255,255,.58);
    overflow:hidden;
}

.kinetic-portfolio-version .kinetic-portfolio-media img {
    display:block;
    width:100%;
    height:auto;
    max-height:76svh;
    object-fit:contain;
}


@media (min-width:901px) {
    .kinetic-portfolio-version
    .kinetic-portfolio-item:nth-of-type(even)
    .kinetic-portfolio-text {
        order:2;
        padding-right:0;
        padding-left:5vw;
    }

    .kinetic-portfolio-version
    .kinetic-portfolio-item:nth-of-type(even)
    .kinetic-portfolio-media {
        order:1;
    }
}


@media (max-width:900px) {
    .kinetic-portfolio-version .kinetic-portfolio-intro {
        min-height:64svh;
        padding:80px 24px 60px;
    }

    .kinetic-portfolio-version .kinetic-portfolio-intro h2 {
        font-size:clamp(50px,11vw,82px);
        line-height:.9;
    }

    .kinetic-portfolio-version .kinetic-portfolio-item {
        grid-template-columns:1fr;
        min-height:0;
        padding:68px 24px;
        row-gap:42px;
    }

    .kinetic-portfolio-version .kinetic-portfolio-text {
        padding:0;
    }

    .kinetic-portfolio-version .kinetic-portfolio-text h3 {
        font-size:clamp(46px,10vw,72px);
    }

    .kinetic-portfolio-version .kinetic-portfolio-text p {
        margin-top:24px;
    }

    .kinetic-portfolio-version .kinetic-portfolio-media {
        padding:12px;
    }

    .kinetic-portfolio-version .kinetic-portfolio-media img {
        max-height:none;
    }
}


/* =========================================================
   AUTO HERO — TAG / NACHT
   ========================================================= */

.kinetic-auto-hero .kinetic-munich-video {
    opacity:0;
    transition:opacity 900ms ease;
}

.kinetic-auto-hero.is-night .kinetic-munich-video {
    opacity:1;
}

.kinetic-auto-hero.is-day .kinetic-munich-video {
    opacity:0;
}

.kinetic-auto-hero.is-day .kinetic-munich-bg {
    animation:
        kineticAutoHeroDay
        18s
        cubic-bezier(.22,.61,.36,1)
        infinite
        alternate;
}

@keyframes kineticAutoHeroDay {
    from {
        transform:scale(1.035) translate3d(-1%,.4%,0);
    }

    to {
        transform:scale(1.09) translate3d(1%,-.5%,0);
    }
}

@media (prefers-reduced-motion:reduce) {
    .kinetic-auto-hero .kinetic-munich-video {
        display:none;
    }

    .kinetic-auto-hero.is-day .kinetic-munich-bg {
        animation:none !important;
    }
}


/* =========================================================
   PORTFOLIO VERSION — SMALL LABEL COLOR SYSTEM
   Hell / Beige = Schwarz
   ========================================================= */

.kinetic-portfolio-version .kinetic-about-kicker,
.kinetic-portfolio-version .kinetic-about-story-block > span,
.kinetic-portfolio-version .kinetic-heart-head > span,
.kinetic-portfolio-version .kinetic-support-head > span,
.kinetic-portfolio-version .kinetic-proof-card-head > span,
.kinetic-portfolio-version .kinetic-portfolio-text > span {
    color:var(--ink);
}


/* Dunkle Flächen = Sand */
.kinetic-portfolio-version .kinetic-services-intro > span,
.kinetic-portfolio-version .kinetic-portfolio-intro > span,
.kinetic-portfolio-version .kinetic-munich-kicker {
    color:var(--sand);
}


.kinetic-portfolio-version .kinetic-about-meta {
    color:var(--ink);
}


/* =========================================================
   PORTFOLIO VERSION — CONTACT SMALL LABELS
   ========================================================= */

.kinetic-portfolio-version .kinetic-contact-label,
.kinetic-portfolio-version .kinetic-contact-info > span,
.kinetic-portfolio-version .kinetic-contact-form > span {
    color:var(--ink);
}


/* =========================================================
   PORTFOLIO VERSION — CONTACT LABELS FINAL
   ========================================================= */

.kinetic-portfolio-version .kinetic-hours > span,
.kinetic-portfolio-version .kinetic-form-head > span {
    color:var(--ink);
}


/* =========================================================
   PORTFOLIO VERSION — DeSIGN STORY
   ========================================================= */

.kinetic-portfolio-version .kinetic-sign-story {
    display:grid;
    grid-template-columns:46% 54%;
    min-height:88svh;
    background:#111;
    color:#fff;
    border-top:1px solid rgba(255,255,255,.12);
    border-bottom:1px solid rgba(255,255,255,.12);
}

.kinetic-portfolio-version .kinetic-sign-story-name,
.kinetic-portfolio-version .kinetic-sign-story-copy {
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:6vw;
}

.kinetic-portfolio-version .kinetic-sign-story-name {
    border-right:1px solid rgba(255,255,255,.16);
}

.kinetic-portfolio-version .kinetic-sign-story-logo {
    display:block;
    width:88px;
    height:88px;
    margin:0 0 7vh;
    object-fit:contain;
}

.kinetic-portfolio-version .kinetic-sign-story-name > span,
.kinetic-portfolio-version .kinetic-sign-story-copy > span {
    color:var(--sand);
    font-size:10px;
    font-weight:500;
    line-height:1;
    letter-spacing:.22em;
    text-transform:uppercase;
}


.kinetic-portfolio-version .kinetic-sign-story-name strong {
    display:block;
    margin-top:28px;
    color:#fff;
    font-size:clamp(62px,5.6vw,108px);
    font-weight:500;
    line-height:.86;
    letter-spacing:-.065em;
    white-space:nowrap;
}

.kinetic-portfolio-version
.kinetic-sign-story-name strong > span {
    color:var(--sand);
}

.kinetic-portfolio-version .kinetic-sign-story-copy h2 {
    margin:42px 0 0;
    color:#fff;
    font-size:clamp(70px,6vw,118px);
    font-weight:500;
    line-height:.84;
    letter-spacing:-.06em;
}

.kinetic-portfolio-version .kinetic-sign-story-copy p {
    max-width:620px;
    margin:7vh 0 0;
    padding-top:28px;
    border-top:1px solid rgba(255,255,255,.18);
    color:rgba(255,255,255,.76);
    font-size:17px;
    line-height:1.65;
}


@media (max-width:900px) {
    .kinetic-portfolio-version .kinetic-sign-story {
        grid-template-columns:1fr;
        min-height:0;
    }

    .kinetic-portfolio-version .kinetic-sign-story-name,
    .kinetic-portfolio-version .kinetic-sign-story-copy {
        padding:72px 24px;
    }

    .kinetic-portfolio-version .kinetic-sign-story-name {
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.16);
    }

    .kinetic-portfolio-version .kinetic-sign-story-logo {
        width:70px;
        height:70px;
        margin-bottom:54px;
    }

    .kinetic-portfolio-version .kinetic-sign-story-name strong {
        font-size:clamp(46px,12vw,82px);
        white-space:normal;
    }

    .kinetic-portfolio-version .kinetic-sign-story-copy h2 {
        font-size:clamp(54px,13vw,86px);
    }

    .kinetic-portfolio-version .kinetic-sign-story-copy p {
        margin-top:48px;
    }
}


/* =========================================================
   PORTFOLIO VERSION — LARGE TABLET / IPAD PRO
   901–1100px
   ========================================================= */

@media (min-width:901px) and (max-width:1100px) {

    .kinetic-portfolio-version .kinetic-portfolio-intro {
        min-height:64svh;
        padding:80px 40px 70px;
    }

    .kinetic-portfolio-version .kinetic-portfolio-intro h2 {
        max-width:820px;
        font-size:clamp(58px,8.2vw,86px);
        line-height:.89;
    }

    .kinetic-portfolio-version .kinetic-portfolio-item {
        grid-template-columns:1fr;
        min-height:0;
        padding:72px 40px;
        row-gap:48px;
    }

    .kinetic-portfolio-version .kinetic-portfolio-text {
        order:1;
        padding:0;
    }

    .kinetic-portfolio-version .kinetic-portfolio-media {
        order:2;
        padding:16px;
    }

    .kinetic-portfolio-version
    .kinetic-portfolio-item:nth-of-type(even)
    .kinetic-portfolio-text {
        order:1;
        padding:0;
    }

    .kinetic-portfolio-version
    .kinetic-portfolio-item:nth-of-type(even)
    .kinetic-portfolio-media {
        order:2;
    }

    .kinetic-portfolio-version .kinetic-portfolio-text h3 {
        font-size:clamp(54px,7vw,76px);
    }

    .kinetic-portfolio-version .kinetic-portfolio-text p {
        max-width:560px;
        margin-top:24px;
        font-size:16px;
    }

    .kinetic-portfolio-version .kinetic-portfolio-media img {
        max-height:none;
    }
}


/* =========================================================
   DeSIGN STORY — LARGE TABLET / IPAD PRO
   901–1100px
   ========================================================= */

@media (min-width:901px) and (max-width:1100px) {

    .kinetic-portfolio-version .kinetic-sign-story {
        grid-template-columns:1fr;
        min-height:0;
    }

    .kinetic-portfolio-version .kinetic-sign-story-name,
    .kinetic-portfolio-version .kinetic-sign-story-copy {
        padding:88px 40px;
    }

    .kinetic-portfolio-version .kinetic-sign-story-name {
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.16);
    }

    .kinetic-portfolio-version .kinetic-sign-story-logo {
        width:78px;
        height:78px;
        margin-bottom:58px;
    }

    .kinetic-portfolio-version .kinetic-sign-story-name strong {
        font-size:clamp(66px,8vw,84px);
        white-space:normal;
    }

    .kinetic-portfolio-version .kinetic-sign-story-copy h2 {
        max-width:760px;
        font-size:clamp(70px,8.5vw,92px);
    }

    .kinetic-portfolio-version .kinetic-sign-story-copy p {
        max-width:650px;
        margin-top:52px;
    }
}


/* =========================================================
   DeSIGN STORY — S + SIGN ACCENT
   ========================================================= */

.kinetic-portfolio-version .kinetic-sign-story-copy h2
.kinetic-sign-accent {
    color:var(--sand);
}


/* =========================================================
   PORTFOLIO — HORIZONTAL PROJECT SLIDER
   ========================================================= */

.kinetic-portfolio-version .kinetic-portfolio-slider {
    position:relative;
    padding:72px 0 52px;
    overflow:hidden;
    background:var(--cream);
}

.kinetic-portfolio-version .kinetic-portfolio-track {
    display:flex;
    gap:24px;
    width:100%;
    padding:0 5vw;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}

.kinetic-portfolio-version .kinetic-portfolio-track::-webkit-scrollbar {
    display:none;
}

.kinetic-portfolio-version .kinetic-portfolio-slider
.kinetic-portfolio-item {
    flex:0 0 84vw;
    grid-template-columns:34% 66%;
    min-height:72svh;
    padding:4vw;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    background:#f7f4ee;
    border:1px solid rgba(21,21,21,.13);
}

.kinetic-portfolio-version .kinetic-portfolio-slider
.kinetic-portfolio-item:nth-child(odd) {
    background:#f2eee5;
}

.kinetic-portfolio-version .kinetic-portfolio-slider
.kinetic-portfolio-media {
    min-height:0;
    background:rgba(255,255,255,.62);
}

.kinetic-portfolio-version .kinetic-portfolio-slider
.kinetic-portfolio-media img {
    width:100%;
    max-height:62svh;
    object-fit:contain;
}


.kinetic-portfolio-version .kinetic-portfolio-slider
.kinetic-portfolio-item .kinetic-portfolio-text {
    order:1;
    padding-right:4vw;
    padding-left:0;
}

.kinetic-portfolio-version .kinetic-portfolio-slider
.kinetic-portfolio-item .kinetic-portfolio-media {
    order:2;
}

.kinetic-portfolio-version .kinetic-portfolio-controls {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:32px 5vw 0;
}

.kinetic-portfolio-version .kinetic-portfolio-counter {
    display:flex;
    gap:8px;
    font-size:10px;
    font-weight:500;
    letter-spacing:.18em;
}

.kinetic-portfolio-version .kinetic-portfolio-arrows {
    display:flex;
    gap:10px;
}

.kinetic-portfolio-version .kinetic-portfolio-arrows button {
    display:grid;
    place-items:center;
    width:54px;
    height:54px;
    padding:0;
    border:1px solid rgba(21,21,21,.25);
    border-radius:50%;
    background:transparent;
    color:var(--ink);
    font:inherit;
    font-size:20px;
    cursor:pointer;
    transition:
        background 180ms ease,
        color 180ms ease,
        opacity 180ms ease;
}

.kinetic-portfolio-version .kinetic-portfolio-arrows button:hover {
    background:var(--ink);
    color:#fff;
}

.kinetic-portfolio-version .kinetic-portfolio-arrows button:disabled {
    opacity:.28;
    cursor:default;
}


@media (max-width:1100px) {
    .kinetic-portfolio-version .kinetic-portfolio-slider {
        padding-top:48px;
    }

    .kinetic-portfolio-version .kinetic-portfolio-track {
        gap:18px;
        padding:0 24px;
    }

    .kinetic-portfolio-version .kinetic-portfolio-slider
    .kinetic-portfolio-item {
        flex-basis:88vw;
        grid-template-columns:1fr;
        min-height:0;
        padding:48px 32px;
        row-gap:38px;
    }

    .kinetic-portfolio-version .kinetic-portfolio-slider
    .kinetic-portfolio-item .kinetic-portfolio-text {
        padding:0;
    }

    .kinetic-portfolio-version .kinetic-portfolio-slider
    .kinetic-portfolio-media {
        padding:12px;
    }

    .kinetic-portfolio-version .kinetic-portfolio-slider
    .kinetic-portfolio-media img {
        max-height:none;
    }

    .kinetic-portfolio-version .kinetic-portfolio-controls {
        padding:26px 24px 0;
    }
}

@media (max-width:500px) {
    .kinetic-portfolio-version .kinetic-portfolio-track {
        gap:12px;
        padding:0 20px;
    }

    .kinetic-portfolio-version .kinetic-portfolio-slider
    .kinetic-portfolio-item {
        flex-basis:88vw;
        padding:42px 22px;
        row-gap:32px;
    }

    .kinetic-portfolio-version .kinetic-portfolio-slider
    .kinetic-portfolio-text h3 {
        font-size:clamp(42px,11vw,58px);
    }

    .kinetic-portfolio-version .kinetic-portfolio-arrows button {
        width:46px;
        height:46px;
    }

    .kinetic-portfolio-version .kinetic-portfolio-controls {
        padding:24px 20px 0;
    }
}


/* =========================================================
   KUNDEN
   ========================================================= */

.kinetic-portfolio-version .kinetic-clients {
    padding:9vw 5vw;
    background:#111;
    color:#fff;
}

.kinetic-portfolio-version .kinetic-clients-head {
    margin-bottom:6vw;
}

.kinetic-portfolio-version .kinetic-clients-head > span {
    display:block;
    margin-bottom:24px;
    color:var(--sand);
    font-size:10px;
    font-weight:500;
    letter-spacing:.22em;
}

.kinetic-portfolio-version .kinetic-clients-head h2 {
    margin:0;
    font-size:clamp(64px,8vw,140px);
    line-height:.86;
    letter-spacing:-.055em;
}

.kinetic-portfolio-version .kinetic-clients-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid rgba(255,255,255,.16);
    border-left:1px solid rgba(255,255,255,.16);
}

.kinetic-portfolio-version .kinetic-client-logo {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:230px;
    padding:42px;
    background:#f7f4ee;
    border-right:1px solid rgba(21,21,21,.12);
    border-bottom:1px solid rgba(21,21,21,.12);
}

.kinetic-portfolio-version .kinetic-client-logo img {
    display:block;
    width:auto;
    max-width:78%;
    height:auto;
    max-height:120px;
    object-fit:contain;
}


@media (max-width:900px) {
    .kinetic-portfolio-version .kinetic-clients {
        padding:80px 24px;
    }

    .kinetic-portfolio-version .kinetic-clients-head {
        margin-bottom:54px;
    }

    .kinetic-portfolio-version .kinetic-clients-head h2 {
        font-size:clamp(54px,12vw,86px);
    }

    .kinetic-portfolio-version .kinetic-clients-grid {
        grid-template-columns:repeat(2,1fr);
    }

    .kinetic-portfolio-version .kinetic-client-logo {
        min-height:180px;
        padding:30px;
    }

    .kinetic-portfolio-version .kinetic-client-logo img {
        max-width:82%;
        max-height:100px;
    }
}

@media (max-width:500px) {
    .kinetic-portfolio-version .kinetic-clients {
        padding:68px 20px;
    }

    .kinetic-portfolio-version .kinetic-client-logo {
        min-height:135px;
        padding:20px;
    }

    .kinetic-portfolio-version .kinetic-client-logo img {
        max-width:90%;
        max-height:78px;
    }
}


/* =========================================================
   KUNDEN — LOGO FINISH
   ========================================================= */

.kinetic-portfolio-version .kinetic-client-logo img {
    filter:grayscale(1) contrast(1.06);
    opacity:.72;
    mix-blend-mode:multiply;
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

@media (hover:hover) and (pointer:fine) {
    .kinetic-portfolio-version .kinetic-client-logo:hover img {
        opacity:.95;
        transform:scale(1.025);
    }
}


/* SIGN story accent in text */
.kinetic-portfolio-version
.kinetic-sign-story-copy p .kinetic-sign-accent {
    color:var(--sand);
}


/* Kundenstimme finish */
.kinetic-portfolio-version
.kinetic-proof-customer a {
    color:var(--sand);
}

.kinetic-portfolio-version
.kinetic-proof-card blockquote {
    font-size:clamp(30px,3.4vw,54px);
    line-height:1.08;
    letter-spacing:-.025em;
}


/* Portfolio slider: long project names stay inside text column */
@media (min-width:1101px) {
    .kinetic-portfolio-version
    .kinetic-portfolio-slider
    .kinetic-portfolio-text h3 {
        max-width:100%;
        font-size:clamp(42px,3.8vw,68px);
        line-height:.9;
        letter-spacing:-.045em;
    }

    .kinetic-portfolio-version
    .kinetic-portfolio-slider
    .kinetic-portfolio-media {
        min-width:0;
        overflow:hidden;
    }
}


/* =========================================================
   KUNDENSTIMME — FINALER FEINSCHLIFF
   ========================================================= */

.kinetic-portfolio-version
.kinetic-proof-card
.kinetic-proof-customer small {
    color:var(--sand);
}

.kinetic-portfolio-version
.kinetic-proof-card blockquote {
    max-width:900px;
    font-size:clamp(28px,2.8vw,46px);
    line-height:1.12;
    letter-spacing:-.02em;
}


/* TESTIMONIAL FEINER V2 */
.kinetic-portfolio-version .kinetic-proof-card blockquote {
    max-width: 820px;
    font-size: clamp(22px, 1.7vw, 32px);
    line-height: 1.22;
    letter-spacing: -.015em;
    font-weight: 300;
    color: rgba(21,21,21,.76);
}

@media (max-width:900px) {
    .kinetic-portfolio-version .kinetic-proof-card blockquote {
        max-width: none;
        font-size: clamp(22px, 5.6vw, 30px);
        line-height: 1.22;
    }
}