:root {
    
    --cream:#f8f3ea;
     --paper:#fffaf3;
     --sand:#e8dac8;
     --wood:#c5926a;
    
    --petrol:#0c5157;
     --petrol-dark:#073d42;
     --terracotta:#d36b43;
    
    --text:#163437;
     --muted:#617274;
     --white:#fff;
     --radius:28px;
}

* {
    box-sizing:border-box
}

 html {
    scroll-behavior:smooth
}

 body {
    margin:0;
    background:var(--cream);
    color:var(--text);
    font-family:Arial,Helvetica,sans-serif;
    line-height:1.65
}

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

 a {
    color:inherit
}

h1,h2 {
    font-family:Georgia,"Times New Roman",serif;
    font-weight:400;
    line-height:1.08;
    letter-spacing:-.045em;
    margin:0 0 24px
}

 h1 {
    font-size:clamp(3rem,6.5vw,6.5rem)
}

 h2 {
    font-size:clamp(2.1rem,4vw,4rem)
}

 h3 {
    font-family:Georgia,"Times New Roman",serif;
    font-weight:400;
    line-height:1.2;
    margin:0 0 14px
}

.eyebrow {
    margin:0 0 18px;
    text-transform:uppercase;
    letter-spacing:.24em;
    font-size:.72rem;
    font-weight:700;
    color:var(--petrol)
}

.accent-line {
    width:64px;
    height:2px;
    background:var(--terracotta);
    margin:0 0 28px
}

.accent-line.center {
    margin-left:auto;
    margin-right:auto;
    background:var(--petrol)
}

.site-header {
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:28px 6vw;
    pointer-events:none;
    transition:background .35s ease,box-shadow .35s ease
}

.site-header.is-scrolled {
    background:rgba(248,243,234,.82);
    backdrop-filter:blur(16px);
    box-shadow:0 10px 40px rgba(0,0,0,.05)
}

.logo,.contact-button {
    pointer-events:auto
}

.logo img {
    width:132px;
    height:auto
}

.contact-button,.main-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:0 28px;
    border-radius:999px;
    background:var(--petrol);
    color:#fff;
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:.72rem;
    font-weight:700;
    transition:transform .25s ease,background .25s ease
}

.contact-button:hover,.main-button:hover {
    transform:translateY(-2px);
    background:var(--petrol-dark)
}

.hero {
    position:relative;
    min-height:95vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:var(--paper)
}

.hero-media {
    position:absolute;
    inset:0 0 0 38%;
    border-bottom-left-radius:46% 10%;
    overflow:hidden
}

.hero-media::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(255,250,243,.85),rgba(255,250,243,.18) 42%,rgba(255,250,243,0))
}

.hero-media img {
    width:100%;
    height:100%;
    object-fit:cover;
    animation:slowZoom 24s ease-in-out infinite alternate
}

.hero-copy {
    position:relative;
    z-index:2;
    width:min(780px,80vw);
    padding:15vh 0 8vh 6vw
}

.hero-copy p {
    font-size:1.2rem;
    color:var(--petrol)
}

.scroll-hint {
    position:absolute;
    left:6vw;
    bottom:8vh;
    z-index:3;
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:.24em;
    font-size:.68rem;
    color:var(--petrol)
}

.scroll-hint span {
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border:1px solid rgba(12,81,87,.55);
    border-radius:50%;
    animation:pulseDown 2.8s ease-in-out infinite
}

.section {
    padding:98px 6vw
}

.system-section {
    position:relative;
    padding:86px 6vw 106px;
    background:radial-gradient(circle at 50% 20%,rgba(255,255,255,.9),transparent 40%),var(--paper)
}

.section-title {
    text-align:center;
    max-width:920px;
    margin:0 auto 64px
}

.section-title h2 {
    font-size:clamp(1.9rem,3vw,3rem)
}

.system-path {
    position:relative;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:24px
}

.system-path::before {
    content:"";
    position:absolute;
    left:8%;
    right:8%;
    top:47px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(211,107,67,.35),rgba(12,81,87,.25),transparent)
}

.system-item {
    text-align:center;
    position:relative
}

.icon {
    position:relative;
    z-index:2;
    display:grid;
    place-items:center;
    width:76px;
    height:76px;
    margin:0 auto 22px;
    border-radius:50%;
    background:#f0e8dd;
    color:var(--petrol);
    font-size:1.9rem;
    box-shadow:0 18px 40px rgba(0,0,0,.05)
}

.icon.heart {
    color:var(--terracotta)
}

.system-item p {
    font-size:.9rem;
    color:#30474a
}

.system-item strong {
    display:block;
    margin-top:18px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:3rem;
    font-weight:400;
    line-height:1;
    color:rgba(211,107,67,.22)
}

.insights {
    display:grid;
    grid-template-columns:.72fr 1.28fr;
    gap:54px;
    align-items:center;
    background:var(--cream)
}

.detail-gallery {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px
}

.detail-gallery img {
    width:100%;
    height:280px;
    object-fit:cover;
    border-radius:16px;
    box-shadow:0 18px 42px rgba(0,0,0,.08)
}

.detail-gallery img:nth-child(2),.detail-gallery img:nth-child(4) {
    transform:translateY(18px)
}

.offers {
    display:grid;
    grid-template-columns:1fr 1fr
}

.offer {
    min-height:400px;
    padding:76px 6vw;
    color:#fff;
    background-size:cover;
    background-position:center;
    position:relative;
    overflow:hidden
}

.offer::before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(7,61,66,.78),rgba(7,61,66,.18))
}

.offer>* {
    position:relative
}

.offer-paar {
    background-image:url('/public/img/detail-ambiente-1.jpg')
}

.offer-sexual {
    background-image:url('/public/img/methode-karte.jpg')
}

.offer-sexual::before {
    background:linear-gradient(90deg,rgba(150,82,46,.78),rgba(150,82,46,.22))
}

.offer .eyebrow {
    color:rgba(255,255,255,.82)
}

.offer a {
    display:inline-flex;
    margin-top:22px;
    min-height:40px;
    padding:0 22px;
    border:1px solid rgba(255,255,255,.75);
    border-radius:999px;
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:.16em;
    font-size:.68rem;
    font-weight:700
}

.about {
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:64px;
    align-items:center;
    background:linear-gradient(135deg,var(--paper),#eee2d4)
}

.about-copy p:not(.eyebrow) {
    max-width:560px;
    color:var(--muted)
}

.about-image {
    border-top-left-radius:48%;
    overflow:hidden;
    box-shadow:0 24px 60px rgba(0,0,0,.12)
}

.about-image img {
    width:100%;
    height:540px;
    object-fit:cover;
    object-position:50% 22%
}

.contact {
    display:grid;
    grid-template-columns:1fr auto;
    gap:42px;
    align-items:center;
    background:var(--paper)
}

.contact-grid {
    display:flex;
    gap:34px;
    flex-wrap:wrap;
    color:var(--muted)
}

.contact-grid p {
    margin:0
}

.contact-grid a {
    text-decoration:none;
    color:var(--text)
}

.site-footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:28px;
    padding:24px 6vw;
    background:var(--petrol-dark);
    color:#fff;
    font-size:.82rem
}

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

.footer-brand img {
    width:76px;
    filter:brightness(0) invert(1)
}

.footer-links {
    display:flex;
    gap:24px
}

.footer-links a {
    color:#fff;
    text-decoration:none
}

.reveal {
    opacity:0;
    transform:translateY(30px);
    transition:opacity 1s ease,transform 1s ease
}

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

.system-item:nth-child(2),.detail-gallery img:nth-child(2) {
    transition-delay:.08s
}

.system-item:nth-child(3),.detail-gallery img:nth-child(3) {
    transition-delay:.16s
}

.system-item:nth-child(4),.detail-gallery img:nth-child(4) {
    transition-delay:.24s
}

.system-item:nth-child(5),.detail-gallery img:nth-child(5) {
    transition-delay:.32s
}

.system-item:nth-child(6) {
    transition-delay:.40s
}

@keyframes slowZoom {
    from {
        transform:scale(1)
    }

to {
        transform:scale(1.045)
    }
}

@keyframes pulseDown {
    0%,100% {
        transform:translateY(0)
    }

50% {
        transform:translateY(6px)
    }
}

@media(max-width:1100px) {
    .system-path {
        grid-template-columns:repeat(3,1fr)
    }

.system-path::before {
        display:none
    }

.insights,.about,.contact {
        grid-template-columns:1fr
    }

.detail-gallery {
        grid-template-columns:repeat(3,1fr)
    }
}

@media(max-width:760px) {
    h1 {
        font-size:clamp(2.7rem,13vw,4.2rem)
    }

.site-header {
        padding:22px 5vw
    }

.logo img {
        width:104px
    }

.contact-button {
        min-height:38px;
        padding:0 18px
    }

.hero {
        align-items:flex-end
    }

.hero-media {
        inset:0;
        opacity:.55
    }

.hero-copy {
        width:auto;
        padding:42vh 5vw 15vh
    }

.scroll-hint {
        left:5vw;
        bottom:5vh
    }

.section,.system-section {
        padding-left:5vw;
        padding-right:5vw
    }

.system-path,.detail-gallery,.offers {
        grid-template-columns:1fr
    }

.detail-gallery img {
        height:250px
    }

.detail-gallery img:nth-child(2),.detail-gallery img:nth-child(4) {
        transform:none
    }

.offer {
        min-height:310px
    }

.about-image {
        border-top-left-radius:32px;
        border-radius:32px
    }

.about-image img {
        height:440px
    }

.contact-grid {
        display:grid;
        gap:14px
    }

.site-footer {
        flex-direction:column;
        align-items:flex-start
    }

.footer-brand {
        flex-direction:column;
        align-items:flex-start;
        gap:10px
    }
}

/* Variant 03: stärkerer Entwurf mit wechselnden Bildflächen */
body {
    font-family:Calibri,Arial,Helvetica,sans-serif
}

h1,h2,h3 {
    font-family:Calibri,Arial,Helvetica,sans-serif;
    font-weight:400;
    letter-spacing:-.025em
}

.logo img {
    width:230px;
    mix-blend-mode:multiply
}

.hero {
    min-height:92vh
}

.hero-media {
    inset:8vh 4vw 10vh 48%;
    border-radius:38px;
    box-shadow:0 30px 90px rgba(0,0,0,.10);
    transform:scale(.86);
    transform-origin:center
}

.hero-media::before {
    content:"";
    position:absolute;
    inset:0;
    background:url('/public/img/praxis.jpg') center/cover no-repeat;
    animation:softFade 18s ease-in-out infinite alternate;
    z-index:1
}

.hero-media::after {
    z-index:2;
    background:linear-gradient(90deg,rgba(255,250,243,.58),rgba(255,250,243,.02))
}

.hero-media img {
    position:relative;
    z-index:0;
    animation:heroGrow 26s ease-in-out infinite alternate
}

.section-title .eyebrow,.insights .eyebrow {
    font-size:1.08rem
}

.detail-gallery {
    grid-template-columns:1fr
}

.detail-gallery img {
    height:360px;
    border-radius:28px;
    grid-area:1/1;
    opacity:0;
    animation:galleryFade 30s ease-in-out infinite
}

.detail-gallery img:nth-child(1) {
    animation-delay:0s
}

.detail-gallery img:nth-child(2) {
    animation-delay:6s
}

.detail-gallery img:nth-child(3) {
    animation-delay:12s
}

.detail-gallery img:nth-child(4) {
    animation-delay:18s
}

.detail-gallery img:nth-child(5) {
    animation-delay:24s
}

.about {
    grid-template-columns:1.25fr .75fr
}

.about-image {
    max-width:460px;
    margin-left:auto;
    border-radius:40px
}

.about-image img {
    height:360px
}

@keyframes heroGrow {
    from {
        transform:scale(1)
    }

to {
        transform:scale(1.10)
    }
}

@keyframes softFade {
    0%,42% {
        opacity:0
    }

58%,100% {
        opacity:.95
    }
}

@keyframes galleryFade {
    0%,14% {
        opacity:0;
        transform:scale(1.015)
    }

18%,34% {
        opacity:1;
        transform:scale(1)
    }

38%,100% {
        opacity:0;
        transform:scale(1.015)
    }
}

@media(max-width:760px) {
    .logo img {
        width:145px
    }

.hero-media {
        inset:14vh 0 18vh 30%;
        transform:scale(.9)
    }

.detail-gallery img {
        height:280px
    }

.about-image {
        max-width:none
    }
}

/* ---------------------------------------------------------
   IMPRESSUM UND DATENSCHUTZ
   --------------------------------------------------------- */

.legal-page {
    min-height: 100vh;
    padding: 150px 6vw 100px;
    background: var(--paper);
}

.legal-page__inner {
    width: min(860px, 100%);
    margin: 0 auto;
}

.legal-page .eyebrow {
    margin-bottom: 12px;
    font-family: Calibri, Arial, sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--terracotta);
}

.legal-page h1 {
    margin: 0 0 55px;
    font-family: Calibri, Arial, sans-serif;
    font-size: clamp(2.7rem, 6vw, 5rem);
    line-height: 1.05;
    font-weight: 400;
    letter-spacing: -0.03em;
    color: var(--petrol);
}

.legal-page h2 {
    margin: 48px 0 14px;
    font-family: Calibri, Arial, sans-serif;
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--petrol);
}

.legal-page p,
.legal-page li,
.legal-page td {
    margin: 0 0 18px;
    font-family: Calibri, Arial, sans-serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text);
}

.legal-page a {
    color: var(--petrol);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.legal-page a:hover {
    color: var(--terracotta);
}

@media (max-width: 720px) {
    .legal-page {
        padding: 120px 5vw 70px;
    }

    .legal-page h1 {
        margin-bottom: 40px;
        font-size: 2.7rem;
    }

    .legal-page h2 {
        margin-top: 38px;
        font-size: 1.45rem;
    }

    .legal-page p,
    .legal-page li,
    .legal-page td {
        font-size: 1rem;
    }
}