/* ============================================================
   home.css — hero, Über-mich teaser, carousel, Leistungen card grid
   Part of the Praxis Dr. Kretzschmar theme. Rules moved verbatim
   from the original single style.css (see CLAUDE.md).
   ============================================================ */

/* ---------- Hero Section ---------- */
.hero {
    position: relative;
    width: 100%;
    height: 640px;
    background-image: var(--hero-img, url('../images/stone-bridge-fav.jpg'));
    background-size: cover;
    background-position: center;
    /*background-color: var(--color-green-300);*/
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    position: relative;   /* add */
    z-index: 1;           /* add */
    transform: translate(-134px, 136px);  /* X moves left, Y moves down */
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(19, 69, 16, 0.85) 0%,
        rgba(19, 69, 16, 0.15) 22%,
        rgba(19, 69, 16, 0.10) 78%,
        rgba(19, 69, 16, 0.85) 100%
    );
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: var(--color-ink-900);
    padding: 0 24px;
    max-width: 900px;
}

.hero-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 56px;
    font-weight: 400;
    color: var(--color-ink-900);
    margin-bottom: 32px;
    line-height: 1.1;
}

.hero-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-ink-900);
    margin-bottom: 10px;
}

.hero-role {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-ink-900);
    margin-bottom: 14px;
}

.hero-address {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-ink-900);
    margin-bottom: 36px;
}

/*.hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
}*/


/* ---------- Über mich Section ---------- */
.ueber-mich {
    background: var(--color-green-50);
    padding: 40px 80px;
}

.ueber-mich-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.ueber-mich-text {
    display: flex;
    flex-direction: column;
}

.ueber-mich-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 28px;
    font-weight: 400;
    color: var(--color-ink-900);
    margin-bottom: 14px;
}

.ueber-mich-divider {
    width: 56px;
    height: 2px;
    background: var(--color-accent-600);
    margin-bottom: 16px;
}

.ueber-mich-lead {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--color-ink-900);
    margin-bottom: 24px;
}

.ueber-mich-body {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-ink-900);
    opacity: 0.85;
    margin-bottom: 36px;
}

.ueber-mich-text .btn {
    align-self: flex-start;
}

/* Portrait with decorative corner frames */
.ueber-mich-image {
    position: relative;
    display: inline-block;
    justify-self: center;
}

.ueber-mich-image img {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    position: relative;
    z-index: 1;
}

.frame-corner {
    position: absolute;
    width: 56px;
    height: 56px;
    z-index: 0;
}

.frame-tl {
    top: -18px;
    left: -18px;
    border-top: 6px solid var(--color-accent-600);
    border-left: 6px solid var(--color-accent-600);
}

.frame-br {
    bottom: -18px;
    right: -18px;
    border-bottom: 6px solid var(--color-ink-900);
    border-right: 6px solid var(--color-ink-900);
}


/* ---------- Leistungen Section ---------- */
.leistungen {
    background: var(--color-green-50);
    padding: 100px 80px;
}

.leistungen-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 60px;
}

.leistungen-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 36px;
    font-weight: 400;
    color: var(--color-ink-900);
    margin-bottom: 16px;
}

.leistungen-divider {
    width: 56px;
    height: 2px;
    background: var(--color-accent-600);
    margin: 0 auto 32px;
}

.leistungen-intro {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-ink-900);
    opacity: 0.85;
}

.leistungen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1280px;
    margin: 0 auto;
}

.card {
    background: #ffffff;
    padding: 36px 32px 32px;
    border-top: 3px solid var(--color-accent-600);
    display: flex;
    flex-direction: column;
}

.card-icon {
    width: 48px;
    height: 48px;
    background: var(--color-green-100);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    color: var(--color-accent-600);
}

.card-icon img {
    width: 28px;
    height: 28px;
}

.card-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--color-ink-900);
    margin-bottom: 16px;
}

.card-text {
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-ink-900);
    opacity: 0.85;
    margin-bottom: 24px;
    flex-grow: 1;
}

.card-link {
    color: var(--color-accent-600);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    align-self: flex-start;
    transition: opacity 0.2s ease;
}

.card-link:hover {
    opacity: 0.7;
}


/* ============================================================
   HERO CAROUSEL
   6 slides, each: slides in from left (1s) → holds centred (6s)
                  → slides out to right (1s), overlapping the
                  next slide's slide-in so there is no empty gap.
   Total cycle: 6 × 7s = 42s, looping infinitely.
   ============================================================ */

.carousel {
    position: relative;
    width: 100%;
    max-width: 1000px;     /* don't upscale past the images' real size */
    margin: 0 auto;        /* centre the carousel */
    aspect-ratio: 3 / 2;   /* matches 1000x666 images — replaces fixed height */
    overflow: hidden;
    background: var(--color-green-100);
}

.carousel__track {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel__slide {
    position: absolute;
    inset: 0;                  /* fill the track */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: translateX(-100%);   /* start off-screen left */
    will-change: transform;
    animation: carousel-cycle 35s infinite;
}

/* Stagger each slide by 7 s so they take turns. */
.carousel__slide:nth-child(1) { animation-delay:   0s; }
.carousel__slide:nth-child(2) { animation-delay:   7s; }
.carousel__slide:nth-child(3) { animation-delay:  14s; }
.carousel__slide:nth-child(4) { animation-delay:  21s; }
.carousel__slide:nth-child(5) { animation-delay:  28s; }

/*
   Keyframe percentages of the full 35 s loop (5 slides × 7 s):
     0 s   →   0.000 %   off-screen left
     1 s   →   2.857 %   centred (finished sliding in)
     7 s   →  20.000 %   still centred (6 s hold complete)
     8 s   →  22.857 %   off-screen right (slide-out complete)
     35 s  → 100.000 %   waits off-screen right until loop restarts
   The slide-out (7 s → 8 s) overlaps the next slide's slide-in
   (its delay is 7 s), so the two images cross with no empty gap.
*/
@keyframes carousel-cycle {
    0%      { transform: translateX(-100%); }   /* off-screen left, waiting    */
    2.857%  { transform: translateX(0);     }   /* centred (1s slide-in)       */
    20%     { transform: translateX(0);     }   /* still centred (held to 7s)  */
    22.857% { transform: translateX(100%);  }   /* off-screen right (ends 8s)  */
    100%    { transform: translateX(100%);  }   /* stay off-right until restart */
}

/* Respect users who prefer reduced motion: hold the first image. */
@media (prefers-reduced-motion: reduce) {
    .carousel__slide {
        animation: none;
        transform: translateX(100%);
    }
    .carousel__slide:nth-child(1) {
        transform: translateX(0);
    }
}


/* ---------- Responsive (homepage) ---------- */
@media (max-width: 1024px) {
    .leistungen-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ueber-mich-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .ueber-mich-image {
        justify-self: center;
    }
}

@media (max-width: 640px) {
    /* Swap hero image to portrait crop for narrow screens */
    .hero {
        background-image: var(--hero-img-mobile, var(--hero-img, url('../images/stone-bridge-fav-portrait.png')));
        height: 720px;
    }

    /* Desktop nudges the CTA 134px left, which clips off-screen on narrow
       phones (e.g. iPhone 12, 390px). Center it horizontally here; keep the
       downward placement. */
    .hero-buttons {
        transform: translate(0, 136px);
    }

    .leistungen {
        padding: 60px 24px;
    }
    .leistungen-grid {
        grid-template-columns: 1fr;
    }

    .ueber-mich {
        padding: 60px 24px;
    }
}