* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: auto;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background: #fff;
    color: #1d1d1f;
    overflow-x: hidden;
}

/* =======================
   SPRUNGZIELE FÜR DIE NAVIGATION
   (wird von script.js ausgelesen, um den
   Scroll-Stopppunkt pro Section zu bestimmen)
======================= */

#start,
#about,
#studio,
#erfolge,
#kontakt {
    scroll-margin-top: 0;
}

#leistungen {
    scroll-margin-top: 72px;
}


/* Zielpositionen nur Desktop – grösser = Abschnitt hält tiefer */
@media (min-width: 769px) {

    #about   { scroll-margin-top: 40px; }
    #studio  { scroll-margin-top: -2px; }
    #erfolge { scroll-margin-top: -5px; }
    #kontakt { scroll-margin-top: 40px; }

    #leistungen { scroll-margin-top: 72px; }

}


/* =======================
   NAVBAR
======================= */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

    height: 72px;

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

    padding: 0 120px;

    /* Anfangszustand über dem Video */
    background: transparent;

    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);

    border-bottom: 1px solid transparent;

    z-index: 2000;

    transition:
        background .6s ease,
        backdrop-filter .6s ease,
        -webkit-backdrop-filter .6s ease,
        border-color .6s ease;
}


/* =========================================
   NAVBAR ÜBER DEM VIDEO
========================================= */

.navbar.hero-navbar a {
    color: #ffffff;
}

.navbar.hero-navbar .logo img {
    filter: brightness(0) invert(1);
}

.navbar.hero-navbar .menu-toggle {
    color: #ffffff;
}


/* =========================================
   NAVBAR NACH DEM SCROLLEN
========================================= */

.navbar.scrolled {
    background: rgba(255,255,255,.75);

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

    border-bottom: 1px solid rgba(0,0,0,.05);
}

.navbar.scrolled a {
    color: #1d1d1f;
}

.navbar.scrolled .logo img {
    filter: none;
}

.navbar.scrolled .menu-toggle {
    color: #1d1d1f;
}

.mobile-menu-footer {
    display: none;
}


/* Für Unterseiten ohne Hero-Video: Navbar bleibt immer dunkel,
   unabhängig vom Scroll-Zustand */

.navbar.navbar-static-dark,
.navbar.navbar-static-dark.scrolled,
.navbar.navbar-static-dark.hero-navbar{
    background:#1d1d1f;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.navbar.navbar-static-dark a,
.navbar.navbar-static-dark.scrolled a,
.navbar.navbar-static-dark.hero-navbar a{
    color:#ffffff;
}

.navbar.navbar-static-dark .logo img,
.navbar.navbar-static-dark.scrolled .logo img,
.navbar.navbar-static-dark.hero-navbar .logo img{
    filter:brightness(0) invert(1);
}

.navbar.navbar-static-dark .menu-toggle,
.navbar.navbar-static-dark.scrolled .menu-toggle,
.navbar.navbar-static-dark.hero-navbar .menu-toggle{
    color:#ffffff;
}


.logo{
    display:flex;
    align-items:center;
    text-decoration:none;
}

.logo img{
    height:60px;
    width:auto;
    display:block;
}

.navbar ul {
    display: flex;
    gap: 25px;
    list-style: none;
}

.navbar a {
    color: #1d1d1f;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;

    transition:
        color .25s ease,
        opacity .25s ease;
}

.navbar a:hover {
    color: #6e6e73;
    opacity: 1;
}

/* =======================
   MOBILE MENU
======================= */

.menu-toggle {

    display: none;

    font-size: 2rem;

    line-height: 1;

    font-weight: 500;

    color: #1d1d1f;

    cursor: pointer;

    user-select: none;

    position: relative;

    z-index: 2100;
}



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

.hero-video {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.hero-bg-video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;

    background: rgba(0,0,0,.35);

    z-index: 1;
}

.hero-content {
    position: absolute;

    left: 50%;
    top: 55%;

    transform: translate(-50%, -50%);

    width: 100%;
    max-width: 900px;

    padding: 0 30px;

    text-align: center;
    color: #fff;

    z-index: 2;
}

.start-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 65px;
    margin-bottom: -20px;
}

.start-logo img {
    display: block;
    width: 510px;
    height: auto;
    filter: brightness(0) invert(1);
}

.hero-sub {

    font-size: 1.1rem;

    opacity: .85;

    margin-bottom: 25px;
}

.cta-button {

    display: inline-block;

    padding: 14px 28px;

    border-radius: 999px;

    background: #fff;

    color: #111;

    text-decoration: none;

    font-weight: 600;

    transition: transform .3s ease,
                opacity .3s ease;
}

.cta-button:hover {

    transform: translateY(-2px);

    opacity: .9;
}

/* =======================
   SECTIONS
======================= */


.section {
    position: relative;
    background: #f5f5f7;

    padding: 120px 120px;

    z-index: 2;
}

.section h2 {
    font-size: 3rem;
    font-weight: 600;
    letter-spacing: -1px;
    margin-bottom: 30px;
    text-align: left;
}

.section > p {
    max-width: 700px;
    font-size: 1.15rem;
    line-height: 1.7;
    color: #4e4e52;
}

/* =======================
   FADE UP
======================= */

.fade-up {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 1.8s cubic-bezier(0.22,1,0.36,1),
                transform 1.8s cubic-bezier(0.22,1,0.36,1);
}

.fade-up.show {
    opacity: 1;
    transform: translateY(0);
}

/* =======================
   MEIN ANGEBOT
======================= */

.cards-area{
    position: relative;
    background:#e0e0e3;

    margin-left:-120px;
    margin-right:-120px;

    padding:20px 140px 20px;

    overflow:hidden;

}

.cards-scroll{

    display:flex;

    gap:24px;

    overflow-x:auto;
    overflow-y:hidden;

    padding:40px 20px 40px;

    scroll-behavior:auto;

    scrollbar-width:none;
    -ms-overflow-style:none;

    cursor:grab;

    user-select: none;
}

.cards-scroll.dragging{
    cursor: grabbing;
}

.cards-scroll.dragging .card{
    pointer-events: none;
}

.cards-scroll:active{
    cursor:grabbing;
}

.cards-scroll::-webkit-scrollbar{
    display:none;
}

.card{

    flex:0 0 350px;

    height:470px;

    padding:40px;

    display:flex;

    flex-direction:column;

    align-items:center;

    background:#fff;

    border-radius:28px;

    box-shadow:0 12px 35px rgba(0,0,0,.06);

    transition:
    transform .35s cubic-bezier(.22,.61,.36,1),
    box-shadow .35s ease,
    opacity .35s ease,
    filter .35s ease;

    position: relative;
    overflow: hidden;

    text-decoration: none;

    color: inherit;
}




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

    .cards-scroll:hover .card{

        opacity:.65;

        transition:
            transform .35s cubic-bezier(.22,.61,.36,1),
            box-shadow .35s ease,
            opacity .35s ease;

    }

    .cards-scroll:hover .card:hover{

        transform:scale(1.08);

        opacity:1;

        z-index:20;

        box-shadow:0 40px 90px rgba(0,0,0,.20);

    }

}



.card h3{

    font-size:1.7rem;

    margin-bottom:16px;

    text-align:center;
}

.card p{

    margin-bottom:auto;

    color:#6e6e73;

    line-height:1.7;

    text-align:center;
}

.icon{

    display:flex;

    justify-content:center;

    align-items:center;

    height:240px;

    margin-top:0;

    margin-bottom:24px;

    order:-1;

    position:relative;

    z-index:1;

}

.icon img{

    width:250px;

    height:auto;

    object-fit:contain;

    opacity:.95;

    transition:transform .35s ease;

}

.card-arrow{
    display:none;
}


.slider-dots{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-top:18px;

}

.dot{

    width:8px;

    height:8px;

    border-radius:999px;

    background:#a8a8ac;

    transition:
    width .35s cubic-bezier(.22,.61,.36,1),
    background-color .25s ease;

}

.dot.active{

    width:30px;

    background:#1d1d1f;

}


.slider-btn{

    position:absolute;

    top:50%;
    transform:translateY(-50%);

    width:56px;
    height:56px;

    border:none;
    border-radius:50%;

    background:#dddddf;
    color:#7a7a80;

    font-size:22px;
    font-weight:500;

    cursor:pointer;

    transition:
        background .25s ease,
        color .25s ease,
        opacity .25s ease,
        transform .25s ease;

    z-index:20;

    box-shadow:0 6px 18px rgba(0,0,0,.06);

    opacity:.55;

}

.slider-btn:hover{

    transform:translateY(-50%) scale(1.05);

}

.slider-btn.active{

    background:#c7c7cc;
    color:#1d1d1f;
    opacity:1;

}

.slider-left{

    left:55px;

}

.slider-right{

    right:55px;

}





/* =======================
   ABOUT
======================= */

.about-section{
    padding: 0px 120px 0px;
}

.about-grid{

    display:grid;

    grid-template-columns:45% 55%;

    align-items:center;

    gap:80px;

}

.about-image{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    margin-top:-30px;

}

.about-image img {

    display: block;

    width: 100%;

    max-width: 490px;

    height: 520px;            /* vorher: auto */

    object-fit: cover;        /* vorher: contain */

    object-position: top;     /* neu: oben bleibt, unten wird abgeschnitten */
}

.about-heading-line{

    width:70px;

    height:2px;

    background:#b08a5a;

    margin:32px 0 36px;

    border-radius:999px;

}

.about-content{

    max-width:650px;

    margin-top:-40px;

}

.about-label{

    display:inline-block;

    font-size: 1rem;

    font-weight:500;

    letter-spacing:4px;

    text-transform:uppercase;

    color:#8a8a8f;

    margin-bottom:16px;

}

.about-content h2 {

    margin-bottom: 36px;

    font-size: 3.6rem;

    line-height: 1.1;

    letter-spacing: -1.5px;
}

.about-content > p {

    margin-bottom: 50px;

    font-size: 1.15rem;

    line-height: 1.8;

    color: #6e6e73;
}

.story h3{

    font-size:1.7rem;

    margin-bottom:18px;

    letter-spacing:-0.4px;

}

.story p{

    font-size:1.08rem;

    line-height:1.8;

    color:#6e6e73;

}




/* =======================
   ABOUT BOTTOM
======================= */

.about-bottom{

    background:#fff;

    margin-left:-120px;
    margin-right:-120px;

    padding:10px 120px 20px; 

    display:grid;

    grid-template-columns:1.4fr 1fr;   /* vorher: 50% 50% */

    gap:40px;
    align-items: center;

}

.about-story{

    max-width:760px;

    margin:auto auto auto 50px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.about-story h2{

    font-size:2.7rem;

    line-height:1.1;

    letter-spacing:-1.2px;

    margin:0px 0 24px;

}

.about-story p{

    font-size:1.15rem;

    line-height:1.6;

    color:#6e6e73;

}

.about-values{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:16px;           /* statt 12px */
    padding-left:80px;
    border-left:1px solid #d9d9de;

    height:100%;
    transform: translateY(5px);
}

.about-value{
    display:flex;
    align-items:center;
    gap:20px;   
}

.about-value img{
    width:28px;
    height:28px;
    flex-shrink:0;
    transform:translateY(-2px);
}


.about-value h3{
    font-size:1.25rem;
    margin:0 0 1px;
}

.about-value p{
    margin:0;
    font-size:0.95rem;
    line-height:1.6;
    color:#6e6e73;
}

/* =======================
   ABOUT CTA
======================= */

.about-cta{

    background:#f5f5f7;

    margin-left:-120px;
    margin-right:-120px;

    padding:30px 120px 60px;

}

.about-cta-inner{

    max-width:900px;

    margin:0 auto;

    text-align:center;

}

.about-cta h2{

    font-size:1.3rem;

    font-weight:600;

    letter-spacing:0.75px;

    line-height:1.2;

    max-width:700px;

    margin:0 auto 24px;

    color: #6e6e73;

}

.about-cta-line{

    width:70px;

    height:2px;

    margin:0 auto;

    background:#6e6e73;

    border-radius:999px;

}



/* =======================
   STICKY LEISTUNGEN
======================= */

#leistungen-wrapper {
    position: relative;
    height: 180vh;
}

#leistungen {
    position: sticky;
    top: 60px;

    min-height: calc(100vh - 80px);

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    padding-top: 60px;

    background: #f5f5f7;
}

.angebot-intro{

    margin-top: -18px;
    margin-bottom: 25px;

    max-width: 420px;

    font-size: .95rem;

    line-height: 1.7;

    color: #8e8e93;

}


#about {
    position: relative;
    z-index: 2;

    margin-top: -90vh;

    padding-top: 160px;

    background: #f5f5f7;

    border-radius: 60px 60px 0 0;
}
/* =======================
   STUDIO
======================= */

.studio-section{
    padding-top:100px;
}

.studio-content{

    display:grid;

    grid-template-columns: 380px 1fr;

    gap:20px;

    align-items:start;

    margin-bottom:60px;
}

.studio-header{

    max-width:380px;

    padding-top: 60px;
}

.studio-label {

    display: inline-block;

    margin-bottom: 20px;

    font-size: .8rem;

    font-weight: 600;

    letter-spacing: 3px;

    color: #8e8e93;
}

.studio-header h2 {

    margin-bottom: 32px;

    font-size: 4rem;

    line-height: 1.05;

    letter-spacing: -2px;
}

.studio-intro{

    margin:0 0 0 16px;

    max-width:320px;

    font-size:1.05rem;

    line-height:1.7;

    color:#6e6e73;

}

.studio-divider{

    width:48px;

    height:2px;

    margin:34px 0 38px 16px;

    background:#b08a5a;

    border-radius:999px;

}

.studio-gallery{

    width:calc(100% + 150px);

    margin-right:-120px;

    margin-left:-30px;
}

.studio-features{
    display:flex;
    flex-direction:column;
    gap:22px;
    margin-top:20px;
}

.studio-feature{

    display:flex;

    align-items:center;

    gap:16px;

    font-size:1.1rem;

    font-weight:500;

    letter-spacing:-0.2px;

    color:#3b3b40;

    font-weight:500;

}

.feature-arrow{
    width:18px;
    height:18px;
    color:#b08a5a;
    flex-shrink:0;
}

/* Hero */

.studio-hero {

    position: relative;

    overflow: hidden;

    margin-bottom: 10px;
}

.studio-hero img {

    display: block;

    width: 105%;

    height: 600px;

    object-fit: cover;

}



.studio-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        /* Linker Verlauf */
        linear-gradient(
            to right,
            #f5f5f7 0%,
            rgba(245,245,247,.88) 12%,
            rgba(245,245,247,.60) 24%,
            rgba(245,245,247,.28) 36%,
            rgba(245,245,247,0) 50%
        ),

        /* Unterer Verlauf */
        linear-gradient(
            to bottom,
            rgba(245,245,247,0) 52%,
            rgba(245,245,247,.06) 68%,
            rgba(245,245,247,.14) 80%,
            rgba(245,245,247,.28) 90%,
            rgba(245,245,247,.55) 97%,
            #f5f5f7 100%
        );

    pointer-events:none;
    z-index:2;
}

/* Grid */

.studio-slider{

    overflow:hidden;

    width:100%;

    position:relative;

    margin-top:-55px;
}

.studio-slider::before,
.studio-slider::after{

    content:"";

    position:absolute;

    top:0;
    bottom:0;

    width:70px;

    z-index:5;

    pointer-events:none;
}

.studio-slider::before{

    left:0;

    background:linear-gradient(
        to right,
        #f5f5f7 0%,
        rgba(245,245,247,.55) 15%,
        rgba(245,245,247,.15) 50%,
        rgba(245,245,247,0) 100%
    );

}

.studio-slider::after{

    right:0;

    background:linear-gradient(
        to left,
        #f5f5f7 0%,
        rgba(245,245,247,.55) 15%,
        rgba(245,245,247,.15) 50%,
        rgba(245,245,247,0) 100%
    );

}

.studio-track{

    display:flex;

    gap:20px;

    width:max-content;

    will-change:transform;

}


.studio-image{

    flex:0 0 380px;

    overflow:hidden;

    border-radius:24px;

}

.studio-image img {

    display: block;

    width: 100%;

    height: 240px;

    object-fit: cover;

    transition: transform .8s ease;
}

.studio-image:hover img {

    transform: scale(1.04);
}

.studio-tap-hint,
.studio-progress,
.studio-highlights{
    display:none;
}



/* =======================
   SUCCESS
======================= */

.success-section{

    padding:140px 120px 80px;

    background:#fff;
}

.success-top{

    display:grid;

    grid-template-columns:1fr 700px;

    gap:40px;

    align-items:start;

    margin-bottom:-10px;

}

.success-text{

    max-width:720px;

}

.success-stats{

    display:flex;

    gap:80px;

    padding-top:85px;

}

.stat{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.stat-value{

    display:flex;

    align-items:baseline;

    gap:4px;

}

.stat-suffix{

    position: relative;

    top: -10px;

    font-size:2rem;

    font-weight:700;

    line-height:1;

    color:#3b3b40;

}

.stat-number{

    font-size:3rem;

    font-weight:700;

    line-height:1;

    letter-spacing:-2px;

    color:#3b3b40;

    opacity: 0;

    transform: translateY(12px);

    transition: 
        opacity .45 ease,
        transform .45s cubic-bezier(.22,.61,.36,1);

}

.stat-number.visible{

    opacity:1;

    transform:translateY(0);

}

.stat-text{

    margin-top:10px;

    max-width:110px;

    font-size:.95rem;

    line-height:1.5;

    color:#8e8e93;

    text-align:center;

}

.success-label {

    display: inline-block;

    margin-bottom: 20px;

    font-size: .85rem;

    font-weight: 600;

    letter-spacing: 2px;

    color: #8e8e93;
}

.success-section h2 {

    max-width: 900px;

    margin-bottom: 25px;

    font-size: 4rem;

    line-height: 1.05;

    letter-spacing: -2px;
}

.success-intro{

    max-width:600px;

    margin-bottom:40px;

    font-size:1.05rem;

    line-height:1.8;

    color:#6e6e73;
}

.success-grid{

    display:grid;

    grid-template-columns:repeat(3,09fr);

    gap:30px;

    align-items:stretch;
}

.success-card{

    background:#fff;

    border-radius:28px;

    overflow:hidden;

    border: 1px solid rgba(0,0,0,.04);

    box-shadow:0 18px 45px rgba(0,0,0,.08);

    transition:.35s ease;

    display:flex;

    flex-direction:column;
}

.success-card:hover{

    transform:translateY(-8px);

    box-shadow:0 28px 60px rgba(0,0,0,.12);
}

.success-photo{
    position:relative;
    width:100%;
    height:260px;
    overflow:hidden;
    flex-shrink:0;
}

.success-photo img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;
}

.success-card:nth-child(2) .success-photo img{
    object-position:center 25%;
    transform:translateX(15%) translateY(-2%) scale(1.32);
}

.success-card:nth-child(3) .success-photo img{
    object-position:center 40%;
    transform:translateX(-2%) translateY(7%) scale(1.1);
    transform-origin:center 40%;
}

.success-content{

    padding:14px 32px;   /* vorher: 32px */

    display:flex;

    flex-direction:column;

    height:100%;
}


.quote{

    font-size:1rem;

    line-height:1.6;

    color:#1d1d1f;

    margin-bottom:auto;

    font-weight:500;
}

.success-person{

    margin-top:20px;

    padding-top:16px;

    border-top:1px solid #ececef;
}

.success-person h3{

    margin-bottom:6px;

    font-size:1.15rem;

    font-weight:600;
}

.success-person span{

    color:#8e8e93;

    font-size:.95rem;
}

/* =======================
   SECTION DIVIDER
======================= */

.section-divider{

    width:700px;

    height:2px;

    margin: 60px auto;

    border-radius:999px;

    background: linear-gradient(
        to right,
        transparent,
        #b08a5a 20%,
        #b08a5a 80%,
        transparent
    );

}


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

.contact-section{

    background:#fff;

    padding:80px 0px;

}

.contact-wrapper{

    max-width:1400px;

    margin:0 auto;

    display:grid;

    grid-template-columns:1fr 520px;

    gap:100px;

    align-items:start;

}

.contact-label{

    display:inline-block;

    margin-bottom:20px;

    font-size:.85rem;

    font-weight:600;

    letter-spacing:2px;

    color:#8e8e93;

}

.contact-left h2{

    margin-bottom:30px;

    font-size:4rem;

    line-height:1.05;

    letter-spacing:-2px;

}

.contact-left p{

    max-width:620px;

    margin-bottom:45px;

    font-size:1.15rem;

    line-height:1.8;

    color:#6e6e73;

}

.contact-left p:first-of-type{

    margin-bottom:18px;

}

.contact-button{

    display:inline-flex;

    align-items:center;

    gap:16px;

    padding:20px 38px;

    border-radius:16px;

    background:#111;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:all .3s ease;

}

.contact-button i{

    font-size:1.3rem;

    transition:transform .3s ease;

}

.contact-button:hover{

    transform:translateY(-3px);

    background:#222;

}

.contact-button:hover i{

    transform:translateX(5px);

}

.contact-right{

    margin-top:20px;

    margin-left:-20px;

    padding-top:10px;
}

.contact-item{

display:flex;

gap:22px;

padding:16px 0;

border-bottom:1px solid rgba(176,138,90,.30);

text-decoration:none;

color:inherit;

}

.contact-item:visited,
.contact-item:active,
.contact-item:focus{

color:inherit;

}

.contact-item:last-child{

border-bottom:0;

}

.contact-icon{

font-size:1.5rem;

color:#c8912c;

}

.contact-info h4{

margin-bottom:8px;

font-size:.9rem;

letter-spacing:2px;

color:#1d1d1f;

}

.contact-info p{

color:#6e6e73;

line-height:1.7;

}


.contact-chevron,
.contact-hours-mobile,
.contact-map-mobile,
.contact-final-cta{
display:none;
}



/* =======================
   SOCIAL MEDIA
======================= */

.social-section{

    margin: -50px 100px 80px;

    background-color: #fff;

    border-radius:28px;

    overflow:hidden;

    background:
        linear-gradient(rgba(0,0,0,.52),rgba(0,0,0,.52)),
        url("Bilder/Studio\ vorne.JPG");

    background-size:cover;

    background-position:center;

}

.social-content{

    display:grid;

    grid-template-columns:1fr 550px;

    gap:80px;

    align-items:center;

    padding:15px 70px;

}

.social-label{

    display:inline-block;

    margin-bottom:22px;

    font-size:.9rem;

    font-weight:600;

    letter-spacing:3px;

    color:#c8912c;

}

.social-left h2{

    color:#fff;

    font-size:2.5rem;

    line-height:1.2;

    letter-spacing:-2px;

}

.social-right{

    border-left:1px solid rgba(255,255,255,.15);

    padding-left:55px;

}

.social-item{

    display:flex;

    align-items:center;

    gap:35px;

    padding:28px 0;

    text-decoration:none;

    color:#fff;

    border-bottom:1px solid rgba(255,255,255,.28);

}

.social-item:last-child{

    border-bottom:none;

}

.social-icon{

    width:50px;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(255,255,255,.15);

    border-radius:18px;

    background:rgba(255,255,255,.06);

    flex-shrink:0;

    transition:.3s ease;

}

.social-icon img{

    width:25px;

    height:25px;

    display:block;

}

.social-text{

    flex:1;

}

.social-text h3{

    margin-bottom:8px;

    font-size:1.7rem;

    font-weight:600;

}

.social-text p{

    color:rgba(255,255,255,.75);

    font-size:1rem;

}

.social-item .ph-arrow-right{

    font-size:2rem;

    transition:.3s;

}

.social-item:hover .ph-arrow-right{

    transform:translateX(8px);

}

.social-label-mobile,
.social-heading-mobile,
.social-text-mobile{
    display:none;
}


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

.footer{

    background:#f5f5f7;

    padding:20px 100px 35px;

}

.footer-logo{

    width:230px;

    margin-bottom:-20px;

    margin-left: 20px;

    transform: translate(-28px, 10px);

    display:block;

}

.footer-column:first-child p{

    margin-top:20px;

}

.footer-content{

    max-width:1400px;

    margin:0 auto;

    display:grid;

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

    gap:50px;

}

.footer-content .footer-column:nth-child(2),
.footer-content .footer-column:nth-child(3),
.footer-content .footer-column:nth-child(4){

    padding-top:35px;

}


.footer-column p{

    margin-bottom:18px;

    font-size:.95rem;

    line-height:1.8;

    color:#6e6e73;

}

.footer-column:not(:first-child) h4{
    margin-bottom:10px;
}

.footer-column a{

    display:block;

    margin-bottom:12px;

    padding-top: 4px;

    text-decoration:none;

    color:#6e6e73;

    transition:.3s ease;

}

.footer-column a:hover{

    color:#111;

}

.footer-bottom{

    max-width:1400px;

    margin:35px auto 0;

    padding-top:25px;

    border-top:1px solid #dddddf;

}

.footer-bottom p{

    font-size:.9rem;

    color:#8e8e93;

}

.footer-mobile-premium {
    display: none;
}

.footer-mobile-text{
    display:none;
}


/* =======================
   STUDIO LIGHTBOX
======================= */

.lightbox{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(18,18,18,.82);

    opacity:0;

    visibility:hidden;

    transition:
        opacity .35s ease,
        visibility .35s ease;

    z-index:9999;

}

.lightbox.active{

    opacity:1;

    visibility:visible;

}

.lightbox-image{

    max-width:88vw;

    max-height:82vh;

    object-fit:contain;

    border-radius:22px;

    border:3px solid rgba(255,255,255,.12);

    box-shadow:0 40px 100px rgba(0,0,0,.65);

    transform:scale(.97);

    opacity:0;

    transition:
        transform .35s ease,
        opacity .22s ease;

}

.lightbox.active .lightbox-image{

    transform:scale(1);

    opacity:1;

}

.lightbox-close{

    position:absolute;

    top:16px;

    right:16px;

    background:none;

    border:none;

    color:#fff;

    font-size:2rem;

    cursor:pointer;

    transition:.25s ease;

}

.lightbox-close:hover{

    transform:scale(1.08);

}

.lightbox-prev,
.lightbox-next{

    position:absolute;

    z-index: 2;

    top:50%;

    transform:translateY(-50%);

    width:42px;

    height:42px;

    display:flex;

    justify-content:center;

    align-items:center;

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

    border-radius:50%;

    background:rgba(0,0,0,.45);

    color:#fff;

    font-size:1.4rem;

    cursor:pointer;

    transition:
        background .25s ease,
        transform .25s ease;

}

.lightbox-prev{

    left:12px;

}

.lightbox-next{

    right:12px;

}

.lightbox-prev:hover,
.lightbox-next:hover{

    background:rgba(255,255,255,.18);

    transform:translateY(-50%) scale(1.05);

}

body.lightbox-open {
    overflow: hidden;
}

/* Mobile: Hintergrund stärker abdunkeln & Scrollen durch das Overlay verhindern */
@media (max-width: 768px){

    .lightbox{
        background:rgba(10,10,10,.94);
        backdrop-filter:blur(6px);
        -webkit-backdrop-filter:blur(6px);
        touch-action:none;
        overscroll-behavior:contain;
    }

}







/* =======================
   IMPRESSUM
======================= */

.legal-page{

    padding:170px 120px 120px;

    background:#f5f5f7;

    min-height:100vh;

}

.legal-page .container{

    max-width:800px;

    margin-left: 30px;

}

.legal-page .section-label{

    display:inline-block;

    margin-bottom:18px;

    font-size:.8rem;

    font-weight:600;

    letter-spacing:3px;

    color:#8e8e93;

}

.legal-page h1{

    font-size:4rem;

    line-height:1.05;

    letter-spacing:-2px;

    margin-bottom:55px;

    color:#1d1d1f;

}

.legal-content{

    max-width:700px;

    text-align:left;

}

.legal-content h3{

    margin-top:45px;

    margin-bottom:14px;

    font-size:1.15rem;

    font-weight:600;

    color:#1d1d1f;

}

.legal-content p{

    margin-bottom:22px;

    font-size:1.05rem;

    line-height:1.9;

    color:#6e6e73;

}

.legal-content a{

    color:inherit;

    text-decoration:none;

    transition:color .25s ease;

}

.legal-content a:hover{

    color:#b08a5a;

}

.footer-legal{

    background:#ececef;

    border-top:1px solid rgba(0,0,0,.05);

}







/* =======================
   PERSONAL TRAINING PAGE
======================= */

.service-page {
    background: #ffffff;
    padding: 95px 120px 80px;
}


/* =======================
   ZURÜCK
======================= */

.service-back {
    max-width: 1400px;
    margin: 0 auto 0px;
}

.service-back a {
    text-decoration: none;
    color: #1d1d1f;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.service-back a:hover {
    color: #b8863b;
}


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

.service-hero {
    max-width: 1400px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.1fr 1fr 1.15fr;

    gap: 35px;

    align-items: center;
}


/* =======================
   LINKER TEXT
======================= */

.service-hero-text {
    padding-right: 25px;
}

.service-label {
    display: block;

    margin-bottom: 14px;

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

    letter-spacing: 1.5px;

    color: #b8863b;

    text-transform: uppercase;
}

.service-hero h1 {
    margin: 0;

    font-size: 2.7rem;
    line-height: 1.05;

    letter-spacing: -2px;

    color: #1d1d1f;
}

.service-line {
    width: 45px;
    height: 2px;

    background: #b8863b;

    margin: 16px 0;
}

.service-hero-text p {
    max-width: 520px;

    margin: 0 0 10px;

    font-size: 0.95rem;
    line-height: 1.5;

    color: #6e6e73;
}


/* =======================
   VORTEILE
======================= */

.service-hero-info {
    border-left: 1px solid #dedede;

    padding-left: 45px;
}

.service-benefits .service-label {
    max-width: 300px;

    line-height: 1.5;

    margin-bottom: 25px;
}

.service-benefit {
    display: flex;
    align-items: flex-start;

    gap: 13px;

    padding: 13px 0;

    border-bottom: 1px solid #e5e5e5;
}

.service-benefit:first-of-type {
    border-top: 1px solid #e5e5e5;
}

.service-benefit span {
    flex-shrink: 0;

    color: #b8863b;

    font-size: 1.1rem;
}

.service-benefit p {
    margin: 0;

    font-size: 0.95rem;
    line-height: 1.5;

    color: #1d1d1f;
}


/* =======================
   BILD
======================= */

.service-hero-image {
    width: 100%;

    overflow: hidden;

    border-radius: 15px;
}

.service-hero-image img {
    display: block;

    width: 100%;
    height: 320px;

    object-fit: cover;
}


/* =======================
   FÜR WEN IST PERSONAL TRAINING?
======================= */

.service-target {
    width: 100vw;

    margin-left: calc(50% - 50vw);
    margin-top: -45px;

    padding: 20px max(45px, calc((100vw - 1400px) / 2 + 45px));

    display: grid;

    grid-template-columns: 0.65fr 2fr;
    gap: 25px;
    

    background: #f0f0f2;
}


/* =======================
   LINKER BEREICH
======================= */

.service-target-intro {
    padding-right: 22px;

    border-right: 1px solid #d8d8da;
}

.service-target-intro .service-label {
    margin-bottom: 16px;

    line-height: 1.5;
}

.service-target-intro h2 {
    margin: 0;

    font-size: 1.7rem;
    line-height: 1.15;

    letter-spacing: -0.8px;

    color: #1d1d1f;
}

.service-target-intro .service-line {
    margin: 22px 0;
}

.service-target-intro p {
    max-width: 280px;

    margin: 0;

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

    color: #6e6e73;
}


/* =======================
   6 PUNKTE
======================= */

.service-target-list {
    display: grid;

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

    column-gap: 28px;
    row-gap: 14px;
}


.service-target-item {
    display: flex;

    gap: 14px;

    padding: 0 0 10px;
    margin-bottom: 10px;

    border-bottom: 1px solid #d8d8da;
}


/* Entfernt die Linie bei den letzten beiden Elementen */

.service-target-item:nth-last-child(-n+3) {
    border-bottom: none;
    margin-bottom: 0;
}


.service-target-icon {
    flex-shrink: 0;

    width: 42px;
    height: 42px;

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

    color: #b8863b;

    font-size: 1.6rem;
}


.service-target-item h3 {
    margin: 0 0 5px;

    font-size: 0.95rem;
    line-height: 1.25;

    color: #1d1d1f;
}


.service-target-item p {
    margin: 0;

    font-size: 0.84rem;
    line-height: 1.45;

    color: #6e6e73;
}


/* =======================
   ZUSAMMENARBEIT
======================= */

.service-process {
    max-width: 1400px;
    margin: 0 auto;

    padding: 35px 0 70px;
}


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

.service-process-header {
    margin-bottom: 30px;
}

.service-process-header .service-label {
    margin-bottom: 14px;
}

.service-process-header h2 {
    margin: 0;

    font-size: 1.5rem;
    line-height: 1.15;

    letter-spacing: -0.8px;

    color: #1d1d1f;
}


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

.service-process-list {
    display: grid;

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

    gap: 20px;

    align-items: start;
}


/* =======================
   EINZELNER SCHRITT
======================= */

.service-process-step {
    display: flex;

    gap: 16px;
}


.service-process-number {
    flex-shrink: 0;

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

    font-weight: 400;

    color: #b8863b;
}


.service-process-content h3 {
    margin: 3px 0 10px;

    font-size: 0.95rem;
    line-height: 1.3;

    text-transform: uppercase;

    color: #1d1d1f;
}


.service-process-content p {
    max-width: 190px;

    margin: 0;

    font-size: 0.88rem;
    line-height: 1.65;

    color: #6e6e73;
}


/* =======================
   PFEILE
======================= */

.service-process-arrow {
    padding-top: 5px;

    font-size: 1.5rem;

    color: #1d1d1f;
}

.service-final-cta{
    display:none;
}






/* =======================
   ONLINE COACHING PAGE
======================= */

/* Die längeren Begriffe des Trainerprogramms bleiben in der schmalen Textspalte lesbar. */
.trainer-program-page .online-hero-text h1 {
    font-size: 2.8rem;
    letter-spacing: 0;
}

@media (max-width: 768px) {
    .trainer-program-page .online-hero-text h1 {
        font-size: 1.85rem;
    }
}

.online-page {
    background: #ffffff;

    padding: 115px 120px 10px;
}


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

.online-hero {
    max-width: 1400px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 0.9fr 1.15fr 0.75fr;

    gap: 50px;

    align-items: center;
}


/* =======================
   LINKER TEXT
======================= */

.online-page .service-back {
    margin-bottom: 14px;
}

.online-hero-text {
    padding-right: 10px;
}

.online-hero-text h1 {
    margin: 0;

    font-size: 3.5rem;
    line-height: 1.05;

    letter-spacing: -2px;

    color: #1d1d1f;
}

.online-hero-text p {
    max-width: 450px;

    margin: 0 0 18px;

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

    color: #6e6e73;
}


/* =======================
   KLEINER INFO-BLOCK
======================= */

.online-intro-box {
    max-width: 450px;

    margin-top: 28px;

    padding: 17px 20px;

    display: flex;

    align-items: center;

    gap: 16px;

    background: #f5f5f7;

    border-radius: 8px;
}

.online-intro-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

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

    border: 1px solid #b8863b;

    border-radius: 50%;

    color: #b8863b;

    font-size: 1.25rem;
}

.online-intro-box strong {
    display: block;

    margin-bottom: 3px;

    font-size: 0.9rem;

    color: #1d1d1f;
}

.online-intro-box p {
    margin: 0;

    font-size: 0.82rem;

    line-height: 1.45;

    color: #6e6e73;
}


/* =======================
   BILD
======================= */

.online-hero-image {
    width: 100%;

    overflow: hidden;

    border-radius: 12px;
}

.online-hero-image img {
    display: block;

    width: 100%;

    height: 455px;

    object-fit: cover;
}


/* =======================
   VORTEILE RECHTS
======================= */

.online-benefits {
    padding-left: 20px;
}

.online-benefits > .service-label {
    margin-bottom: 22px;

    line-height: 1.45;
}

.online-benefit {
    display: flex;

    align-items: flex-start;

    gap: 17px;

    padding: 18px 0;

    border-bottom: 1px solid #e3e3e3;
}

.online-benefit:first-of-type {
    border-top: 1px solid #e3e3e3;
}

.online-benefit-icon {
    width: 34px;

    flex-shrink: 0;

    padding-top: 1px;

    color: #b8863b;

    font-size: 1.45rem;
}

.online-benefit h3 {
    margin: 0 0 5px;

    font-size: 0.9rem;

    line-height: 1.3;

    text-transform: uppercase;

    color: #1d1d1f;
}

.online-benefit p {
    margin: 0;

    font-size: 0.84rem;

    line-height: 1.55;

    color: #6e6e73;
}


/* =======================
   ONLINE PROCESS
======================= */

.online-process {
    width: 100vw;
    max-width: none;

    margin-left: calc(50% - 50vw);
    margin-top: 45px;
    margin-bottom: 45px;

    padding: 35px max(40px, calc((100vw - 1400px) / 2 + 40px));

    background: #f0f0f2;

    border-radius: 0;

    display: grid;

    grid-template-columns: 300px 1fr;

    column-gap: 45px;

    box-sizing: border-box;
}


/* =======================
   PROCESS INTRO
======================= */

.online-process-intro {
    width: 100%;

    padding-right: 30px;

    border-right: 1px solid #d8d8da;

    box-sizing: border-box;
}

.online-process-intro .service-line {
    margin: 14px 0 0px;
}

.online-process-intro h2 {
    max-width: 330px;
    margin-top: -10px;
    margin-bottom: 12px;

    font-size: 1.65rem;
    line-height: 1.05;

    letter-spacing: -0.7px;

    color: #1d1d1f;
}

.online-process-intro p {
    max-width: 310px;

    margin: 0;

    font-size: 0.84rem;
    line-height: 1.45;

    color: #6e6e73;
}

/* =======================
   PROZESS SCHRITTE
======================= */


.online-process-steps {
    display: grid;

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

    gap: 14px;

    align-items: start;
}

.online-process-step {
    display: flex;

    gap: 15px;
}

.online-process-number {
    flex-shrink: 0;

    font-size: 2.35rem;

    line-height: 1;

    font-weight: 400;

    color: #b8863b;
}

.online-process-content h3 {
    margin: 3px 0 8px;

    font-size: 0.9rem;

    line-height: 1.3;

    color: #1d1d1f;
}

.online-process-content p {
    max-width: 160px;

    margin: 0;

    font-size: 0.8rem;
    line-height: 1.45;

    color: #6e6e73;
}


/* =======================
   PFEILE
======================= */

.online-process-arrow {
    align-self: start;

    padding-top: 4px;

    font-size: 1.4rem;

    color: #1d1d1f;
}


/* =======================
   CTA
======================= */

.online-cta {
    grid-column: 1 / -1;

    margin-top: 35px;

    padding: 20px 28px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    background: #1d1d1f;

    border-radius: 8px;
}

.online-cta-text h2 {
    margin: 0 0 4px;

    font-size: 1.25rem;

    color: #ffffff;
}

.online-cta-text p {
    margin: 0;

    font-size: 0.85rem;

    color: #bdbdc2;
}

.online-cta-button {
    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding: 13px 20px;

    background: #c7964b;

    color: #1d1d1f;

    text-decoration: none;

    border-radius: 4px;

    font-size: 0.78rem;

    font-weight: 600;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.online-cta-button span {
    font-size: 1.1rem;
}

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

    background: #d4aa67;
}


















/* =======================
   SPORT CAMPS PAGE
======================= */

.camps-page {
    background: #ffffff;
    padding: 85px 120px 35px;
}


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

.camps-hero {
    max-width: 1400px;
    margin: 0 auto;
}

.camps-hero-back {
    margin-bottom: 14px;
}

.camps-hero-back a {
    text-decoration: none;
    color: #1d1d1f;
    font-size: 0.82rem;
    font-weight: 500;
}

.camps-hero-back a:hover {
    color: #b8863b;
}


.camps-hero-grid {
    display: grid;

    grid-template-columns:
        0.95fr
        1.15fr
        0.65fr;

    gap: 45px;

    align-items: center;
}


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

.camps-label {
    display: block;

    margin-bottom: 16px;

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

    letter-spacing: 1.7px;

    color: #b8863b;

    text-transform: uppercase;
}


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

.camps-hero-text h1 {
    margin: 0 0 25px;

    font-size: 2.9rem;
    line-height: 1.03;

    letter-spacing: -1.8px;

    color: #1d1d1f;
}

.camps-line {
    width: 45px;
    height: 2px;

    margin: 20px 0;

    background: #b8863b;
}

.camps-hero-text > p {
    max-width: 480px;

    margin: 0 0 10px;

    font-size: 0.92rem;
    line-height: 1.55;

    color: #6e6e73;
}


/* =======================
   TEAM BOX
======================= */

.camps-team-box {
    grid-area: team;
    max-width: 470px;

    margin-top: 20px;

    padding: 14px 18px;

    display: flex;
    align-items: center;

    gap: 15px;

    background: #f5f5f7;

    border-radius: 8px;
}

.camps-team-icon {
    width: 40px;
    height: 40px;

    flex-shrink: 0;

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

    border: 1px solid #b8863b;
    border-radius: 50%;

    color: #b8863b;

    font-size: 1.25rem;
}

.camps-team-box strong {
    display: block;

    margin-bottom: 3px;

    font-size: 0.88rem;

    color: #1d1d1f;
}

.camps-team-box p {
    margin: 0;

    font-size: 0.78rem;
    line-height: 1.4;

    color: #6e6e73;
}


/* =======================
   GALLERY
======================= */

.camps-gallery {
    width: 100%;
}

.camps-gallery-title {
    padding-bottom: 12px;

    border-bottom: 1px solid #dedede;

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

    letter-spacing: 1.2px;

    color: #1d1d1f;
}

.camps-slider {
    position: relative;

    width: 100%;
    height: 335px;

    margin-top: 18px;

    overflow: hidden;

    border-radius: 12px;
}

.camp-slide {
    position: absolute;

    inset: 0;

    opacity: 0;

    transition: opacity 0.4s ease;
}

.camp-slide.active {
    opacity: 1;
}

.camp-slide img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =======================
   SLIDER PFEILE
======================= */

.camp-arrow {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 38px;
    height: 38px;

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

    border: none;
    border-radius: 50%;

    background: #ffffff;

    color: #1d1d1f;

    font-size: 1.2rem;

    cursor: pointer;

    box-shadow: 0 3px 10px rgba(0,0,0,0.08);

    z-index: 5;
}

.camp-prev {
    left: 14px;
}

.camp-next {
    right: 14px;
}

.camp-arrow:hover {
    background: #b8863b;
    color: #ffffff;
}


/* =======================
   SLIDER COUNTER
======================= */

.camp-counter {
    position: absolute;

    bottom: 12px;
    left: 15px;

    padding: 4px 8px;

    border-radius: 4px;

    background: rgba(0,0,0,0.45);

    color: #ffffff;

    font-size: 0.72rem;

    z-index: 5;
}

.camp-dots {
    display: flex;
    justify-content: center;

    gap: 8px;

    margin-top: 10px;
}

.camp-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #d6d6d6;
}

.camp-dot.active {
    background: #b8863b;
}


/* =======================
   RECHTER INFO
======================= */

.camps-hero-info {
    padding-left: 25px;

    border-left: 1px solid #d8d8da;
}

.camps-hero-info .camps-label {
    line-height: 1.45;
}

.camps-small-line {
    width: 35px;
    height: 2px;

    margin: 12px 0 20px;

    background: #b8863b;
}

.camps-hero-info p {
    margin: 0 0 14px;

    font-size: 0.88rem;
    line-height: 1.55;

    color: #6e6e73;
}

.camps-cta {
    margin-top: 20px;

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

    gap: 55px;

    padding: 12px 14px 12px 16px;

    background: #f5f5f7;
    border-radius: 6px;
}

.camps-cta div {
    display: flex;
    flex-direction: column;
}

.camps-cta div span {
    display: block;

    margin-bottom: 7px;

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

    font-weight: 600;
    letter-spacing: 1.2px;

    color: #b8863b;

    white-space: nowrap;
}

.camps-cta div strong {
    font-size: 1rem;
    line-height: 1.1;

    color: #1d1d1f;
}


/* BUTTON */

.camps-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    transform: translateX(-10px);

    margin-top: 0;

    padding: 7px 11px;

    background: #dcdcdf;
    color: #000000;

    text-decoration: none;

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

    white-space: nowrap;

    border-radius: 3px;
}

.camps-cta a span {
    font-size: 0.85rem;
    line-height: 1;
}

.camps-cta a:hover {
    background: #b8863b;
}



/* =======================
   BENEFITS
======================= */

.camps-benefits {
    width: 100vw;

    margin-left: calc(50% - 50vw);
    margin-top: 35px;

    display: grid;

    grid-template-columns:
        0.8fr
        1.35fr
        0.55fr;

    min-height: 245px;

    background: #f5f4f2;
}


/* =======================
   DARK PANEL
======================= */

.camps-dark-panel {
    position: relative;

    min-height: 245px;

    overflow: hidden;

    background:
        linear-gradient(
            rgba(20,20,20,0.45),
            rgba(20,20,20,0.75)
        ),
        url("Bilder/campunten.jpg")
        center / cover no-repeat;
}

.camps-dark-content {
    position: relative;

    z-index: 2;

    max-width: 400px;

    padding: 28px 35px 28px 55px;
}

.camps-dark-content > span {
    font-size: 0.72rem;
    font-weight: 600;

    letter-spacing: 1.5px;

    color: #b8863b;
}

.camps-dark-content h2 {
    margin: 14px 0;

    font-size: 2rem;
    line-height: 1.05;

    letter-spacing: -0.8px;

    color: #ffffff;
}

.camps-dark-content p {
    margin: 0;

    font-size: 0.8rem;
    line-height: 1.5;

    color: #dddddd;
}


/* =======================
   BENEFIT AREA
======================= */

.camps-benefit-area {
    padding: 25px 25px;
    padding-left: 80px;
}

.camps-benefit-header {
    margin-bottom: 15px;
}

.camps-benefit-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    column-gap: 35px;
    row-gap: 20px;
}

.camps-benefit-item {
    display: flex;

    gap: 14px;

    padding-right: 25px;
}

.camps-benefit-item:nth-child(odd) {
    border-right: 1px solid #d6d6d6;
}

.benefit-number {
    flex-shrink: 0;

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

    color: #b8863b;
}

.camps-benefit-item h3 {
    margin: 0 0 5px;

    font-size: 0.78rem;
    line-height: 1.25;

    color: #1d1d1f;
}

.camps-benefit-item p {
    max-width: 190px;

    margin: 0;

    font-size: 0.76rem;
    line-height: 1.45;

    color: #6e6e73;
}


/* =======================
   QUOTE
======================= */

.camps-quote {
    align-self: center;
    justify-self: center;
    width: 220px;
    padding: 20px;
    margin-left: -70px;   /* neu: schiebt das Zitat nach links */
    text-align: center;
    transform: rotate(-5deg);
}

.camps-quote p {
    margin: 0 0 18px;

    font-family: "Italianno", cursive;
    font-size: 2.3rem;
    font-weight: 400;
    line-height: 1.05;

    color: #1d1d1f;
}

.camps-quote span {
    display: block;

    font-family: "Italianno", cursive;
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1;

    color: #1d1d1f;
}

.camps-quote-line {
    width: 48px;
    height: 2px;

    margin: 10px auto 0;

    background: #b8863b;
}

/* =======================
   BOTTOM
======================= */

.camps-bottom {
    max-width: 1400px;

    margin: 20px auto 0;

    padding: 14px 0;

    display: grid;

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

    align-items: center;

    column-gap: 20px;

    border-top: 1px solid #dedede;
}

.camps-bottom-icon {
    font-size: 1.5rem;

    color: #b8863b;
}

.camps-bottom span {
    font-size: 0.65rem;
    font-weight: 600;

    letter-spacing: 1.2px;

    color: #b8863b;
}

.camps-bottom h3 {
    margin: 3px 0;

    font-size: 1rem;

    color: #1d1d1f;
}

.camps-bottom p {
    margin: 0;

    font-size: 0.72rem;

    color: #6e6e73;
}

.camps-bottom-text {
    max-width: 280px;
}

.camps-button {
    padding: 12px 30px;

    text-decoration: none;

    background: #1d1d1f;

    color: #ffffff;

    font-size: 0.75rem;
    font-weight: 500;

    border-radius: 3px;

    transition: 0.3s ease;
}

.camps-button:hover {
    background: #b8863b;
}











/* =====================================================
   ATHLETIK TRAINING
===================================================== */

.athletik-page,
.fortschritt-page {
    width: 100%;
    background: #ffffff;
}

:root {
    --athletik-content-width: 1400px;
    --athletik-side-space: max(
        calc((100vw - var(--athletik-content-width)) / 2),
        25px
    );
}

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

.athletik-hero {
    max-width: 1400px;
    height: 290px;

    margin: 120px auto 0;

    display: grid;
    grid-template-columns: 0.72fr 1.28fr;
}


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

.athletik-hero-text {
    padding: 20px 45px 20px 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}


.athletik-back {
    display: block;

    margin: 0 0 12px;

    color: #1d1d1f;

    text-decoration: none;

    font-size: 0.8rem;
    line-height: 1.2;
    font-weight: 500;
}


.athletik-back:hover {
    color: #b8863b;
}


.athletik-label {
    display: block;

    margin-bottom: 14px;

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

    letter-spacing: 1.6px;

    color: #b8863b;
}


.athletik-hero h1 {
    margin: 0 0 10px;

    font-size: 3.35rem;
    line-height: 0.97;

    letter-spacing: -2px;
    font-weight: 700;

    color: #1d1d1f;
}


.athletik-hero h1 span {
    color: #b8863b;
}


.athletik-gold-line {
    width: 36px;
    height: 2px;

    background: #b8863b;
}


.athletik-hero-text > .athletik-gold-line {
    margin: 20px 0 0px;
}


.athletik-hero-text > p {
    max-width: 410px;

    margin: 0;

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

    color: #55555a;
}



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

.athletik-hero-photo {
    position: relative;

    width: 100%;
    height: 290px;

    overflow: hidden;

    background: #f4f3f0;
}


.athletik-hero-photo::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 220px;
    height: 100%;

    background: linear-gradient(
        to right,
        #ffffff 0%,
        rgba(255, 255, 255, 0.85) 30%,
        rgba(255, 255, 255, 0) 100%
    );

    z-index: 2;
    pointer-events: none;
}


.athletik-hero-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.athletik-photo-label {
    position: absolute;

    right: 17px;
    top: 72px;

    writing-mode: vertical-rl;

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

    letter-spacing: 1.6px;

    color: #b8863b;
}


/* =====================================================
   MITTLERER BEREICH
===================================================== */

.athletik-middle {
    width: 100%;
    max-width: 1400px;

    height: 225px;

    margin: -28px auto 0;

    background: #ffffff;
}



/* =====================================================
   BENEFITS
===================================================== */

.athletik-benefits {
    padding: 30px 0 25px;

    background: #ffffff;
}


.athletik-section-title span {
    display: block;

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

    letter-spacing: 1.5px;

    color: #b8863b;
}


.athletik-section-title .athletik-gold-line {
    margin-top: 11px;
}


.athletik-benefits-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

    margin-top: 26px;
}


.athletik-benefit {
    min-width: 0;

    padding: 0 26px;

    border-right: 1px solid #deddd9;
}


.athletik-benefit:first-child {
    padding-left: 0;
}


.athletik-benefit:last-child {
    padding-right: 0;

    border-right: none;
}


.athletik-icon {
    height: 32px;

    margin-bottom: 12px;

    font-size: 1.85rem;

    color: #b8863b;
}


.athletik-benefit h3 {
    margin: 0 0 8px;

    font-size: 0.98rem;
    line-height: 1.25;
    font-weight: 700;

    color: #1d1d1f;
}


.athletik-benefit p {
    max-width: 100%;

    margin: 0;

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

    color: #6e6e73;
}



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

.athletik-bottom {
    width: 100%;
    max-width: 1400px;

    margin: 45px auto 90px;

    display: grid;
    grid-template-columns: 0.58fr 1.42fr;

    align-items: start;

    background: #ffffff;
}


/* =====================================================
   STATEMENT LINKS
===================================================== */

.athletik-statement {
    height: 230px;
    box-sizing: border-box;

    padding: 20px 30px 20px 10px;

    background: linear-gradient(
        135deg,
        #faf9f6 0%,
        #f5f3ef 100%
    );
}


.athletik-statement h2 {
    margin: 12px 0 0;

    font-size: 1.55rem;
    line-height: 1.15;

    letter-spacing: -0.4px;

    color: #1d1d1f;
}


/* =====================================================
   KARTEN RECHTS
===================================================== */

.athletik-cards {
    height: 230px;
    box-sizing: border-box;

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

    gap: 10px;

    padding: 0 0 0 22px;
}


/* =====================================================
   FORTSCHRITTSANALYSE – SPLIT-SCREEN LAYOUT
===================================================== */

.fortschritt-split {
    max-width: 1400px;
    height: 760px;

    margin: 140px auto -10px;

    display: grid;
    grid-template-columns: 0.44fr 0.56fr;
}


/* ---------- FOTO LINKS ---------- */

.fortschritt-photo {
    position: relative;

    height: 100%;

    min-width: 0;

    overflow: hidden;

    background: #f4f3f0;
}


.fortschritt-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.fortschritt-photo::after {
    content: "";

    position: absolute;
    top: 0;
    right: 0;

    width: 200px;
    height: 100%;

    background: linear-gradient(
        to left,
        #ffffff 0%,
        rgba(255, 255, 255, 0.85) 30%,
        rgba(255, 255, 255, 0) 100%
    );

    pointer-events: none;
}


.fortschritt-photo-label {
    position: absolute;

    left: 24px;
    bottom: 27px;

    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1.5px;

    color: #ffffff;
}

.fortschritt-photo-mobile {
    display: none;
}


/* ---------- INHALT RECHTS ---------- */

.fortschritt-content {
    height: 100%;

    min-width: 0;

    padding: 4px 0 4px 55px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.fortschritt-back {
    display: inline-block;

    margin-bottom: 10px;

    font-size: 0.85rem;

    color: #6e6e73;
    text-decoration: none;
}


.fortschritt-back:hover {
    color: #1d1d1f;
}


.fortschritt-label {
    display: block;

    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1.5px;

    color: #b8863b;
}


.fortschritt-content h1 {
    margin: 12px 0 16px;

    font-size: 2.1rem;
    line-height: 1.15;
    letter-spacing: -0.5px;

    color: #1d1d1f;
}


.fortschritt-content h1 span {
    color: #b8863b;
}


.fortschritt-intro {
    max-width: 420px;

    margin: 0;

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

    color: #6e6e73;
}


.fortschritt-divider {
    width: 100%;
    height: 1px;

    background: #e5e4e0;
}


/* ---------- BENEFITS ALS LISTE ---------- */

.fortschritt-benefits-list {
    display: flex;
    flex-direction: column;

    gap: 16px;
}


.fortschritt-benefit-row {
    display: grid;
    grid-template-columns: 34px 1fr;

    gap: 16px;

    align-items: start;
}


.fortschritt-benefit-row i {
    font-size: 1.4rem;

    color: #b8863b;
}


.fortschritt-benefit-row h3 {
    display: inline;

    margin: 0;

    font-size: 0.92rem;

    color: #1d1d1f;
}


.fortschritt-benefit-row p {
    display: inline;

    margin: 0 0 0 8px;

    font-size: 0.88rem;
    line-height: 1.5;

    color: #6e6e73;
}


/* ---------- GERÄTE-BADGES ---------- */

.fortschritt-equipment {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 14px;
}


.fortschritt-equipment-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1px;

    color: #b8863b;
}


.fortschritt-equipment-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 20px;
}


.fortschritt-tag {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 7px 14px;

    font-size: 0.82rem;

    color: #1d1d1f;

    border: 1px solid #deddd9;
}


.fortschritt-tag i {
    font-size: 0.95rem;

    color: #b8863b;
}


/* ---------- HELLER BALKEN UNTEN ---------- */

.fortschritt-banner {
    display: flex;

    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    gap: 20px;

    padding: 22px 30px;

    background: linear-gradient(
        135deg,
        #f4f1ea 0%,
        #f0ebe1 100%
    );
}


.fortschritt-banner-text {
    max-width: 380px;
}


.fortschritt-banner-text .fortschritt-gold-line {
    width: 30px;
    height: 2px;

    margin-bottom: 10px;

    background: #b8863b;
}


.fortschritt-banner-text h2 {
    margin: 0;

    font-size: 1.05rem;
    line-height: 1.35;

    color: #1d1d1f;
}


.fortschritt-banner-steps {
    display: flex;
    flex-wrap: wrap;

    gap: 22px;
}


.fortschritt-banner-step {
    display: flex;
    align-items: baseline;

    gap: 20px;
}


.fortschritt-banner-step span {
    flex-shrink: 0;

    font-size: 1.1rem;

    color: #b8863b;
}


.fortschritt-banner-step p {
    margin: 0;

    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.3px;

    color: #1d1d1f;
}


/* =====================================================
   STUDIO MIETEN – Anpassungen (nur diese Seite)
===================================================== */

/* Banner: Titel oben, Schritte mit Beschreibung darunter */
.studio-page .fortschritt-banner {
    flex-direction: column;
    align-items: stretch;
}

.studio-page .fortschritt-banner-text {
    max-width: none;
}

.studio-page .fortschritt-banner-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.studio-page .fortschritt-banner-step {
    gap: 10px;
}

.studio-page .fortschritt-banner-step p {
    white-space: normal;
}

.studio-page .fortschritt-banner-step small {
    display: block;
    margin-top: 6px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #6e6e73;
}

/* Nur Desktop: kompakter Aufbau & schwächerer Fade */
@media (min-width: 1101px) {

    .studio-page .fortschritt-split {
        height: auto;
        margin-bottom: 40px;
    }

    /* Bild passt sich der Höhe des Inhalts an */
    .studio-page .fortschritt-photo {
        height: auto;
    }

    .studio-page .fortschritt-photo img {
        position: absolute;
        inset: 0;
    }

    .studio-page .fortschritt-photo::after {
        width: 140px;
        background: linear-gradient(
            to left,
            rgba(255, 255, 255, 0.7) 0%,
            rgba(255, 255, 255, 0.3) 35%,
            rgba(255, 255, 255, 0) 100%
        );
    }

    /* Feste, engere Abstände statt automatischer Verteilung */
    .studio-page .fortschritt-content {
        height: auto;
        justify-content: flex-start;
        gap: 28px;
    }

    /* Zusätzlich weniger Abstand über dem letzten Block */
    .studio-page .fortschritt-banner {
        margin-top: -10px;
    }
}

/* Tablet & Handy: Schritte zweispaltig */
@media (max-width: 1100px) {
    .studio-page .fortschritt-banner-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .studio-page .fortschritt-banner-step small {
        font-size: 0.68rem;
    }
}






@media (max-width: 1100px) {

    .fortschritt-split {
        height: auto;

        grid-template-columns: 1fr;
    }

    .fortschritt-photo {
        height: 320px;
    }

    .fortschritt-photo::after {
        top: auto;
        right: 0;
        bottom: 0;

        width: 100%;
        height: 120px;

        background: linear-gradient(
            to top,
            #ffffff 0%,
            rgba(255, 255, 255, 0) 100%
        );
    }

    .fortschritt-content {
        height: auto;

        margin-top: 30px;
        padding: 0 25px;

        gap: 30px;
    }

}


@media (max-width: 640px) {

    .fortschritt-content h1 {
        font-size: 1.6rem;
    }

    .fortschritt-banner {
        flex-direction: column;
        align-items: flex-start;
    }

}


/* =====================================================
   EINZELNE KARTE

===================================================== */

.athletik-card {
    min-width: 0;
    height: 230px;

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

    background: #f7f6f4;
}


/* =====================================================
   KARTEN-TEXT
===================================================== */

.athletik-card-text {
    padding: 17px 12px;
}


.athletik-card-text h3 {
    margin: 0;

    font-size: 0.95rem;
    line-height: 1.25;

    color: #1d1d1f;
}


.athletik-card-line {
    width: 27px;
    height: 2px;

    margin: 9px 0 10px;

    background: #b8863b;
}


.athletik-card-text p {
    margin: 0;

    font-size: 0.88rem;
    line-height: 1.45;

    color: #6e6e73;
}


/* =====================================================
   KARTEN-BILDER
===================================================== */

.athletik-card-image {
    height: 230px;

    overflow: hidden;
}


.athletik-card-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =====================================================
   DESKTOP 1600 × 900
===================================================== */

@media (min-width: 1200px) {

    .athletik-hero {
        height: 340px;
    }

    .athletik-hero-photo {
        height: 340px;
    }

    .athletik-middle {
        height: 225px;
    }

    .athletik-bottom {
        height: 230px;
    }

}



/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1100px) {

    .athletik-hero {
        padding: 0 30px;

        grid-template-columns: 0.75fr 1.25fr;
    }

    .athletik-benefits {
        padding-left: 25px;
        padding-right: 25px;
    }

    .athletik-benefit {
        padding-left: 15px;
        padding-right: 15px;
    }

}



/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 800px) {

    .athletik-hero {
        height: auto;

        padding: 0 25px;

        grid-template-columns: 1fr;
    }

    .athletik-hero-text {
        padding-right: 0;
    }

    .athletik-hero h1 {
        font-size: 2.8rem;
    }

    .athletik-hero-photo {
        height: 320px;

        margin-top: 25px;
    }

    .athletik-middle {
        height: auto;

        grid-template-columns: 1fr;
    }

    .athletik-benefits {
        padding: 35px 25px;
    }

    .athletik-benefits-grid {
        grid-template-columns: 1fr 1fr;

        row-gap: 25px;
    }

    .athletik-benefit {
        padding: 0;

        border-right: none;
    }

    .athletik-bottom {
        height: auto;

        grid-template-columns: 1fr;
    }

    .athletik-statement {
        padding: 40px 25px;
    }

    .athletik-cards {
        grid-template-columns: 1fr;

        height: auto;

        padding: 25px;
    }

}



















/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 800px) {

    .athletik-hero {
        grid-template-columns: 1fr;

        padding: 0 25px;
    }


    .athletik-hero-text {
        padding-right: 0;
    }


    .athletik-hero h1 {
        font-size: 2.8rem;
    }


    .athletik-hero-photo {
        min-height: 320px;

        margin-top: 25px;
    }


    .athletik-middle {
        grid-template-columns: 1fr;
    }


    .athletik-benefits {
        padding: 35px 25px;
    }


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


    .athletik-benefit {
        padding: 0;

        border-right: none;
    }


    .athletik-bottom {
        grid-template-columns: 1fr;
    }


    .athletik-statement {
        padding: 40px 25px;
    }


    .athletik-cards {
        grid-template-columns: 1fr;

        padding: 25px;
    }

}

















/* =======================
MOBILE
======================= */

@media (max-width: 800px) {

    .athletik-hero {
        grid-template-columns: 1fr;

        padding: 0 25px;
    }

    .athletik-hero-image {
        min-height: 320px;

        margin-top: 25px;
    }

    .athletik-hero h1 {
        font-size: 2.8rem;
    }


    .athletik-benefits {
        padding: 40px 25px;
    }

    .athletik-benefit-grid {
        grid-template-columns: 1fr 1fr;

        gap: 30px;
    }


    .athletik-benefit {
        padding: 0;

        border-right: none;
    }


    .athletik-steps {
        grid-template-columns: 1fr 1fr;
    }


    .athletik-final {
        grid-template-columns: 1fr;

        padding: 40px 25px;
    }

    .athletik-final-cards {
        grid-template-columns: 1fr;
    }

}













/* =======================
   MOBILE
======================= */

@media (max-width:1200px){

    .success-card{

        grid-template-columns:1fr;
    }

    .success-photo{

        height:260px;
    }

    .contact-background-text{

        display:none;
    }

}

/* Neue Elemente nur für die Mobile-Ansicht der Leistungen-Sektion,
   auf Desktop existiert dafür schon ein eigenes Layout */
.scroll-hint,
.leistungen-wave,
.leistungen-cta{
    display:none;
}


@media (max-width:768px){

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

.navbar{
    height:50px;
    padding:0 18px;
}

.logo img{
    height:34px;
}

.menu-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:2100;
    font-size:2.3rem;
    line-height:1;
    transform:translateY(-2px);
}

.navbar ul{
    position:fixed;
    inset:0;
    height:100vh;
    margin:0;
    padding:140px 0 80px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:34px;
    list-style:none;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    transform:translateY(-40px);
    opacity:0;
    pointer-events:none;
    transition:
        transform .55s cubic-bezier(.22,.61,.36,1),
        opacity .45s ease;
    z-index:1990;
}

.navbar ul.active{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
}

.navbar ul li a{
    font-size:2rem;
    font-weight:600;
    opacity:0;
    transform:translateY(20px);
    transition:.45s;
}

.navbar ul.active li a{
    opacity:1;
    transform:translateY(0);
    color:#1d1d1f;
}


/* =====================================================
   ALLGEMEIN
===================================================== */

.section,
.about-section,
.studio-section,
.success-section,
.contact-section{
    padding-left:20px;
    padding-right:20px;
}

.section{
    padding-top:60px;
    padding-bottom:46px;
}

.section h2{
    font-size:1.9rem;
    line-height:1.15;
}


/* =====================================================
   HERO
===================================================== */
@media (max-width: 768px){

    .hero-video{
        height: 87vh;                            /* Fallback für alte Browser */
        height: 100svh;                          /* sichtbare Bildschirmhöhe */
        height: var(--hero-height, 100svh);      /* fester Wert aus script.js */
    }

    .hero-bg-video{
        height: 100%;
        object-fit: cover;
    }

}


.hero-content{
    top:58%;
    max-width:100%;
    padding:0 24px;
}

.start-logo{
    margin-top:0;
    margin-bottom:8px;
}

.start-logo img{
    width:220px;
}

.hero-content h1{
    font-size:2.3rem;
    letter-spacing:-1px;
    margin-bottom:4px;
}

.hero-content h2{
    font-size:1.05rem;
    line-height:1.3;
    margin-bottom:10px;
}

.hero-sub{
    font-size:.88rem;
    line-height:1.45;
    margin-bottom:18px;
}

.cta-button{
    padding:12px 22px;
    font-size:.88rem;
}


/* =====================================================
   LEISTUNGEN / ANGEBOT
===================================================== */

/* Der sticky/vh-Effekt ist eine Desktop-Spielerei (About
   gleitet über Leistungen). Auf Mobile schalten wir das ab
   und lassen die Sektion ganz normal fliessen – das behebt
   auch das Abschneiden vergrösserter Karten. */

#leistungen-wrapper{
    height:auto;
}

#leistungen{
    position:static;
    min-height:auto;
    top:auto;
    padding-top:65px;
    padding-bottom:0;
    background:#ffffff;
}

#about{
    margin-top:0;
    padding-top: 0;
    border-radius: 0;
}

.section h2{
    margin-bottom:8px;
}

#leistungen h2{
    font-size:2.1rem;
}

.angebot-intro{
    margin-top:0;
    margin-bottom:16px;
    max-width:290px;
    font-size:.6rem; 
    line-height:1.25;
}

.cards-area{
    position:relative;
    overflow:hidden;
    background:#ececef;
    margin-inline:-20px;
    padding:24px 0 68px;
}

.cards-scroll{
    padding:10px 20px 10px;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
}

.card{
    position:relative;
    flex:0 0 auto;
    width:52vw;
    max-width:205px;
    height:265px;
    padding:16px 16px 54px;
    border-radius:22px;
    scroll-snap-align:center;
}

.card h3{
    font-size:1rem;
    margin-bottom:5px;
}

.card p{
    font-size:.75rem;
    line-height:1.35;
}

.icon{
    height:110px;
    margin-top:-6px;
    margin-bottom:6px;
    font-size:2.8rem;
}

.icon img{
    width:130px;
}

.card-arrow{
    position:absolute;
    left:50%;
    bottom:16px;
    transform:translateX(-50%);
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#1d1d1f;
    color:#ffffff;
    font-size:.85rem;
}

.slider-btn{
    display:none;
}

.scroll-hint{
    display:none;
}

/* ---------- WELLEN-TRENNER ---------- */

.leistungen-wave{
    display:block;
    position:relative;
    margin:-50px -20px 0;
    height:25px;
    line-height:0;
}

.leistungen-wave svg{
    display:block;
    width:100%;
    height:40px;
}

/* ---------- CTA "BEREIT FÜR DEN NÄCHSTEN SCHRITT" ---------- */

.leistungen-cta{
    display:block;
    margin:0 -20px;
    padding:4px 24px 44px;
    text-align:center;
    background:#ffffff;
    position:relative;
    z-index:1;
}

.leistungen-cta h3{
    max-width:320px;
    margin:0 auto 5px;
    font-size:1.2rem;
    line-height:1.25;
    letter-spacing:-0.3px;
    color:#1d1d1f;
}

.leistungen-cta p{
    max-width:300px;
    margin:0 auto 11px;
    font-size:.85rem;
    line-height:1.45;
    color:#6e6e73;
}


.leistungen-cta-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    width:auto;
    padding:8px 18px;
    background:#1d1d1f;
    color:#ffffff;
    font-size:.82rem;
    font-weight:600;
    border-radius:999px;
    text-decoration:none;
}


/* =====================================================
   ÜBER MICH – MOBILE
===================================================== */

.about-section{
    padding:0;
    display:block;
    background:#fff;
}


/* =====================================================
   OBERER BEREICH – MOBILE
===================================================== */

.about-grid{
    position:relative;

    display:grid;
    grid-template-columns:58% 42%;

    align-items:end;

    background:#f5f5f7;

    padding:35px 20px 0;

    min-height:220px;

    overflow:hidden;
}


/* =====================================================
   TEXT
===================================================== */

.about-content{
    grid-column:1;
    grid-row:1;

    position:relative;

    width:100%;
    max-width:none;

    margin:0;

    padding:0 0 25px 0;

    align-self:end;

    z-index:2;
}

.about-label{
    display:block;

    font-size:.72rem;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:12px;

    color:#8e8e93;
}

.about-content h2{
    margin:8px 0 -6px 0;
    width:calc(100% + 80px);
    font-size:1.75rem;
    line-height:1.08;
    letter-spacing:-.8px;
}

.about-heading-line{
    width:40px;
    height:2px;

    margin:18px 0 10px;

    background:#b08a5a;

    border-radius:999px;
}


/* =====================================================
   BESCHREIBUNG
===================================================== */

.about-content > p{
    margin:0;

    width:100%;

    font-size:.75rem;
    line-height:1.6;

    color:#6e6e73;

    padding-right:8px;
}


/* =====================================================
   PERSON
===================================================== */

.about-image{
    grid-column:2;
    grid-row:1;

    width:100%;

    margin:0;

    align-self:end;

    display:flex;
    justify-content:flex-start;
    align-items:flex-end;

    position:relative;

    z-index:3;
}

.about-image img{
    display:block;

    width:135%;

    max-width:none;

    height:auto;

    object-fit:contain;

    border-radius:0;

    transform:translateX(-50%);
}


/* =====================================================
   WEISSER MITTELBEREICH
===================================================== */

.about-bottom{
    display:flex;
    flex-direction:column;

    margin:0;

    padding:15px 20px 75px;

    background:#fff;
}


/* =====================================================
   STORY
===================================================== */

.about-story{
    max-width:340px;

    margin:0 auto;

    text-align:center;
}

.about-story h2{
    margin:0;

    font-size:1.3rem;
    line-height:1.15;

    letter-spacing:-.6px;
}

.about-story h2::after{
    content:"";

    display:block;

    width:60px;
    height:2px;

    margin:7px auto 7px;

    background:#b08a5a;

    border-radius:999px;
}

.about-story p{
    margin:0;

    font-size:.75rem;
    line-height:1.6;

    color:#6e6e73;
}


/* =====================================================
   WERTE
===================================================== */

.about-values{
    display:grid;

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

    gap:10px;

    order:-1;              /* neu */

    margin-top:0;          /* geändert, vorher: 15px */

    margin-bottom:-25px;    /* neu */

    padding:0;

    border:0;

    height:auto;

    transform:none;
}

.about-value{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:7px;
    padding:14px 8px;
    text-align:center;
    background:#fff;
    border:1px solid #eeeeef;
    border-radius:18px;
    box-shadow:0 8px 25px rgba(0,0,0,.05);
}

.about-value img{
    width:36px;
    height:36px;
    padding:7px;
    background:#f5f5f7;
    border-radius:50%;
    transform:none;
}

.about-value h3{
    margin:0;
    font-size:.82rem;
    line-height:1.2;
}

.about-value p{
    display:block;
    margin:0;
    font-size:.65rem;
    line-height:1.35;
    color:#6e6e73;
}


/* =====================================================
   GRAUER ABSCHLUSS
===================================================== */

.about-cta{
    display:none;
}





/* =====================================================
   STUDIO
===================================================== */

.studio-section{
    padding-top:38px;
    padding-bottom:84px;
    display:flex;
    flex-direction:column;
}

/* Diese beiden Wrapper "verschwinden" nur strukturell (display:contents) –
   ihre Kind-Elemente werden direkt zu Flex-Kindern von .studio-section
   und per "order" neu sortiert. Auf Desktop bleibt alles unverändert,
   da diese Regel nur hier im Mobile-Media-Query gilt. */

.studio-content,
.studio-header{
    display:contents;
}

.studio-label{
    order:1;
    font-size:.68rem;
    letter-spacing:1.5px;
    margin-bottom:6px;
}

.studio-header h2{
    order:2;
    font-size:1.9rem;
    line-height:1.1;
    margin-bottom:8px;
}

.studio-break{
    display:none;
}

.studio-intro{
    order:3;
    margin-left:0;
    max-width:100%;
    font-size:.88rem;
    line-height:1.35;
}

.studio-divider{
    order:4;
    margin:12px 0 14px 0;
}

.studio-gallery{
    order:5;
    width:auto;
    margin-left:0;
    margin-right:0;
}

.studio-hero img{
    width:100%;
    height:220px;
}

.studio-hero::before{
    background:
        linear-gradient(
            to bottom,
            rgba(245,245,247,0) 52%,
            rgba(245,245,247,.06) 68%,
            rgba(245,245,247,.14) 80%,
            rgba(245,245,247,.28) 90%,
            rgba(245,245,247,.55) 97%,
            #f5f5f7 100%
        );
}

.studio-tap-hint{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:14px;
}

.studio-tap-line{
    flex:1;
    height:1px;
    background:#e5e4e0;
}

.studio-tap-text{
    display:flex;
    align-items:center;
    gap:6px;
    flex-shrink:0;
    font-size:.72rem;
    white-space:nowrap;
    color:#6e6e73;
}

.studio-tap-text i{
    font-size:1rem;
    color:#b08a5a;
}

.studio-slider{
    order:6;
    margin-top:14px;
}

.studio-slider::before,
.studio-slider::after{
    width:36px;
}

.studio-track{
    gap:8px;
}

.studio-image{
    flex:0 0 108px;
    border-radius:14px;
}

.studio-image img{
    height:140px;
}

.studio-progress{
    display:block;
    width:100%;
    height:2px;
    margin-top:14px;
    background:#e5e4e0;
    border-radius:999px;
    overflow:hidden;
}

.studio-progress-bar{
    height:100%;
    width:20%;
    background:#b08a5a;
    border-radius:999px;
}

.studio-features{
    order:7;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-top:24px;
}

.studio-feature{
    align-items:center;
    font-size:.8rem;
    font-weight:700;
    gap:8px;
}

.studio-highlights{
    display:none;
}


/* =====================================================
   ERFOLGE
===================================================== */

.success-section{
    padding-top:45px;
    padding-bottom:54px;
}

.success-section h2{
    margin-bottom: 8px;
    font-size:2rem;
    line-height:1.15;
}

.success-top{
    grid-template-columns:1fr;
    gap:30px;
    margin-bottom:0;
}

.success-text{
    max-width:100%;
}

.success-label{
    margin-bottom: 6px;
    font-size:.7rem;
    letter-spacing:1.5px;
}

.success-intro{
    margin-bottom:0;
    font-size:.88rem;
    line-height:1.4;
}

.success-stats{
    display:flex;
    justify-content:center;
    gap:35px;
    padding-top:0;
}

.stat{
    position:relative;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    width:auto;
    height:auto;

    margin:0;
    padding:0;

    background:none;
    border-radius:0;

    text-align:center;
}

.stat:not(:last-child)::after{
    content:"";

    position:absolute;
    top:50%;
    right:-10px;
    transform:translateY(-50%);

    width:1px;
    height:38px;

    background:#e2e2e5;
}

.stat-value{
    margin:0 0 4px;
}

.stat-number{
    font-size:1.7rem;
    font-weight:700;
    color:#1d1d1f;
}

.stat-suffix{
    font-size:1.1rem;
    top:-2px;
    color:#b08a5a;
}

.stat-text{
    font-size:.68rem;
    line-height:1.25;
    max-width:80px;
    margin:0 auto;
    color:#6e6e73;
    word-break:break-word;
}

.success-grid{
    grid-template-columns:1fr;
    gap:20px;
    margin-top:35px;
}

.success-card{
    background:#f4f4f5;
    box-shadow:0 8px 24px rgba(0,0,0,.20);
    border:1px solid #e5e5e8;
    display:flex;
    flex-direction:row;
    align-items:stretch;
}

.success-photo{
    width:38%;
    height:auto;
    flex-shrink:0;
    align-self:stretch;
}

.success-photo img{
    position:absolute;
    inset:0;
}

.success-content{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:14px;
}

.success-card:nth-child(2){
    flex-direction:row-reverse;
    line-height: 1;
}

.quote{
    font-size:.78rem;
    line-height:1.3;
}

.success-person{
    margin-top:8px;
    padding-top:6px;
    border-top:1px solid #d8d8db;
}

.success-person h3{
    margin-bottom:2px;
    font-size:.85rem;
}

.success-person span{
    font-size:.68rem;
}

.section-divider{
    width:100%;
    max-width:220px;
    margin:60px auto 20px;
}

.success-card.fade-up{
    transition:
        opacity 3s cubic-bezier(0.22,1,0.36,1),
        transform 3s cubic-bezier(0.22,1,0.36,1);
}


/* =====================================================
   KONTAKT
===================================================== */

.contact-section .fade-up{
    opacity:1;
    transform:none;
    transition:none;
}

.contact-section{
    padding:0 0 5px;
}

.contact-wrapper{
    grid-template-columns:1fr;
    gap:0;
}

.contact-left{
    position:relative;
    margin:0;
    padding:35px 20px 75px;
    background:
        linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0) 14%),
        linear-gradient(180deg, rgba(10,10,10,.36) 0%, rgba(10,10,10,.56) 100%),
        url("Bilder/studiozuschnitt.jpg") center top/cover no-repeat;
    color:#ffffff;
}

.contact-label{
    color:#b08a5a;
    font-size:.7rem;
    margin-bottom:4px;
}

.contact-left p:nth-of-type(2){
    display:none;
}


.contact-left h2{
    color:#ffffff;
    font-size:1.9rem;
    line-height:1.15;
    margin-bottom:5px;
}

.contact-left p{
    color:rgba(255,255,255,.78);
    font-size:.88rem;
    line-height:1.5;
    margin-bottom:0;
}

.contact-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin-top:-20px;
    padding:9px 9px;
    background:#b8863b;
    color:#ffffff;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.3px;
    border-radius:999px;
    box-shadow:0 8px 24px rgba(0,0,0,.25);
}

.contact-button i{
    font-size:.95rem;
}

.contact-right{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    margin:-55px 20px 0;
    padding:4px 18px;
    background:#ffffff;
    border-radius:22px;
    box-shadow:0 20px 45px rgba(0,0,0,.14);
}

.contact-item{
    text-decoration:none;
    color:inherit;
    gap:12px;
    padding:10px 0;
}

.contact-item:visited,
.contact-item:active,
.contact-item:focus{
    color:inherit;
}

.contact-item:nth-child(1){ order:3; }
.contact-item:nth-child(2){ order:1; }
.contact-item:nth-child(3){ order:2; }

.contact-item:nth-child(2),
.contact-item:nth-child(3){
    border-bottom:1px solid #ececef;
}

.contact-item:nth-child(1){
    border-bottom:none;
}

.mobile-hide-item{
    display:none;
}

.contact-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:42px;
    height:42px;
    font-size:1.15rem;
    background:#faf3e8;
    border-radius:50%;
}

.contact-icon img{
    width:20px;
    height:20px;
}

.contact-info h4{
    font-size:.7rem;
    letter-spacing:1.2px;
    margin-bottom:5px;
    color:#1d1d1f;
}

.contact-info p{
    font-size:.76rem;
    line-height:1.35;
    color:#6e6e73;
}

.contact-chevron{
    display:block;

    margin-left:auto;
    align-self:center;

    font-size:1.05rem;
    color:#c7c7cc;
}

/* ---------- Öffnungszeiten ---------- */

.contact-hours-mobile{
    display:flex;
    align-items:flex-start;
    gap:14px;
    max-width:292px;
    margin:18px 0 0 35px;
}

.contact-hours-info{
    flex:1;
    min-width:0;
}

.contact-hours-info h4{
    margin:0 0 4px;
    font-size:.85rem;
    font-weight:700;
    color:#1d1d1f;
}

.contact-hours-row{
    display:flex;
    justify-content:space-between;
    max-width:100%;
    margin-bottom:1px;
    font-size:.82rem;
    color:#3b3b40;
}


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

.contact-map-mobile{
    display:none;
}

.contact-map-mobile iframe{
    display:block;
    width:100%;
    height:100%;
    border:0;
    filter:grayscale(1) contrast(1.05);
}

/* ---------- Social Media Pfeil wieder einblenden ---------- */

.social-section{
    margin:10px 0 40px;
    border-radius:0;
}

.social-content{
    display:grid;
    grid-template-columns:1.6fr 1fr;
    gap:8px;
    padding:10px 20px;
    align-items:center;
}

.social-label-desktop{
    display:none;
}

.social-label-mobile{
    display:none;
}

.social-left h2.social-heading-desktop{
    display:none;
}

.social-left h2.social-heading-mobile{
    display:block;
    font-size:.95rem;
    line-height:1.25;
    letter-spacing:-0.2px;
    color:#ffffff;
}

.social-text-mobile{
    display:block;
    margin-top:6px;
    font-size:.62rem;
    line-height:1.3;
    color:rgba(255,255,255,.6);
    white-space:nowrap;
}

.social-right{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    border-left:none;
    padding-left:0;
}

.social-item{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    padding:3px 6px;
    text-align:center;
    border:1px solid rgba(255,255,255,.28);
    border-radius:12px;
}

.social-icon{
    width:30px;
    height:30px;
    border-radius:9px;
}

.social-icon img{
    width:14px;
    height:14px;
}

.social-text h3{
    font-size:.72rem;
    margin-bottom:1px;
}

.social-text p{
    display:none;
}

.social-item .ph-arrow-right{
    display:block;
    margin-top:-3px;
    font-size:.95rem;
    color:#b08a5a;
}

/* ---------- Abschluss-CTA ---------- */

.contact-final-cta{
    display:none;
}

.contact-final-cta > .ph-chats-circle{
    font-size:1.4rem;
    color:#b08a5a;
    margin-bottom:2px;
}

.contact-final-cta h3{
    margin:0;
    font-size:.92rem;
    color:#1d1d1f;
}

.contact-final-cta p{
    max-width:100%;
    margin:0 0 4px;
    font-size:.76rem;
    line-height:1.3;
    color:#6e6e73;
}

.contact-final-cta-button{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:auto;
    padding:10px 26px;
    background:#e4e2e2;
    color:#1d1d1f;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.5px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.04);
    box-shadow:0 3px 10px rgba(0,0,0,.20);
    text-decoration:none;
}

.contact-final-cta-button i{
    font-size:.95rem;
}

.contact-final-cta > .ph-chats-circle{
    display:none;
}



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

.footer{
    padding:10px 16px 25px 25px;
}

.footer-content{
    display:block;
}

.footer-content .footer-column:first-child > p{
    display:none;
}

.footer-logo{
    width:110px;
    margin:0 -3px -1px;
    transform:none;
}

.footer-column{
margin-bottom:3px;
overflow:hidden;
}

.footer-content .footer-column:nth-child(3){
    margin-bottom:-12px;
}

.footer-content .footer-column:nth-child(2),
.footer-content .footer-column:nth-child(3),
.footer-content .footer-column:nth-child(4){
padding-top:0;
}

.footer-column h4{
    float:left;
    width:80px;
    font-size:.6rem;
    letter-spacing:.5px;
    margin:0;
    line-height: 2.7;
    white-space: nowrap;
}

.footer-column p.footer-desktop-text{
    display:none;
}

.footer-column p{
    display:inline;
    margin:0 8px 0 0;
    font-size:.64rem;
    line-height:1;
}

.footer-column a{
    display:inline-block;
    margin:0 8px 0 0;
    font-size:.64rem;
}

.footer-bottom{
    margin-top:10px;
    padding-top:14px;
}

.footer-bottom p{
    text-align:center;
    font-size:.68rem;
}




/* =========================
   MOBILE – LEISTUNGEN INTRO
   ========================= */

@media (max-width: 768px) {

    #leistungen .angebot-intro {
        font-size: .85rem !important;
        line-height: 1.5 !important;
        max-width: 320px;
    }

}
}

/* =====================================================
   MOBILE – UNTERSEITEN (Personal Training, Online Coaching,
   Studio mieten, Sport Camps, Impressum, Datenschutz)
===================================================== */

@media (max-width: 768px) {

    /* ---------- RECHTLICHE SEITEN ---------- */

    .legal-page{
        padding:110px 20px 60px;
    }

    .legal-page .container{
        margin-left:0;
    }

    .legal-page .section-label{
        font-size:.66rem;
        letter-spacing:2px;
        margin-bottom:10px;
    }

    .legal-page h1{
        font-size:2.1rem;
        margin-bottom:26px;
    }

    .legal-content{
        max-width:100%;
    }

    .legal-content h3{
        margin-top:28px;
        margin-bottom:10px;
        font-size:1rem;
    }

    .legal-content p{
        font-size:.9rem;
        line-height:1.6;
        margin-bottom:16px;
    }


   /* ---------- PERSONAL TRAINING ---------- */

.service-page {
    padding: 70px 20px 35px;
}



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

.service-hero {
    grid-template-columns: 1fr;
    gap: 10px;
}

.service-hero-text {
    order: 1;
    padding-right: 0;
}

.service-label {
    font-size: .64rem;
    letter-spacing: 1.4px;
    margin-bottom: 6px;
}

.service-hero h1 {
    font-size: 1.85rem;
    line-height: 1.08;
    letter-spacing: -.6px;
}

.service-line {
    margin: 9px 0;
}

.service-hero-text p {
    max-width: 100%;
    font-size: .8rem;
    line-height: 1.4;
}



/* =========================
   BILD
========================= */

.service-hero-image {
    order: 2;
    margin-top: -6px;
}

.service-hero-image img {
    height: 175px;
}


/* =========================
   VORTEILE
========================= */

.service-hero-info {
    order: 3;

    border-left: none;
    border-top: 1px solid #dedede;

    padding-left: 0;
    padding-top: 11px;

    margin-top: 2px;
}

.service-benefits .service-label {
    max-width: 100%;
    margin-bottom: 5px;
}

.service-benefit {
    padding: 7px 0;
}

.service-benefit p {
    font-size: .78rem;
    line-height: 1.35;
}


/* =========================
   FÜR WEN?
========================= */

.service-target {
    width: auto;
    margin-left: 0;
    margin-top: -4px;

    padding: 22px 18px;

    grid-template-columns: 1fr;
    gap: 14px;
}

.service-target-intro {
    padding-right: 0;

    border-right: none;
    border-bottom: 1px solid #d8d8da;

    padding-bottom: 14px;
}

.service-target-intro .service-label {
    margin-bottom: 7px;
}

.service-target-intro h2 {
    font-size: 1.35rem;
    line-height: 1.1;
}

.service-target-intro .service-line {
    margin: 11px 0;
}

.service-target-intro p {
    max-width: 100%;
    margin-top: 0;

    font-size: .76rem;
    line-height: 1.4;
}


/* =========================
   6 KOMPAKTE KARTEN
========================= */

.service-target-list {
    grid-template-columns: 1fr 1fr;

    column-gap: 7px;
    row-gap: 7px;

    min-width: 0;
}

.service-target-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    min-width: 0;

    gap: 0 7px;

    padding: 9px 10px;
    margin-bottom: 0;

    background: #ffffff;
    border-bottom: none;
    border-radius: 10px;

    box-shadow: 0 3px 12px rgba(0,0,0,.045);
}

.service-target-item:nth-last-child(-n+3) {
    border-bottom: none;
    margin-bottom: 0;
}

.service-target-item > div {
    display: contents;
}

.service-target-icon {
    width: 22px;
    height: 22px;

    font-size: .9rem;
}

.service-target-item h3 {
    margin: 0;

    font-size: .72rem;
    line-height: 1.15;
}

.service-target-item p {
    width: 100%;

    margin-top: 5px;

    font-size: .64rem;
    line-height: 1.25;
}


/* =========================
   ZUSAMMENARBEIT
========================= */

.service-process {
    padding: 25px 20px 28px;
}

.service-process-header {
    margin-bottom: 18px;
}

.service-process-header h2 {
    margin: 0;
    color: #b89555;
    font-size: 1.1rem;
    line-height: 1.1;
    letter-spacing: .3px;
}

.service-process-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
    row-gap: 16px;
}

.service-process-step {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.service-process-number {
    flex: 0 0 auto;
    font-size: 1.7rem;
    color: #b89555;
    font-weight: 500;
    line-height: 1;
}

.service-process-content {
    min-width: 0;
}

.service-process-content h3 {
    display: inline;
    margin: 0;
    color: #222;
    font-size: .62rem;
    line-height: 1.2;
    letter-spacing: .15px;
}

.service-process-content p {
    display: none;
}

.service-process-arrow {
    display: inline;
    padding: 0;
    margin-left: 4px;
    color: #b89555;
    font-size: .75rem;
    line-height: 1;
}




    /* ---------- ONLINE COACHING & STUDIO MIETEN ---------- */

    .online-page{
        padding:95px 20px 10px;
    }

    .online-page .service-back{
        margin-bottom:16px;
    }

    .online-hero{
        grid-template-columns:1fr;
        gap:24px;
    }

    .online-hero-text{
        padding-right:0;
    }

    .online-hero-text h1{
        font-size:1.9rem;
    }

    .online-hero-text p{
        max-width:100%;
        font-size:.88rem;
    }

    .online-intro-box{
        max-width:100%;
    }

    .online-hero-image img{
        height:220px;
    }

    .online-benefits{
        padding-left:0;
    }

    .online-benefits > .service-label{
        max-width:100%;
    }

    .online-process{
        width:auto;
        margin-left:0;
        margin-top:24px;
        margin-bottom:0;

        padding:30px 20px;

        grid-template-columns:1fr;
    }

    .online-process-intro{
        padding-right:0;
        border-right:none;

        padding-bottom:16px;
        border-bottom:1px solid #d8d8da;
        margin-bottom:20px;
    }

    .online-process-intro h2{
        max-width:100%;
        margin-top:0;
        font-size:1.3rem;
    }

    .online-process-intro p{
        max-width:100%;
    }

    .online-process-steps{
        grid-template-columns:1fr;
        gap:20px;
    }

    .online-process-content p{
        max-width:100%;
    }

    .online-process-arrow{
        display:none;
    }


    /* ---------- SPORT CAMPS ---------- */

    .camps-page{
        padding:95px 0 30px;
    }

    .camps-hero{
        padding:0 20px;
    }

    .camps-hero-grid{
        grid-template-columns:1fr;
        gap:24px;
    }

    .camps-hero-text h1{
        font-size:2rem;
    }

    .camps-hero-text > p{
        max-width:100%;
        font-size:.88rem;
    }

    .camps-team-box{
        max-width:100%;
    }

    .camps-slider{
        height:220px;
    }

    .camps-hero-info p{
        max-width:100%;
    }

    .camps-cta{
        flex-direction:column;
        align-items:flex-start;
        gap:14px;
    }

    .camps-cta a{
        transform:none;
    }

    .camps-benefits{
        grid-template-columns:1fr;
        margin-top:24px;
        min-height:auto;
    }

    .camps-dark-panel{
        min-height:auto;
    }

    .camps-dark-content{
        max-width:100%;
        padding:28px 20px;
    }

    .camps-benefit-area{
        padding:25px 20px;
    }

    .camps-benefit-grid{
        grid-template-columns:1fr;
        row-gap:18px;
    }

    .camps-quote{
        position:static;
        width:auto;
        margin:20px auto 0;
        transform:none;
        padding:0 20px 24px;
    }

    .camps-bottom{
        grid-template-columns:1fr;
        row-gap:10px;
        text-align:left;
        padding:20px;
    }

    .camps-bottom-text{
        max-width:100%;
    }

}

/* =====================================================
   MOBILE – "ZURÜCK"-LINK AUF ALLEN UNTERSEITEN
   kleiner und mit weniger Abstand nach oben
===================================================== */

@media (max-width: 768px) {

    .service-back{
        margin-top:-10px;
        margin-bottom:10px;
    }

    .service-back a{
        font-size:.72rem;
    }

    .online-page .service-back{
        margin-top:0;
        margin-bottom:14px;
    }

    .camps-hero-back{
        margin-top:0;
        margin-bottom:14px;
    }

    .camps-hero-back a{
        font-size:.72rem;
    }

    .athletik-back{
        margin-top:0;
        font-size:.72rem;
    }

    .fortschritt-back{
        margin-top:0;
        font-size:.72rem;
    }

}



/* =======================================================
   IMPRESSUM & DATENSCHUTZ: Navbar mobil hell mit Glas-Effekt
   (Desktop bleibt dunkel)
======================================================= */

@media (max-width: 768px){

    .navbar.navbar-static-dark,
    .navbar.navbar-static-dark.scrolled,
    .navbar.navbar-static-dark.hero-navbar{
        background: rgba(255,255,255,.75);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(0,0,0,.05);
    }

    .navbar.navbar-static-dark a,
    .navbar.navbar-static-dark.scrolled a,
    .navbar.navbar-static-dark.hero-navbar a{
        color: #1d1d1f;
    }

    .navbar.navbar-static-dark .logo img,
    .navbar.navbar-static-dark.scrolled .logo img,
    .navbar.navbar-static-dark.hero-navbar .logo img{
        filter: none;
    }

    .navbar.navbar-static-dark .menu-toggle,
    .navbar.navbar-static-dark.scrolled .menu-toggle,
    .navbar.navbar-static-dark.hero-navbar .menu-toggle{
        color: #1d1d1f;
    }

}
/* =========================================================
   KEVIN KRUK – MOBILE UNTERSEITEN
   Diesen gesamten Block ans Ende der vorhandenen style.css
   kopieren. Er wirkt nur auf Smartphones bis 768 px.
========================================================= */

@media (max-width: 768px) {
    /* ---------- GRUNDLAGE & PLATZHALTER ---------- */
    html {
        overflow-x: hidden;
    }

    body {
        width: 100%;
        overflow-x: hidden;
    }

    .service-page,
    .online-page,
    .camps-page,
    .athletik-page,
    .fortschritt-page,
    .legal-page {
        width: 100%;
        min-width: 0;
    }

    .service-page *,
    .online-page *,
    .camps-page *,
    .athletik-page *,
    .fortschritt-page *,
    .legal-page * {
        box-sizing: border-box;
        min-width: 0;
    }

    .service-hero-image,
    .online-hero-image,
    .camps-slider,
    .athletik-hero-photo,
    .athletik-card-image,
    .fortschritt-photo {
        background: #ececef;
    }

    .service-hero-image img,
    .online-hero-image img,
    .camp-slide img,
    .athletik-hero-photo img,
    .athletik-card-image img,
    .fortschritt-photo img {
        display: block;
        width: 100%;
        max-width: 100%;
        object-fit: cover;
    }

    /* ---------- NAVIGATION AUF ALLEN UNTERSEITEN ---------- */
    .navbar,
    .navbar.scrolled,
    .navbar.hero-navbar,
    .navbar.navbar-static-dark {
        height: 56px;
        padding: 0 18px;
        background: rgba(255, 255, 255, .9);
        border-bottom: 1px solid rgba(0, 0, 0, .06);
        backdrop-filter: blur(18px);
    }

    .navbar .logo {
        display: flex;
        align-items: center;
        min-width: 0;
    }

    .navbar .logo img,
    .navbar.scrolled .logo img,
    .navbar.hero-navbar .logo img,
    .navbar.navbar-static-dark .logo img {
        width: auto;
        max-width: 180px;
        height: 34px;
        object-fit: contain;
        filter: none;
    }

    .menu-toggle,
    .navbar.scrolled .menu-toggle,
    .navbar.hero-navbar .menu-toggle,
    .navbar.navbar-static-dark .menu-toggle {
        display: flex;
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        align-items: center;
        justify-content: center;
        color: #1d1d1f;
        font-size: 1.8rem;
        line-height: 1;
        cursor: pointer;
    }

    .navbar ul {
        counter-reset: mobile-menu-item;
        align-items: stretch;
        justify-content: flex-start;
        padding: 116px 32px 30px;
        gap: 0;
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(20px);
    }

    .navbar ul > li:not(.mobile-menu-footer) {
        counter-increment: mobile-menu-item;
    }

    .navbar ul li a {
        display: flex;
        align-items: baseline;
        color: #1d1d1f;
        font-size: clamp(1.55rem, 7vw, 1.9rem);
        font-weight: 300;
        line-height: 1.2;
        letter-spacing: 0;
    }

    .navbar ul > li:not(.mobile-menu-footer) > a::before {
        content: "0" counter(mobile-menu-item);
        width: 30px;
        margin-right: 12px;
        color: #b89555;
        font-size: .62rem;
        font-weight: 600;
        line-height: 1;
    }

    .navbar ul > li:not(.mobile-menu-footer) {
        padding: 9px 0;
    }

    .navbar ul.active li a {
        transform: translateY(0);
    }

    .navbar.menu-active .logo img {
        display: none;
    }

    .navbar.menu-active .logo {
        position: relative;
        z-index: 2100;
    }

    .navbar.menu-active .logo::after {
        content: "MENÜ";
        color: #8e8e93;
        font-size: .67rem;
        font-weight: 600;
        letter-spacing: 1.8px;
    }

    .mobile-menu-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        margin-top: auto;
        padding-top: 22px;
        border-top: 1px solid #e5e5e7;
    }

    .mobile-menu-footer > div {
        display: flex;
        flex-direction: column;
        gap: 7px;
    }

    .mobile-menu-footer > div:last-child {
        align-items: flex-end;
        text-align: right;
    }

    .mobile-menu-footer span {
        color: #8e8e93;
        font-size: .58rem;
        font-weight: 600;
        letter-spacing: 1.3px;
        text-transform: uppercase;
    }

    .navbar ul .mobile-menu-footer a,
    .mobile-menu-footer strong {
        color: #1d1d1f;
        font-size: .76rem;
        font-weight: 500;
        line-height: 1.2;
    }

    body.menu-open {
        position: fixed;
        inset-inline: 0;
        width: 100%;
        overflow: hidden;
        overscroll-behavior: none;
        touch-action: none;
    }

    /* ---------- GEMEINSAME ZURÜCK-LINKS ---------- */
    .service-back,
    .online-page .service-back,
    .camps-hero-back {
        margin: 0 0 10px;
    }

    .service-back a,
    .camps-hero-back a,
    .athletik-back,
    .fortschritt-back {
        display: inline-flex;
        align-items: center;
        min-height: 38px;
        color: #6e6e73;
        font-size: .75rem;
        line-height: 1.3;
        text-decoration: none;
    }

    /* ---------- PERSONAL TRAINING ---------- */
    .service-page {
        padding: 76px 20px 28px;
    }

    .service-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .service-hero-text {
        order: 1;
        padding: 0;
    }

    .service-label {
        margin-bottom: 8px;
        font-size: .68rem;
        line-height: 1.4;
        letter-spacing: 1.4px;
    }

    .service-hero h1 {
        font-size: clamp(1.9rem, 9vw, 2.45rem);
        line-height: 1.08;
        letter-spacing: 0;
    }

    .service-line {
        margin: 13px 0;
    }

    .service-hero-text p {
        margin-bottom: 10px;
        font-size: .9rem;
        line-height: 1.55;
    }

    .service-hero-image {
        order: 2;
        margin: 0;
        border-radius: 8px;
        overflow: hidden;
    }

    .service-hero-image img {
        height: clamp(210px, 62vw, 280px);
    }

    .service-hero-info {
        order: 3;
        margin: 0;
        padding: 18px 0 0;
        border-top: 1px solid #dedede;
        border-left: 0;
    }

    .service-benefits .service-label {
        margin-bottom: 9px;
    }

    .service-benefit {
        gap: 10px;
        padding: 10px 0;
    }

    .service-benefit p {
        font-size: .84rem;
        line-height: 1.45;
    }

    .service-target {
        width: 100%;
        margin: 0;
        padding: 30px 20px;
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .service-target-intro {
        padding: 0 0 18px;
        border-right: 0;
        border-bottom: 1px solid #d8d8da;
    }

    .service-target-intro h2 {
        font-size: 1.5rem;
        letter-spacing: 0;
    }

    .service-target-intro p {
        max-width: none;
        font-size: .84rem;
        line-height: 1.5;
    }

    .service-target-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .service-target-item,
    .service-target-item:nth-last-child(-n+3) {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        align-items: start;
        gap: 10px;
        margin: 0;
        padding: 14px;
        border: 0;
        border-radius: 6px;
        background: #ffffff;
        box-shadow: 0 3px 14px rgba(0, 0, 0, .05);
    }

    .service-target-item > div {
        display: block;
    }

    .service-target-icon {
        width: 34px;
        height: 34px;
        font-size: 1.25rem;
    }

    .service-target-item h3 {
        margin: 0 0 4px;
        font-size: .86rem;
        line-height: 1.3;
    }

    .service-target-item p {
        width: auto;
        margin: 0;
        font-size: .76rem;
        line-height: 1.45;
    }

    .service-process {
        padding: 32px 20px 42px;
    }

    .service-process-header h2 {
        font-size: 1.35rem;
        line-height: 1.2;
        letter-spacing: 0;
    }

    .service-process-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .service-process-step {
        gap: 14px;
        padding: 14px 0;
        align-items: flex-start;
        border-bottom: 1px solid #ececef;
    }

    .service-process-number {
        width: 36px;
        font-size: 1.65rem;
    }

    .service-process-content h3 {
        display: block;
        margin: 2px 0 5px;
        font-size: .82rem;
        line-height: 1.35;
    }

    .service-process-content p {
        display: block;
        max-width: none;
        font-size: .78rem;
        line-height: 1.5;
    }

    .service-process-arrow {
        display: none;
    }

    /* ---------- ONLINE COACHING & STUDIO MIETEN ---------- */
    .online-page {
        padding: 76px 20px 0;
    }

    .online-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .online-hero-text {
        padding: 0;
    }

    .online-hero-text h1 {
        font-size: clamp(1.9rem, 9vw, 2.4rem);
        line-height: 1.08;
        letter-spacing: 0;
    }

    .online-hero-text p,
    .online-intro-box p {
        max-width: none;
        font-size: .88rem;
        line-height: 1.55;
    }

    .online-intro-box {
        max-width: none;
    }

    .online-hero-image {
        border-radius: 8px;
        overflow: hidden;
    }

    .online-hero-image img {
        height: clamp(220px, 65vw, 290px);
    }

    .online-benefits {
        padding: 0;
    }

    .online-benefit {
        gap: 12px;
        padding: 11px 0;
    }

    .online-process {
        width: auto;
        margin: 30px -20px 0;
        padding: 32px 20px 40px;
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .online-process-intro {
        margin: 0;
        padding: 0 0 20px;
        border-right: 0;
        border-bottom: 1px solid #d8d8da;
    }

    .online-process-intro h2 {
        max-width: none;
        font-size: 1.45rem;
        letter-spacing: 0;
    }

    .online-process-intro p {
        max-width: none;
        font-size: .84rem;
    }

    .online-process-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .online-process-step {
        padding: 14px 0;
        border-bottom: 1px solid #dedede;
    }

    .online-process-content p {
        max-width: none;
    }

    .online-process-arrow {
        display: none;
    }

    /* ---------- SPORT CAMPS ---------- */
    .camps-page {
        padding: 76px 0 0;
    }

    .camps-hero {
        padding: 0 20px;
    }

    .camps-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .camps-hero-text h1 {
        margin-bottom: 14px;
        font-size: clamp(2rem, 10vw, 2.65rem);
        line-height: 1.05;
        letter-spacing: 0;
    }

    .camps-hero-text > .camps-label {
        margin-bottom: 8px;
    }

    .camps-hero-text > p,
    .camps-hero-info p,
    .camps-team-box p {
        max-width: none;
        font-size: .84rem;
        line-height: 1.48;
    }

    .camps-hero-info .camps-label {
        margin-bottom: 8px;
    }

    .camps-hero-info .camps-small-line {
        margin: 7px 0 11px;
    }

    .camps-hero-info p {
        margin-bottom: 9px;
        font-size: .8rem;
        line-height: 1.4;
    }

    .camps-hero-info > p:first-of-type {
        display: none;
    }

    .camps-team-box {
        max-width: none;
        margin-top: 11px;
        padding: 9px 12px;
        gap: 10px;
        background: #e9e9eb;
    }

    .camps-team-icon {
        width: 34px;
        height: 34px;
        font-size: 1.05rem;
    }

    .camps-team-box strong {
        margin-bottom: 1px;
        font-size: .82rem;
    }

    .camps-team-box p {
        font-size: .74rem;
        line-height: 1.35;
    }

    .camps-gallery-title {
        padding-bottom: 8px;
        font-size: .67rem;
        letter-spacing: 1.2px;
    }

    .camps-slider {
        height: clamp(195px, 60vw, 255px);
    }

    .camp-arrow {
        width: 40px;
        height: 40px;
    }

    .camps-cta {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 7px;
        margin-top: 10px;
        padding: 10px 12px;
        background: #ececef;
    }

    .camps-cta a {
        width: 100%;
        min-height: 39px;
        padding: 6px 10px;
        justify-content: center;
        transform: none;
        background: #cfcfd3;
        text-align: center;
    }

    .camps-benefits {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        margin-top: 24px;
    }

    .camps-dark-panel {
        min-height: 255px;
        overflow: hidden;
        background:
            linear-gradient(
                rgba(20, 20, 20, .12),
                rgba(20, 20, 20, .28)
            ),
            url("Bilder/campunten.jpg")
            center / cover no-repeat;
    }

    .camps-dark-panel::after {
        content: "";
        position: absolute;
        z-index: 1;
        inset: auto 0 0;
        height: 112px;
        pointer-events: none;
        background: linear-gradient(
            to bottom,
            rgba(245, 244, 242, 0) 0%,
            rgba(245, 244, 242, .18) 30%,
            rgba(245, 244, 242, .62) 66%,
            #f5f4f2 100%
        );
    }

    .camps-dark-content {
        max-width: none;
        padding: 20px 20px 52px;
        text-align: center;
    }

    .camps-dark-content h2 {
        margin: 0 0 14px;
        font-size: 1.85rem;
        line-height: 1.08;
        letter-spacing: 0;
    }

    .camps-dark-content p {
        max-width: 340px;
        margin: 0 auto;
        font-size: .76rem;
        line-height: 1.48;
    }

    .camps-benefit-area {
        position: relative;
        z-index: 3;
        margin-top: 0;
        padding: 14px 16px 42px;
        background: transparent;
    }

    .camps-benefit-header {
        margin-bottom: 5px;
        text-align: center;
    }

    .camps-benefit-header .camps-label {
        margin-bottom: 8px;
    }

    .camps-benefit-header .camps-small-line {
        margin: 5px auto 6px;
    }

    .camps-benefit-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .camps-benefit-item {
        min-width: 0;
        min-height: 0;
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr);
        align-items: center;
        column-gap: 10px;
        padding: 10px 12px;
        border: 1px solid #e2e2e4;
        border-radius: 11px;
        background: #ffffff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .055);
        text-align: left;
    }

    .camps-benefit-item:nth-child(odd) {
        border-right: 1px solid #e2e2e4;
    }

    .camps-benefit-item > div {
        grid-column: 2;
        width: 100%;
    }

    .camps-benefit-item .benefit-number {
        display: inline-flex;
        grid-row: 1;
        width: 28px;
        height: 28px;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(184, 134, 59, .32);
        border-radius: 8px;
        background: rgba(184, 134, 59, .08);
        font-size: .94rem;
        line-height: 1;
    }

    .camps-benefit-item h3 {
        margin-bottom: 3px;
        font-size: .76rem;
        line-height: 1.22;
    }

    .camps-benefit-item p {
        max-width: none;
        font-size: .74rem;
        line-height: 1.35;
    }

    .camps-benefit-item:first-child,
    .camps-benefit-item:last-child {
        min-height: 0;
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr);
        align-items: center;
        column-gap: 10px;
        padding: 10px 12px;
    }

    .camps-benefit-item:first-child .benefit-number,
    .camps-benefit-item:last-child .benefit-number {
        grid-row: 1;
    }

    .camps-benefit-item:first-child > div,
    .camps-benefit-item:last-child > div {
        grid-column: 2;
    }

    /* ---------- ATHLETIK TRAINING ---------- */
    .athletik-hero {
        height: auto;
        margin: 76px auto 0;
        padding: 0 20px;
        grid-template-columns: minmax(0, 1fr);
    }

    .athletik-hero-text {
        padding: 0;
    }

    .athletik-back {
        margin: 0 0 10px;
    }

    .athletik-label {
        margin-bottom: 8px;
        font-size: .68rem;
        letter-spacing: 1.4px;
    }

    .athletik-hero h1 {
        font-size: clamp(2.05rem, 10vw, 2.65rem);
        line-height: 1.05;
        letter-spacing: 0;
    }

    .athletik-hero-text > p {
        max-width: none;
        font-size: .88rem;
        line-height: 1.55;
    }

    .athletik-hero-photo {
        height: clamp(230px, 70vw, 310px);
        min-height: 0;
        margin-top: 24px;
    }

    .athletik-hero-photo::before {
        display: none;
    }

    .athletik-photo-label {
        top: 18px;
        right: 12px;
        padding: 7px 5px;
        background: rgba(255, 255, 255, .84);
    }

    .athletik-middle {
        height: auto;
        margin: 0;
    }

    .athletik-benefits {
        padding: 36px 20px;
    }

    .athletik-section-title span {
        font-size: .72rem;
        line-height: 1.4;
    }

    .athletik-benefits-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        margin-top: 20px;
    }

    .athletik-benefit,
    .athletik-benefit:first-child,
    .athletik-benefit:last-child {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        padding: 15px 0;
        border-right: 0;
        border-bottom: 1px solid #e5e5e5;
    }

    .athletik-benefit:last-child {
        border-bottom: 0;
    }

    .athletik-icon {
        grid-row: 1 / 3;
        margin: 0;
        font-size: 1.45rem;
    }

    .athletik-benefit h3 {
        margin: 0 0 4px;
        font-size: .86rem;
    }

    .athletik-benefit p {
        font-size: .8rem;
        line-height: 1.45;
    }

    .athletik-bottom {
        height: auto;
        margin: 0 auto 40px;
        grid-template-columns: minmax(0, 1fr);
    }

    .athletik-statement {
        height: auto;
        padding: 34px 20px;
    }

    .athletik-statement h2 {
        font-size: 1.35rem;
        line-height: 1.2;
        letter-spacing: 0;
    }

    .athletik-cards {
        height: auto;
        padding: 20px;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .athletik-card {
        height: auto;
        min-height: 190px;
        grid-template-columns: minmax(0, 1.05fr) minmax(110px, .95fr);
    }

    .athletik-card-text {
        padding: 18px 14px;
    }

    .athletik-card-text p {
        font-size: .78rem;
    }

    .athletik-card-image {
        height: 100%;
        min-height: 190px;
    }

    /* ---------- FORTSCHRITTSANALYSE ---------- */
    .fortschritt-split {
        height: auto;
        margin: 56px auto 0;
        grid-template-columns: minmax(0, 1fr);
    }

    .fortschritt-photo {
        height: clamp(230px, 68vw, 300px);
        order: 2;
    }

    .fortschritt-split > .fortschritt-photo {
        display: none;
    }

    .fortschritt-photo-mobile {
        display: block;
        width: calc(100% + 40px);
        height: clamp(190px, 54vw, 225px);
        margin: 16px -20px -4px;
    }

    .fortschritt-photo-mobile::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1;
        height: 48px;
        background: linear-gradient(
            to bottom,
            #ffffff 0%,
            rgba(255, 255, 255, .72) 28%,
            rgba(255, 255, 255, 0) 100%
        );
        pointer-events: none;
    }

    .fortschritt-photo-mobile::after {
        display: block;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 62px;
        background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .22) 42%,
            rgba(255, 255, 255, .82) 82%,
            #ffffff 100%
        );
        z-index: 1;
    }

    .fortschritt-photo-label {
        z-index: 2;
        left: 18px;
        bottom: 16px;
        padding: 6px 8px;
        background: rgba(0, 0, 0, .45);
        font-size: .6rem;
        line-height: 1.3;
    }

    .fortschritt-content {
        order: 1;
        height: auto;
        margin: 0;
        padding: 20px;
        gap: 16px;
    }

    .fortschritt-back {
        margin-bottom: 8px;
    }

    .fortschritt-label {
        font-size: .68rem;
        line-height: 1.4;
        letter-spacing: 1.4px;
    }

    .fortschritt-content h1 {
        margin: 7px 0 9px;
        font-size: 1.85rem;
        line-height: 1.08;
        letter-spacing: 0;
    }

    .fortschritt-intro {
        max-width: none;
        font-size: .86rem;
        line-height: 1.45;
    }

    .fortschritt-benefits-list {
        gap: 0;
    }

    .fortschritt-benefit-row {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 10px;
        padding: 9px 0;
        border-bottom: 1px solid #ececef;
    }

    .fortschritt-benefit-row i {
        align-self: center;
        font-size: 1.08rem;
    }

    .fortschritt-benefit-row h3,
    .fortschritt-benefit-row p {
        display: block;
        margin: 0;
    }

    .fortschritt-benefit-row h3 {
        margin-bottom: 2px;
        font-size: .82rem;
        line-height: 1.25;
    }

    .fortschritt-benefit-row p {
        font-size: .74rem;
        line-height: 1.35;
    }

    .fortschritt-equipment {
        display: block;
    }

    .fortschritt-equipment-label {
        display: block;
        margin-bottom: 7px;
        font-size: .68rem;
        line-height: 1.4;
    }

    .fortschritt-equipment-tags {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 7px;
    }

    .fortschritt-tag {
        width: 100%;
        padding: 7px 9px;
        font-size: .69rem;
        overflow-wrap: anywhere;
    }

    .fortschritt-banner {
        align-items: flex-start;
        margin-bottom: 42px;
        padding: 18px 16px;
        gap: 12px;
    }

    .fortschritt-banner-text .fortschritt-gold-line {
        margin-bottom: 8px;
    }

    .fortschritt-banner-text h2 {
        font-size: 1rem;
        line-height: 1.25;
    }

    .fortschritt-banner-steps {
        display: grid;
        width: 100%;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 9px 12px;
    }

    .fortschritt-banner-step {
        gap: 6px;
    }

    .fortschritt-banner-step p {
        font-size: .68rem;
        line-height: 1.35;
        white-space: normal;
    }

    /* ---------- IMPRESSUM & DATENSCHUTZ ---------- */
    .legal-page {
        min-height: auto;
        padding: 92px 20px 58px;
    }

    .legal-page .container,
    .legal-content {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .legal-page .section-label {
        margin-bottom: 10px;
        font-size: .66rem;
        line-height: 1.4;
        letter-spacing: 1.6px;
    }

    .legal-page h1 {
        margin-bottom: 30px;
        font-size: clamp(2rem, 10vw, 2.55rem);
        line-height: 1.08;
        letter-spacing: 0;
        overflow-wrap: anywhere;
    }

    .legal-content h3 {
        margin: 28px 0 9px;
        font-size: 1rem;
        line-height: 1.35;
    }

    .legal-content p,
    .legal-content li {
        font-size: .88rem;
        line-height: 1.65;
    }

    .legal-content a {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* ---------- FUSSBEREICH AUF UNTERSEITEN ---------- */
    .footer,
    .footer-legal {
        padding: 14px 20px 24px;
        border-top: 1px solid #ececef;
    }

    .footer-content,
    .footer-bottom {
        display: none;
    }

    .footer-mobile-premium {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: center;
        width: 100%;
    }

    .footer-mobile-logo {
        display: block;
        grid-column: 1 / -1;
        grid-row: 1;
        width: 102px;
        height: auto;
        justify-self: center;
        margin-bottom: 10px;
    }

    .footer-mobile-line {
        display: none;
    }

    .footer-mobile-info {
        display: contents;
    }

    .footer-mobile-info > div {
        min-width: 0;
        align-self: stretch;
        padding: 1px 6px 9px;
        text-align: center;
    }

    .footer-mobile-info > div:last-child {
        border-left: 1px solid #e4e4e7;
        border-right: 1px solid #e4e4e7;
    }

    .footer-mobile-premium h4 {
        margin: 0 0 5px;
        color: #b8863b;
        font-size: .58rem;
        line-height: 1.2;
        letter-spacing: .8px;
        text-transform: uppercase;
    }

    .footer-mobile-premium a {
        color: #55555a;
        font-size: .63rem;
        line-height: 1.45;
        text-decoration: none;
    }

    .footer-mobile-info a {
        display: block;
    }

    .footer-mobile-social {
        grid-column: 3;
        grid-row: 2;
        align-self: stretch;
        width: 100%;
        padding: 1px 6px 9px;
        text-align: center;
        border-top: 0;
        border-bottom: 0;
        border-left: 0;
    }

    .footer-mobile-social h4 {
        color: #b8863b;
        margin-bottom: 5px;
    }

    .footer-mobile-social div {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1px;
    }

    .footer-mobile-legal {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 4px 9px;
        width: 100%;
        padding-top: 9px;
        border-top: 1px solid #ececef;
    }

    .footer-mobile-legal a,
    .footer-mobile-legal span {
        color: #99999f;
        font-size: .52rem;
        line-height: 1.2;
    }

    .footer-mobile-legal span {
        flex-basis: 100%;
        text-align: center;
    }

    .footer-mobile-legal a + a::before {
        content: "·";
        margin-right: 9px;
        color: #99999f;
    }
}

/* Sehr kleine Smartphones */
@media (max-width: 380px) {
    .service-page,
    .online-page,
    .camps-hero,
    .athletik-hero,
    .fortschritt-content,
    .legal-page {
        padding-left: 16px;
        padding-right: 16px;
    }

    .service-target,
    .service-process,
    .online-process,
    .athletik-benefits,
    .athletik-statement,
    .athletik-cards,
    .camps-benefit-area,
    .camps-dark-content,
    .camps-quote {
        padding-left: 16px;
        padding-right: 16px;
    }

    .fortschritt-equipment-tags,
    .fortschritt-banner-steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .athletik-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .athletik-card-image {
        min-height: 175px;
    }
}

/* Weniger Abstand oberhalb des Zurück-Links auf den Leistungsseiten */
.service-page {
    padding-top: 80px;
}

.online-page {
    padding-top: 120px;
}

.camps-page {
    padding-top: 100px;
}

.athletik-hero {
    margin-top: 100px;
}

.fortschritt-split {
    margin-top: 115px;
}

.service-back,
.online-page .service-back,
.camps-hero-back,
.athletik-back,
.fortschritt-back {
    margin-bottom: 6px;
}

@media (max-width: 768px) {
    .service-page,
    .online-page {
        padding-top: 63px;
    }

    .camps-page {
        padding-top: 63px;
    }

    .athletik-hero {
        margin-top: 63px;
    }

    .fortschritt-split {
        margin-top: 47px;
    }

    .service-back,
    .online-page .service-back,
    .camps-hero-back,
    .athletik-back,
    .fortschritt-back {
        margin-bottom: 5px;
    }

    /* Personal Training: kompakter oberer Bereich */
    .service-page .service-hero {
        gap: 12px;
    }

    .service-page .service-label {
        margin-bottom: 5px;
    }

    .service-page .service-line {
        margin: 9px 0;
    }

    .service-page .service-hero-text p {
        margin-bottom: 6px;
        line-height: 1.45;
    }

    .service-page .service-hero-image {
        margin-top: -3px;
    }

    .service-page .service-hero-image img {
        height: clamp(165px, 48vw, 205px);
    }

    .service-target-personal {
        gap: 14px;
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .service-target-personal .service-target-intro {
        padding-bottom: 13px;
    }

    .service-target-personal .service-target-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .service-target-personal .service-target-item,
    .service-target-personal .service-target-item:nth-last-child(-n+3) {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        row-gap: 4px;
        min-height: 116px;
        padding: 11px 9px;
        align-content: start;
        text-align: center;
    }

    .service-target-personal .service-target-icon {
        width: 22px;
        height: 22px;
        font-size: 1rem;
    }

    .service-target-personal .service-target-item > div {
        display: contents;
    }

    .service-target-personal .service-target-item h3 {
        margin: 0;
        font-size: .76rem;
        line-height: 1.25;
    }

    .service-target-personal .service-target-item p {
        margin: 0;
        font-size: .68rem;
        line-height: 1.35;
    }

    .service-process-personal {
        padding-top: 22px;
        padding-bottom: 42px;
    }

    .service-process-personal .service-process-header {
        margin-bottom: 10px;
    }

    .service-process-personal .service-process-header h2 {
        color: #b89555;
        font-size: .68rem;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 1.4px;
    }

    .service-process-personal .service-process-list {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .service-process-personal .service-process-list::before {
        content: "";
        position: absolute;
        top: 18px;
        bottom: 18px;
        left: 14px;
        width: 1px;
        background: #b89555;
    }

    .service-process-personal .service-process-step {
        position: relative;
        display: grid;
        grid-template-columns: 29px minmax(0, 1fr);
        column-gap: 12px;
        align-items: start;
        padding: 7px 0 8px;
        border: 0;
    }

    .service-process-personal .service-process-number {
        position: relative;
        z-index: 1;
        display: grid;
        place-items: center;
        width: 29px;
        height: 29px;
        margin: 0;
        border: 1px solid #b89555;
        border-radius: 50%;
        background: #fff;
        color: #b89555;
        font-size: .6rem;
        font-weight: 600;
        line-height: 1;
    }

    .service-process-personal .service-process-number::before {
        content: none;
    }

    .service-process-personal .service-process-content h3 {
        margin: 1px 0 2px;
        font-size: .76rem;
        line-height: 1.25;
    }

    .service-process-personal .service-process-content p {
        font-size: .69rem;
        line-height: 1.35;
    }

    .service-process-personal .service-process-arrow {
        display: none;
    }

    /* ---------- ONLINE COACHING KOMPAKT ---------- */
    .online-page {
        padding-top: 63px;
        padding-bottom: 0;
    }

    .online-page .service-back {
        margin-bottom: 5px;
    }

    .online-hero {
        gap: 14px;
    }

    .online-hero-text .service-label {
        margin-bottom: 5px;
    }

    .online-hero-text h1 {
        font-size: 1.85rem;
        line-height: 1.08;
        letter-spacing: 0;
    }

    .online-hero-text .service-line {
        margin: 9px 0;
    }

    .online-hero-text > p {
        margin-bottom: 8px;
        font-size: .86rem;
        line-height: 1.45;
    }

    .online-intro-box {
        margin-top: 12px;
        padding: 11px 13px;
        gap: 11px;
    }

    .online-intro-icon {
        width: 34px;
        height: 34px;
        font-size: 1.05rem;
    }

    .online-intro-box strong {
        font-size: .78rem;
    }

    .online-intro-box p {
        font-size: .74rem;
        line-height: 1.4;
    }

    .online-hero-image {
        margin-bottom: 7px;
        border-radius: 8px;
    }

    .online-hero-image img {
        height: clamp(180px, 52vw, 220px);
    }

    .online-benefits > .service-label {
        margin-bottom: 8px;
    }

    .online-benefits {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        min-width: 0;
    }

    .online-benefits > .service-label {
        grid-column: 1 / -1;
    }

    .online-benefit {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr);
        align-items: center;
        gap: 2px 8px;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 8px 12px;
        background: #ffffff;
        border: 1px solid #e5e5e7;
        border-radius: 11px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, .09);
        text-align: left;
    }

    .online-benefit > div:last-child {
        display: contents;
    }

    .online-benefit-icon {
        width: 24px;
        height: 23px;
        grid-row: 1 / 3;
        align-self: center;
        font-size: 1.05rem;
    }

    .online-benefit h3 {
        grid-column: 2;
        margin: 0;
        font-size: .82rem;
        line-height: 1.2;
    }

    .online-benefit p {
        grid-column: 2;
        margin: 1px 0 0;
        font-size: .74rem;
        line-height: 1.28;
    }

    .online-process {
        margin-top: 18px;
        margin-bottom: 0;
        padding: 22px 20px 42px;
        gap: 0;
    }

    .online-process-intro {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: 0;
    }

    .online-process-steps {
        margin-top: -3px;
    }

    .online-process-intro .service-label {
        margin-bottom: 0;
    }

    .online-process-intro h2 {
        display: none;
    }

    .online-process-intro p {
        display: none;
    }

    .online-process-steps {
        position: relative;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .online-process-steps::before {
        content: "";
        position: absolute;
        top: 18px;
        bottom: 18px;
        left: 14px;
        width: 1px;
        background: #b89555;
    }

    .online-process-step {
        position: relative;
        display: grid;
        grid-template-columns: 29px minmax(0, 1fr);
        column-gap: 12px;
        align-items: start;
        padding: 7px 0 8px;
    }

    .online-process-number {
        position: relative;
        z-index: 1;
        display: grid;
        place-items: center;
        width: 29px;
        height: 29px;
        border: 1px solid #b89555;
        border-radius: 50%;
        background: #f0f0f2;
        color: #b89555;
        font-size: .6rem;
        font-weight: 600;
        line-height: 1;
    }

    .online-process-content h3 {
        margin: 1px 0 2px;
        font-size: .76rem;
        line-height: 1.25;
    }

    .online-process-content p {
        font-size: .69rem;
        line-height: 1.35;
    }

    /* ---------- ATHLETIK TRAINING KOMPAKT ---------- */
    .athletik-hero {
        gap: 12px;
        margin-top: 63px;
    }

    .athletik-back {
        margin-bottom: 5px;
    }

    .athletik-label {
        margin-bottom: 5px;
    }

    .athletik-hero h1 {
        margin-bottom: 9px;
        font-size: 1.85rem;
        line-height: 1.08;
    }

    .athletik-hero-text > p {
        margin-bottom: 0;
        font-size: .86rem;
        line-height: 1.45;
    }

    .athletik-hero-photo {
        height: clamp(180px, 52vw, 220px);
        margin-top: 4px;
    }

    .athletik-hero-photo::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        height: 58px;
        background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .22) 42%,
            rgba(255, 255, 255, .82) 82%,
            #ffffff 100%
        );
        pointer-events: none;
    }

    .athletik-photo-label {
        top: 12px;
        right: 10px;
        z-index: 2;
        padding: 5px 4px;
        font-size: .57rem;
    }

    .athletik-benefits {
        padding: 24px 20px;
    }

    .athletik-section-title span {
        font-size: .68rem;
        line-height: 1.4;
        letter-spacing: 1.4px;
    }

    .athletik-section-title .athletik-gold-line {
        margin-top: 8px;
    }

    .athletik-benefits-grid {
        margin-top: 10px;
    }

    .athletik-benefit,
    .athletik-benefit:first-child,
    .athletik-benefit:last-child {
        grid-template-columns: 30px minmax(0, 1fr);
        column-gap: 10px;
        padding: 9px 0;
    }

    .athletik-icon {
        align-self: center;
        font-size: 1.08rem;
    }

    .athletik-benefit h3 {
        margin-bottom: 2px;
        font-size: .76rem;
        line-height: 1.25;
    }

    .athletik-benefit p {
        font-size: .69rem;
        line-height: 1.35;
    }

    .athletik-bottom {
        margin-bottom: 0;
    }

    .athletik-statement {
        padding: 24px 20px;
    }

    .athletik-statement .athletik-gold-line {
        margin-bottom: 10px;
    }

    .athletik-statement h2 {
        font-size: 1.18rem;
        line-height: 1.22;
    }

    .athletik-cards {
        gap: 7px;
        padding: 18px 20px 54px;
    }

    .athletik-card {
        height: 104px;
        min-height: 104px;
        grid-template-columns: minmax(0, 1.25fr) minmax(88px, .75fr);
        overflow: hidden;
        border-radius: 8px;
    }

    .athletik-card-text {
        padding: 9px 11px;
    }

    .athletik-card-text h3 {
        margin-bottom: 3px;
        font-size: .72rem;
        line-height: 1.15;
    }

    .athletik-card-line {
        width: 22px;
        margin: 4px 0 5px;
    }

    .athletik-card-text p {
        font-size: .64rem;
        line-height: 1.25;
    }

    .athletik-card-image {
        height: 104px;
        min-height: 104px;
    }

    .athletik-card:nth-child(1) .athletik-card-image img,
    .athletik-card:nth-child(2) .athletik-card-image img {
        object-position: center 38%;
    }
}