/* =============================================================================
   joyfoto.de — index.css
   Nur für die Startseite. Wird NACH basis.css geladen.
   ========================================================================== */

/* --- Hero ------------------------------------------------------------------ */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; }
.hero__media { position:absolute; inset:0; z-index:0;
    background: linear-gradient(160deg, #2a211a 0%, #4A3B32 45%, #6d5647 100%); }
.hero__media .ph { position:absolute; inset:0; border:0; }
.hero__media .ph::after { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.4); background: rgba(0,0,0,.25); }
.hero__scrim { position:absolute; inset:0; z-index:1;
    background: linear-gradient(to top, rgba(20,15,11,.78) 0%, rgba(20,15,11,.25) 45%, rgba(20,15,11,.35) 100%); }
.hero__inner { position:relative; z-index:2; padding-block: 150px clamp(48px, 8vw, 96px); color:#fff; }
.hero__eyebrow { color: var(--gold-soft); }
.hero__eyebrow.kicker::before { background: var(--gold-soft); }
.hero__title {
    color:#fff; font-weight:400; margin: .5em 0 .4em;
    font-size: clamp(1.9rem, 5vw, 3.9rem); line-height: 1.07;
}
.hero__title em { font-style: italic; color: var(--gold-soft); }
.hero__lead { max-width: 600px; font-size: 1.05rem; color: rgba(255,255,255,.9); margin-bottom: 2.2rem; }
.hero__actions { display:flex; flex-wrap:wrap; gap:14px; }
.hero__cue { position:absolute; z-index:2; right: var(--gutter); bottom: 40px; writing-mode: vertical-rl;
    font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color: rgba(255,255,255,.7); }
.hero__cue::after { content:""; display:block; width:1px; height:44px; margin:12px auto 0; background: rgba(255,255,255,.5); }

/* --- Statement / Willkommen ------------------------------------------------ */
.statement { text-align:center; }
.statement__text {
    font-family: var(--serif); font-weight:400; font-size: clamp(1.6rem, 4vw, 2.9rem);
    line-height: 1.28; letter-spacing:-.01em; max-width: 980px; margin: 1.2rem auto 0;
}
.statement__text em { font-style: italic; color: var(--gold); }

/* --- Vertrauensreihe ------------------------------------------------------- */
.trust { display:grid; grid-template-columns: repeat(4, 1fr); }
.trust__item { padding: 8px 26px; border-left:1px solid var(--line-gold); }
.trust__item:first-child { border-left:0; padding-left:0; }
.trust__k { font-family:var(--serif); font-size: clamp(1.6rem,3.5vw,2.4rem); color: var(--gold); display:block; }
.trust__v { font-size:.82rem; letter-spacing:.05em; color: var(--espresso); }
.section--ink .trust__v { color: rgba(246,239,231,.8); }
.section--ink .trust__item { border-color: rgba(196,154,41,.3); }

/* --- Leistungen (editoriale Zeilen) ---------------------------------------- */
.svc { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 84px); align-items:center; }
.svc + .svc { margin-top: clamp(56px, 9vw, 130px); }
.svc--reverse .svc__media { order: 2; }
.svc__media { position: relative; }
.svc__media .ph { aspect-ratio: 4 / 5; border-radius: 2px; }
.svc__media .svc__img { width:100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; display:block; }
.svc__num { position:absolute; top:-28px; left:-14px; font-family:var(--serif); font-size: clamp(3rem,7vw,5.5rem);
    color: var(--gold); opacity:.9; line-height:1; z-index:2; }
.svc--reverse .svc__num { left:auto; right:-14px; }
.svc__name { font-size: clamp(1.8rem, 4vw, 2.8rem); margin:.4rem 0 0; }
.svc__desc { color: var(--espresso); margin: 1rem 0 1.8rem; max-width: 46ch; }
.svc__link { font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
    display:inline-flex; align-items:center; gap:.7em; border-bottom:1px solid var(--gold); padding-bottom:6px; transition: gap .3s, color .3s; }
.svc__link:hover { gap:1.2em; color:var(--gold); }
.svc__link .arw { transition: transform .3s; }
.svc__link:hover .arw { transform: translateX(4px); }

/* --- DJ & Live-Saxophon (Das gewisse Etwas) -------------------------------- */
.feature { position:relative; overflow:hidden; border-radius:2px;
    background: linear-gradient(135deg, var(--espresso), var(--ink)); color:var(--cream);
    display:grid; grid-template-columns: 1.1fr 1fr; align-items:stretch; }
.feature__body { padding: clamp(36px,5vw,64px); align-self:center; }
.feature__title { color:#fff; font-size: clamp(1.8rem,4vw,2.8rem); margin:.3em 0 0; }
.feature__title em { font-style:italic; color: var(--gold-soft); }
.feature__text { color: rgba(246,239,231,.85); margin: 1.2rem 0 2rem; max-width: 46ch; }
.feature__media { position:relative; min-height: 320px; }
.feature__media .ph { position:absolute; inset:0; border:0; }
.feature__media .ph::after { color:rgba(255,255,255,.7); border-color:rgba(255,255,255,.4); background:rgba(0,0,0,.25); }

/* --- Extras ---------------------------------------------------------------- */
.extras { display:grid; grid-template-columns: repeat(4,1fr); gap:14px; }
.extra { display:flex; flex-direction:column; gap:16px; padding:28px 24px; background:var(--paper);
    border:1px solid var(--line-gold); border-radius:12px; box-shadow: 0 10px 30px rgba(28,22,17,.06);
    transition: border-color .3s, transform .3s, box-shadow .3s; }
.extra:hover { border-color: var(--gold); transform: translateY(-5px); box-shadow: 0 18px 40px rgba(196,154,41,.18); }
.extra .ico { width:30px; height:30px; stroke:var(--gold); stroke-width:1.4; fill:none; }
.extra__name { font-family:var(--sans); font-size:.82rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.extra__more { margin-top:auto; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--taupe); }
.extra:hover .extra__more { color:var(--gold); }

/* --- Bewertungen ----------------------------------------------------------- */
.reviews { display:grid; grid-template-columns: repeat(2,1fr); gap: clamp(20px,3vw,28px); max-width:1000px; margin-inline:auto; }
.review__stars { color: var(--gold); letter-spacing:.18em; margin-bottom:.8rem; font-size:.95rem; }
.review { padding: 34px; background:var(--paper); border:1px solid var(--line-gold); border-radius:12px;
    box-shadow: 0 10px 30px rgba(28,22,17,.06); transition: transform .3s, box-shadow .3s; }
.review:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(196,154,41,.15); }
.review__mark { font-family:var(--serif); font-size:3rem; line-height:.6; color:var(--gold); }
.review__text { font-family:var(--serif); font-size:1.12rem; line-height:1.5; color:var(--ink); margin:.6rem 0 1.4rem; }
.review__author { font-size:.82rem; font-weight:600; letter-spacing:.04em; }
.review__meta { font-size:.74rem; color:var(--taupe); letter-spacing:.04em; }
.reviews__note { text-align:center; margin-top:1.6rem; font-size:.82rem; color:var(--taupe); }

/* --- Abschluss-CTA --------------------------------------------------------- */
.cta { position:relative; overflow:hidden; text-align:center; }
.cta__media { position:absolute; inset:0; background: linear-gradient(150deg, #2a211a, #4A3B32); }
.cta__scrim { position:absolute; inset:0; background: rgba(20,15,11,.55); }
.cta__inner { position:relative; z-index:2; padding-block: clamp(70px,10vw,120px); color:#fff; }
.cta__title { color:#fff; font-size: clamp(2rem,5vw,3.4rem); }
.cta__title em { font-style:italic; color:var(--gold-soft); }
.cta__actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:2rem; }

/* --- Responsiv (Startseite) ------------------------------------------------ */
@media (max-width: 900px) {
    .svc, .reviews { grid-template-columns:1fr; }
    .svc + .svc { margin-top:64px; }
    .svc--reverse .svc__media { order:0; }
    .svc__media .ph, .svc__media .svc__img { aspect-ratio: 16/11; }
    .trust { grid-template-columns:1fr 1fr; gap:24px 0; }
    .trust__item:nth-child(3) { border-left:0; padding-left:0; }
    .extras { grid-template-columns: 1fr 1fr; }
    .feature { grid-template-columns:1fr; }
    .feature__media { min-height: 240px; order:-1; }
}
@media (max-width: 540px) {
    .trust { grid-template-columns:1fr; }
    .trust__item { border-left:0; padding-left:0; border-top:1px solid var(--line-gold); padding-top:14px; }
    .trust__item:first-child { border-top:0; }
    .extras { grid-template-columns:1fr; }
    .hero__cue { display:none; }
}