/*
 * Miarto Studio – Startseite
 *
 * Sektions-Layouts: Hero (4 Varianten), Portfolio-Vorschau, Leistungen,
 * Zahlen & Fakten, Über mich, Testimonials, Call-to-Action, Kontakt.
 * Dynamische Layout-Varianten (light/cream/dark/image) per Customizer.
 */

/* ---- Basis-Sektion ---- */

.ms-section {
    padding-top:    var(--ms-space-20);
    padding-bottom: var(--ms-space-20);
}

.ms-section--alt {
    background: var(--ms-surface);
}

.ms-section--dark {
    background: var(--ms-color-anthracite);
    color:      var(--ms-color-white);
}

.ms-section-cta {
    text-align:  center;
    margin-top:  var(--ms-space-12);
}

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

.ms-hero {
    position:            relative;
    min-height:          90vh;
    display:             flex;
    align-items:         center;
    background-color:    var(--ms-color-anthracite);
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
    overflow:            hidden;
    color:               var(--ms-color-white);
}

.ms-hero__overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        135deg,
        rgba( 44, 44, 44, 0.85 ) 0%,
        rgba( 44, 44, 44, 0.5 )  100%
    );
}

.ms-hero__content {
    position:   relative;
    z-index:    1;
    max-width:  720px;
    padding-top: var(--ms-space-16);
    padding-bottom: var(--ms-space-16);
}

.ms-hero__eyebrow {
    color: var(--ms-color-gold);
}

.ms-hero__title {
    font-family: var(--ms-font-heading);
    font-size:   clamp( 2.25rem, 6vw, 4rem );
    font-weight: 700;
    line-height: 1.15;
    color:       var(--ms-color-white);
    margin-bottom: var(--ms-space-5);
}

.ms-hero__subtitle {
    font-size:   clamp( 1rem, 2vw, 1.25rem );
    color:       rgba( 255, 255, 255, 0.8 );
    margin-bottom: var(--ms-space-8);
    line-height: 1.6;
}

.ms-hero__actions {
    display:   flex;
    gap:       var(--ms-space-4);
    flex-wrap: wrap;
}

.ms-hero--text-center .ms-hero__content {
    margin-inline: auto;
    text-align:    center;
}

.ms-hero--text-center .ms-hero__actions {
    justify-content: center;
}

.ms-hero--text-right .ms-hero__content {
    margin-left: auto;
    text-align:  right;
}

.ms-hero--text-right .ms-hero__actions {
    justify-content: flex-end;
}

/* Outline-Button auf dunklem Hintergrund */
.btn--outline-white {
    background:   transparent;
    color:        var(--ms-color-white);
    border:       2px solid rgba( 255, 255, 255, 0.6 );
    font-family:  var(--ms-font-body);
    font-size:    0.875rem;
    font-weight:  600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    padding:      var(--ms-space-4) var(--ms-space-8);
    border-radius: var(--ms-radius-pill);
    display:      inline-flex;
    align-items:  center;
    transition:   background var(--ms-transition), border-color var(--ms-transition);
}

.btn--outline-white:hover {
    background:   rgba( 255, 255, 255, 0.15 );
    border-color: var(--ms-color-white);
    color:        var(--ms-color-white);
}

/* Scroll-Indikator */
.ms-hero__scroll {
    position:   absolute;
    bottom:     var(--ms-space-8);
    left:       50%;
    transform:  translateX(-50%);
    color:      rgba( 255, 255, 255, 0.5 );
    animation:  ms-bounce 2s infinite;
    transition: color var(--ms-transition);
    z-index:    1;
}

.ms-hero__scroll:hover {
    color: var(--ms-color-gold);
}

@keyframes ms-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(6px); }
}

/* ============================================================
 * PORTFOLIO-VORSCHAU
 * Portfolio-Karten und Grid-Styles → portfolio.css
 * ============================================================ */

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

.ms-services__grid {
    display:               grid;
    grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
    gap:                   var(--ms-space-8);
}

.ms-service-card {
    background:    var(--ms-bg);
    border:        1px solid var(--ms-border);
    border-radius: var(--ms-radius-lg);
    padding:       var(--ms-space-8);
    text-align:    center;
    transition:    box-shadow var(--ms-transition), transform var(--ms-transition);
}

.ms-service-card:hover {
    box-shadow: var(--ms-shadow-md);
    transform:  translateY( -3px );
}

.ms-service-card__icon {
    width:        56px;
    height:       56px;
    margin:       0 auto var(--ms-space-5);
    color:        var(--ms-accent);
}

.ms-service-card__icon svg {
    width:  100%;
    height: 100%;
}

.ms-service-card__title {
    font-family:   var(--ms-font-heading);
    font-size:     1.125rem;
    margin-bottom: var(--ms-space-3);
    color:         var(--ms-text);
}

.ms-service-card__text {
    font-size: 0.9375rem;
    color:     var(--ms-text-subtle);
    margin:    0;
    line-height: 1.6;
}

/* ============================================================
 * ÜBER MICH
 * ============================================================ */

.ms-about__inner {
    display:     grid;
    grid-template-columns: 1fr 1fr;
    gap:         var(--ms-space-16);
    align-items: center;
}

.ms-about__image {
    position:      relative;
    border-radius: var(--ms-radius-lg);
    overflow:      hidden;
    aspect-ratio:  4 / 5;
}

.ms-about__img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.ms-about__placeholder {
    width:      100%;
    height:     100%;
    background: linear-gradient(
        135deg,
        var(--ms-color-anthracite) 0%,
        var(--ms-color-gold-dark)  100%
    );
}

.ms-about__content h2 {
    margin-bottom: var(--ms-space-5);
}

.ms-about__content .ms-lead {
    margin-bottom: var(--ms-space-8);
}

/* ============================================================
 * TESTIMONIALS
 * ============================================================ */

.ms-testimonials__grid {
    display:               grid;
    grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
    gap:                   var(--ms-space-6);
}

.ms-testimonial {
    background:    var(--ms-bg);
    border:        1px solid var(--ms-border);
    border-radius: var(--ms-radius-lg);
    padding:       var(--ms-space-8);
    margin:        0;
    display:       flex;
    flex-direction: column;
    gap:           var(--ms-space-5);
}

.ms-testimonial__quote-icon {
    width:  28px;
    height: 28px;
    color:  var(--ms-accent);
    flex-shrink: 0;
}

.ms-testimonial__text {
    font-family:  var(--ms-font-heading);
    font-size:    1rem;
    font-style:   italic;
    line-height:  1.7;
    color:        var(--ms-text);
    margin:       0;
    flex:         1;
}

.ms-testimonial__author {
    margin-top: auto;
}

.ms-testimonial__author cite {
    display:        flex;
    flex-direction: column;
    gap:            var(--ms-space-1);
    font-style:     normal;
}

.ms-testimonial__author strong {
    font-size:   0.9375rem;
    color:       var(--ms-text);
}

.ms-testimonial__author span {
    font-size: 0.8125rem;
    color:     var(--ms-text-subtle);
}

/* ============================================================
 * CALL-TO-ACTION
 * ============================================================ */

.ms-cta__inner {
    text-align: center;
    max-width:  640px;
    margin:     0 auto;
}

.ms-cta__title {
    font-size:     clamp( 1.75rem, 4vw, 2.5rem );
    color:         var(--ms-color-white);
    margin-bottom: var(--ms-space-5);
}

.ms-cta__text {
    font-size:     1.125rem;
    color:         rgba( 255, 255, 255, 0.75 );
    margin-bottom: var(--ms-space-8);
    line-height:   1.7;
}

/* ============================================================
 * RESPONSIVE
 * ============================================================ */

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

    .ms-about__image {
        aspect-ratio: 16 / 9;
    }

}

@media ( max-width: 600px ) {
    .ms-section {
        padding-top:    var(--ms-space-12);
        padding-bottom: var(--ms-space-12);
    }

    .ms-hero {
        min-height: 100svh;
    }

    .ms-hero__actions {
        flex-direction: column;
    }

    .ms-hero__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
 * DYNAMISCHE LAYOUT-VARIANTEN
 * ============================================================ */

.ms-section--image {
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
    position:            relative;
}

.ms-section--image::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: rgba( 44, 44, 44, 0.70 );
    z-index:    0;
}

.ms-section--image > .ms-container,
.ms-section--image > * {
    position: relative;
    z-index:  1;
}

.ms-section--dark h2,
.ms-section--dark h3,
.ms-section--image h2,
.ms-section--image h3 {
    color: var(--ms-color-white);
}

.ms-section--dark .ms-lead,
.ms-section--image .ms-lead {
    color: rgba( 255, 255, 255, 0.80 );
}

.ms-section--dark .ms-service-card {
    background:    rgba( 255, 255, 255, 0.06 );
    border-color:  rgba( 255, 255, 255, 0.12 );
}

.ms-section--dark .ms-service-card__title { color: var(--ms-color-white); }
.ms-section--dark .ms-service-card__text  { color: rgba( 255, 255, 255, 0.70 ); }

.ms-section--dark .ms-testimonial {
    background:   rgba( 255, 255, 255, 0.06 );
    border-color: rgba( 255, 255, 255, 0.12 );
}

.ms-section--dark .ms-testimonial__text            { color: var(--ms-color-white); }
.ms-section--dark .ms-testimonial__author strong   { color: var(--ms-color-white); }
.ms-section--dark .ms-testimonial__author span     { color: rgba( 255, 255, 255, 0.60 ); }

.ms-section--dark .ms-about__content h2    { color: var(--ms-color-white); }
.ms-section--dark .ms-about__content .ms-lead { color: rgba( 255, 255, 255, 0.80 ); }

/* ============================================================
 * HERO – VIDEO-VARIANTE
 * ============================================================ */

.ms-hero__video {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    z-index:    0;
}

.ms-hero--video .ms-hero__overlay,
.ms-hero--video .ms-hero__content,
.ms-hero--video .ms-hero__scroll {
    z-index: 1;
}

/* ============================================================
 * HERO – SPLIT-VARIANTE
 * ============================================================ */

.ms-hero--split {
    min-height:  unset;
    background:  var(--ms-bg);
    color:       var(--ms-text);
    overflow:    hidden;
}

.ms-hero__split-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 90vh;
}

.ms-hero--split-left .ms-hero__split-text  { order: 2; }
.ms-hero--split-left .ms-hero__split-image { order: 1; }

.ms-hero__split-text {
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    padding:         var(--ms-space-16) var(--ms-space-12);
}

.ms-hero--split .ms-hero__eyebrow { color: var(--ms-accent); }

.ms-hero--split .ms-hero__title {
    color:     var(--ms-text);
    font-size: clamp( 2rem, 4vw, 3.5rem );
}

.ms-hero--split .ms-hero__subtitle { color: var(--ms-text-subtle); }

.ms-hero__split-image {
    position: relative;
    overflow: hidden;
}

.ms-hero__split-img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.ms-hero__split-placeholder {
    width:      100%;
    height:     100%;
    background: linear-gradient( 135deg, var(--ms-color-anthracite) 0%, var(--ms-color-gold-dark) 100% );
}

@media ( max-width: 900px ) {
    .ms-hero__split-inner {
        grid-template-columns: 1fr;
        min-height:            auto;
    }

    .ms-hero--split-left .ms-hero__split-text  { order: 1; }
    .ms-hero--split-left .ms-hero__split-image { order: 2; }

    .ms-hero__split-image {
        aspect-ratio: 16 / 9;
        position:     relative;
    }

    .ms-hero__split-img {
        position: relative;
        width:    100%;
        height:   100%;
    }

    .ms-hero__split-text {
        padding: var(--ms-space-10) var(--ms-space-8);
    }
}

/* ============================================================
 * HERO – SLIDER-VARIANTE
 * ============================================================ */

.ms-hero--slider {
    position: relative;
    overflow: hidden;
}

.ms-hero__track {
    display:    flex;
    transition: transform 0.65s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.ms-hero__slide {
    flex:                0 0 100%;
    width:               100%;
    min-height:          90vh;
    display:             flex;
    align-items:         center;
    background-size:     cover;
    background-position: center;
    background-color:    var(--ms-color-anthracite);
    position:            relative;
}

.ms-hero__prev,
.ms-hero__next {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    z-index:         2;
    background:      rgba( 255, 255, 255, 0.12 );
    border:          1px solid rgba( 255, 255, 255, 0.25 );
    border-radius:   50%;
    width:           48px;
    height:          48px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--ms-color-white);
    cursor:          pointer;
    transition:      background var(--ms-transition), border-color var(--ms-transition);
    backdrop-filter: blur(4px);
}

.ms-hero__prev { left:  var(--ms-space-6); }
.ms-hero__next { right: var(--ms-space-6); }

.ms-hero__prev:hover,
.ms-hero__next:hover {
    background:    rgba( 201, 169, 110, 0.35 );
    border-color:  var(--ms-color-gold);
    color:         var(--ms-color-white);
}

.ms-hero__dots {
    position:   absolute;
    bottom:     var(--ms-space-8);
    left:       50%;
    transform:  translateX(-50%);
    display:    flex;
    gap:        var(--ms-space-3);
    z-index:    2;
}

.ms-hero__dot {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    background:    rgba( 255, 255, 255, 0.35 );
    border:        none;
    cursor:        pointer;
    padding:       0;
    transition:    background var(--ms-transition), transform var(--ms-transition);
}

.ms-hero__dot.is-active {
    background: var(--ms-color-gold);
    transform:  scale(1.4);
}

@media ( max-width: 600px ) {
    .ms-hero__prev,
    .ms-hero__next { display: none; }

    .ms-hero__slide { min-height: 100svh; }
}

/* ============================================================
 * ZAHLEN & FAKTEN
 * ============================================================ */

.ms-zahlen__grid {
    display:               grid;
    grid-template-columns: repeat( 4, 1fr );
    gap:                   var(--ms-space-8);
    text-align:            center;
}

.ms-stat-card__value {
    font-family:   var(--ms-font-heading);
    font-size:     var(--ms-font-size-5xl);
    font-weight:   var(--ms-font-weight-bold);
    line-height:   1;
    color:         var(--ms-accent);
    margin-bottom: var(--ms-space-3);
}

.ms-stat-card__label {
    font-size:      var(--ms-font-size-sm);
    font-weight:    var(--ms-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--ms-text-subtle);
}

.ms-section--dark .ms-stat-card__value { color: var(--ms-color-gold); }
.ms-section--dark .ms-stat-card__label { color: rgba( 255, 255, 255, 0.70 ); }

.ms-section--image .ms-stat-card__value { color: var(--ms-color-gold); }
.ms-section--image .ms-stat-card__label { color: rgba( 255, 255, 255, 0.80 ); }

@media ( max-width: 768px ) {
    .ms-zahlen__grid { grid-template-columns: repeat( 2, 1fr ); }
}

@media ( max-width: 480px ) {
    .ms-zahlen__grid { grid-template-columns: 1fr; }
}

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

.ms-kontakt__inner {
    display:     grid;
    grid-template-columns: 1fr 1fr;
    gap:         var(--ms-space-16);
    align-items: center;
}

.ms-kontakt__content h2 {
    margin-bottom: var(--ms-space-5);
}

.ms-kontakt__content .ms-lead {
    margin-bottom: var(--ms-space-8);
}

.ms-kontakt__info {
    display:        flex;
    flex-direction: column;
    gap:            var(--ms-space-4);
    margin-bottom:  var(--ms-space-8);
}

.ms-kontakt__info-item {
    display:         flex;
    align-items:     center;
    gap:             var(--ms-space-3);
    font-size:       var(--ms-font-size-lg);
    font-weight:     var(--ms-font-weight-medium);
    text-decoration: none;
    color:           var(--ms-text);
    transition:      color var(--ms-transition);
}

.ms-kontakt__info-item svg {
    width:       22px;
    height:      22px;
    flex-shrink: 0;
    color:       var(--ms-accent);
}

.ms-kontakt__info-item:hover { color: var(--ms-accent); }

.ms-section--dark .ms-kontakt__info-item { color: rgba( 255, 255, 255, 0.85 ); }
.ms-section--dark .ms-kontakt__info-item:hover { color: var(--ms-color-gold); }

.ms-kontakt__visual {
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--ms-accent);
    opacity:         0.9;
}

.ms-kontakt__visual svg {
    width:     100%;
    max-width: 360px;
    height:    auto;
}

@media ( max-width: 900px ) {
    .ms-kontakt__inner {
        grid-template-columns: 1fr;
        gap:                   var(--ms-space-10);
    }

    .ms-kontakt__visual { display: none; }
}