/* =========================================================================
   INCANTO — component styles
   ========================================================================= */

/* ---------------- Logo ---------------- */
.logo{ display:inline-flex; flex-direction:column; line-height:1; gap:3px; }
.logo-mark{
  font-family:var(--font-serif); font-style:italic; font-weight:600;
  font-size:calc(1.7rem * var(--ls,1)); letter-spacing:-0.01em;
  color:var(--tx); display:inline-flex; align-items:baseline;
}
.logo-dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); margin-left:3px; display:inline-block; box-shadow:0 0 12px var(--accent); }
.logo-sub{
  font-family:var(--font-mono); font-size:calc(0.6rem * var(--ls,1));
  text-transform:uppercase; letter-spacing:0.42em; color:var(--tx-45); margin-left:2px;
}

/* ---------------- Nav ---------------- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:200; transition:background .3s var(--ease), border-color .3s; border-bottom:1px solid transparent; }
.nav.is-scrolled{ background:rgba(7,5,9,0.78); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); border-bottom:1px solid var(--line); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:84px; gap:24px; }
.nav-links{ display:flex; gap:6px; flex:1; justify-content:center; }
.nav-link{ font-size:0.8rem; color:var(--tx-65); padding:8px 12px; display:inline-flex; align-items:center; gap:6px; transition:color .2s; letter-spacing:0.01em; }
.nav-link:hover{ color:var(--tx); }
.nav-num{ font-family:var(--font-mono); font-size:0.6rem; color:var(--accent); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-call{ display:inline-flex; align-items:center; gap:7px; font-size:0.82rem; color:var(--tx-90); }
.nav-call:hover{ color:var(--accent); }
.nav-call .material-symbols-outlined{ font-size:19px; }
.nav-anfrage{ padding:12px 22px; font-size:0.74rem; }
.nav-burger{ display:none; background:none; border:1px solid var(--line); color:var(--tx); width:46px; height:46px; align-items:center; justify-content:center; cursor:pointer; }
.nav-mobile{ display:none; }

@media (max-width:1180px){
  .nav-links{ display:none; }
  .nav-burger{ display:inline-flex; }
  .nav-call, .nav-anfrage{ display:none; }
  .nav-mobile{ display:block; max-height:0; overflow:hidden; background:rgba(7,5,9,0.96); backdrop-filter:blur(22px); transition:max-height .4s var(--ease); border-top:1px solid transparent; }
  .nav-mobile.open{ max-height:640px; border-top:1px solid var(--line); }
  .nav-mlink{ display:flex; align-items:center; gap:14px; padding:18px clamp(20px,5vw,72px); border-bottom:1px solid var(--line-faint); font-size:1.1rem; color:var(--tx-90); }
  .nav-mlink .nav-num{ font-size:0.7rem; }
  .nav-mobile-cta{ display:flex; gap:12px; padding:22px clamp(20px,5vw,72px); }
  .nav-mobile-cta .btn{ flex:1; justify-content:center; }
}

/* ---------------- Intro title card ---------------- */
.intro{ position:fixed; inset:0; z-index:9999; background:var(--bg); display:flex; align-items:center; justify-content:center; transition:transform 1s var(--ease-expo); cursor:pointer; }
.intro.lift{ transform:translateY(-101%); }
.intro-bars{ position:absolute; inset:0; pointer-events:none; }
.intro-bars span{ position:absolute; left:0; right:0; height:50%; background:#000; transition:transform 1.1s var(--ease-expo); }
.intro-bars span:first-child{ top:0; transform:translateY(-100%); }
.intro-bars span:last-child{ bottom:0; transform:translateY(100%); }
.intro.play .intro-bars span:first-child{ transform:translateY(-86%); }
.intro.play .intro-bars span:last-child{ transform:translateY(86%); }
.intro-mid{ text-align:center; position:relative; z-index:2; }
.intro-presents{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.4em; text-transform:uppercase; color:var(--tx-45); opacity:0; animation:fadeUp .8s var(--ease) .3s forwards; }
.intro-word{ font-size:clamp(4rem,17vw,13rem); color:var(--tx); margin:14px 0 6px; letter-spacing:0.02em; opacity:0; transform:translateY(40px); animation:fadeUp 1s var(--ease-expo) .5s forwards; background:linear-gradient(180deg,#fff, var(--accent)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.intro-sub{ font-family:var(--font-serif); font-style:italic; font-size:1.1rem; color:var(--tx-65); opacity:0; animation:fadeUp .8s var(--ease) .9s forwards; }
.intro-load{ width:200px; height:2px; background:var(--line); margin:34px auto 0; overflow:hidden; }
.intro-load i{ display:block; height:100%; width:0; background:var(--accent); animation:loadbar 2.3s var(--ease) .4s forwards; box-shadow:0 0 12px var(--accent); }
.intro-skip{ position:absolute; bottom:-70px; left:0; right:0; font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--tx-25); opacity:0; animation:fadeUp .6s ease 1.6s forwards; }
@keyframes fadeUp{ to{ opacity:1; transform:none; } }
@keyframes loadbar{ to{ width:100%; } }

/* ---------------- Hero ---------------- */
.hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-slot{ display:block; width:100%; height:100%; --img-anim:kenburns; animation:kenburns 22s ease-in-out infinite alternate; }
.hero-slot::part(empty){ }
@keyframes kenburns{ from{ transform:scale(1.04) translate(0,0); } to{ transform:scale(1.16) translate(-2%,-2%); } }
.hero-fade-side{ position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(7,5,9,0.94) 0%, rgba(7,5,9,0.72) 32%, rgba(7,5,9,0.25) 62%, rgba(7,5,9,0.55) 100%); }
.hero-fade-bottom{ position:absolute; left:0; right:0; bottom:0; height:55%; z-index:1; background:linear-gradient(180deg, transparent, var(--bg) 92%); }
.hero-vignette{ position:absolute; inset:0; z-index:1; box-shadow:inset 0 0 220px 60px rgba(0,0,0,0.7); pointer-events:none; }
.hero-reel{ position:absolute; top:108px; right:clamp(20px,5vw,72px); z-index:3; display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.28em; color:var(--tx-45); }
.reel-dot{ width:9px; height:9px; border-radius:50%; background:var(--glow-2); box-shadow:0 0 12px var(--glow-2); animation:blink 1.4s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:0.2; } }
.reel-tc{ color:var(--tx-65); }
.hero-content{ position:relative; z-index:3; padding-bottom:clamp(60px,11vh,130px); padding-top:140px; }
.hero-fade{ opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.hero-fade.in{ opacity:1; transform:none; }
.hero-h1{ margin:22px 0; font-size:0; }
.hero-h1 .poster{ font-size:clamp(3rem,9.5vw,9.4rem); color:var(--tx); }
.hero-accent{ font-size:clamp(2.8rem,9vw,9rem); line-height:1.08; padding-bottom:0.14em; background:linear-gradient(180deg, var(--accent-bright), var(--accent-deep)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-sub{ max-width:560px; font-size:clamp(1rem,1.5vw,1.2rem); color:var(--tx-65); margin:0 0 32px; }
.hero-actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.hero-wa{ display:inline-flex; align-items:center; gap:12px; font-size:0.85rem; color:var(--tx-65); padding-left:6px; }
.hero-wa:hover{ color:var(--accent); }
.scroll-cue{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:10px; font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--tx-45); }
.scroll-cue i{ width:1px; height:46px; background:linear-gradient(var(--accent), transparent); position:relative; overflow:hidden; }
.scroll-cue i::after{ content:""; position:absolute; top:0; left:0; width:100%; height:40%; background:var(--accent); animation:scrolldn 2.2s var(--ease) infinite; }
@keyframes scrolldn{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(260%);} }

/* ---------------- Section heads ---------------- */
.sec-head{ margin-bottom:clamp(40px,6vw,72px); }
.sec-head.between{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.sec-title{ font-size:clamp(2.4rem,6vw,5rem); line-height:1.0; margin:18px 0 0; color:var(--tx); }

/* ---------------- Events ---------------- */
.events{ background:linear-gradient(180deg, var(--bg), var(--surface)); }
.ev-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); }
.ev-card{ position:relative; background:var(--surface-1); transition:background .3s var(--ease), transform .4s var(--ease); }
.ev-card:hover{ background:var(--surface-2); transform:translateY(-6px); }
.ev-media{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.ev-slot{ display:block; width:100%; height:100%; transition:transform .8s var(--ease); }
.ev-card:hover .ev-slot{ transform:scale(1.06); }
.ev-kicker{ position:absolute; top:16px; left:16px; z-index:2; color:var(--tx-90); background:rgba(0,0,0,0.4); padding:5px 10px; backdrop-filter:blur(6px); }
.ev-bignum{ position:absolute; bottom:-10px; right:14px; z-index:2; font-size:5.5rem; color:var(--tx); opacity:0.16; line-height:1; }
.ev-body{ padding:30px 26px 34px; }
.ev-title{ font-size:2rem; margin:0; color:var(--tx); }
.ev-line{ font-size:1.3rem; color:var(--accent); margin:6px 0 14px; }
.ev-text{ font-size:0.95rem; color:var(--tx-65); margin:0 0 22px; }
.ev-cta{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.18em; color:var(--tx); transition:color .2s, gap .2s; }
.ev-card:hover .ev-cta{ color:var(--accent); gap:14px; }
.ev-cta .material-symbols-outlined{ font-size:18px; }
.anchor{ position:absolute; }

/* ---------------- Feature (Hochzeit / Firmenevents) ---------------- */
.feature{ background:var(--surface); }
.feature + .feature{ background:linear-gradient(180deg, var(--surface), var(--bg)); }
.feature-grid{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:clamp(32px,5vw,84px); align-items:start; }
.feature.flip .feature-media{ order:2; }
.feature.flip .feature-content{ order:1; }
.feature-media{ position:relative; position:sticky; top:120px; }
.feature-slot{ display:block; width:100%; aspect-ratio:4/5; border-right:4px solid var(--accent); background:var(--surface-1); }
.feature.flip .feature-slot{ border-right:none; border-left:4px solid var(--accent); }
.feature-frame-tl, .feature-frame-br{ position:absolute; width:84px; height:84px; pointer-events:none; }
.feature-frame-tl{ top:-14px; left:-14px; border-top:2px solid color-mix(in srgb,var(--accent) 50%, transparent); border-left:2px solid color-mix(in srgb,var(--accent) 50%, transparent); }
.feature-frame-br{ bottom:-14px; right:-14px; border-bottom:2px solid color-mix(in srgb,var(--accent) 50%, transparent); border-right:2px solid color-mix(in srgb,var(--accent) 50%, transparent); }
.feature-title{ font-size:clamp(1.7rem,3.1vw,2.5rem); line-height:1.18; color:var(--tx); margin:20px 0 8px; max-width:30ch; font-weight:500; text-wrap:pretty; }
.feature-points{ list-style:none; margin:24px 0 0; padding:0; }
.point{ display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,2.4vw,34px); padding:30px 0; border-top:1px solid var(--line); }
.point-num{ font-size:1.5rem; color:var(--accent); line-height:1; padding-top:4px; }
.point-h{ font-size:1.3rem; margin:0 0 8px; color:var(--tx); font-weight:600; }
.point-text{ margin:0; color:var(--tx-65); font-size:1rem; max-width:52ch; }
.point-cta{ background:var(--surface-1); border-top:2px solid var(--accent); margin-top:8px; padding:30px clamp(20px,2.4vw,30px); }
.point-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:20px; }

@media (max-width:960px){
  .feature-grid{ grid-template-columns:1fr; }
  .feature.flip .feature-media, .feature.flip .feature-content{ order:0; }
  .feature-media{ position:relative; top:0; max-width:460px; }
  .feature-title{ max-width:none; }
}

/* ---------------- Promise ---------------- */
.promise{ background:var(--surface); text-align:center; }
.promise-inner{ max-width:1000px; margin:0 auto; }
.promise-q{ margin:34px 0 26px; position:relative; }
.promise-q .serif-ital{ font-size:clamp(1.8rem,4.6vw,3.6rem); line-height:1.22; color:var(--tx); font-weight:500; }
.promise-mark{ position:absolute; top:-0.5em; left:50%; transform:translateX(-50%); font-size:7rem; color:var(--accent); opacity:0.28; }
.promise-by{ color:var(--tx-45); }

/* ---------------- Musik ---------------- */
.musik{ background:linear-gradient(180deg, var(--surface), var(--bg)); }
.musik-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(32px,5vw,80px); align-items:center; }
.musik-h2{ font-size:clamp(2.6rem,5.5vw,4.6rem); line-height:1.0; margin:18px 0 22px; color:var(--tx); }
.musik-p{ font-size:1.05rem; color:var(--tx-65); max-width:480px; margin:0 0 30px; }
.musik-tags{ display:flex; flex-wrap:wrap; gap:10px; }
.tag{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; padding:8px 14px; border:1px solid var(--line); color:var(--tx-65); transition:.25s var(--ease); }
.tag:hover{ border-color:var(--accent); color:var(--accent); }
.musik-right{ }
.deck{ background:var(--surface-1); border:1px solid var(--line); padding:30px; position:relative; overflow:hidden; }
.deck::before{ content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 80% 0%, var(--accent-wash), transparent 60%); pointer-events:none; }
.deck-top{ display:flex; align-items:center; justify-content:space-between; }
.deck-disc{ width:160px; height:160px; border-radius:50%; margin:34px auto; background:radial-gradient(circle at center, var(--surface-3) 0 18%, #000 18% 24%, var(--surface-2) 24%); position:relative; animation:spin 6s linear infinite; box-shadow:0 0 0 1px var(--line), 0 18px 60px rgba(0,0,0,0.6); }
.deck-disc i{ position:absolute; inset:18%; border-radius:50%; border:1px solid var(--line-faint); }
.deck-disc i:nth-child(2){ inset:30%; } .deck-disc i:nth-child(3){ inset:42%; background:var(--accent); box-shadow:0 0 16px var(--accent); }
@keyframes spin{ to{ transform:rotate(360deg); } }
.deck-meter{ display:flex; align-items:flex-end; gap:3px; height:60px; margin:18px 0; }
.deck-meter span{ flex:1; height:var(--h,40%); background:linear-gradient(var(--accent), var(--accent-deep)); animation:meter 1.3s ease-in-out infinite alternate; animation-delay:var(--d,0s); opacity:0.85; }
@keyframes meter{ from{ transform:scaleY(0.3); transform-origin:bottom; } to{ transform:scaleY(1); transform-origin:bottom; } }
.deck-foot{ display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:16px; }

/* ---------------- Gallery ---------------- */
.gallery{ background:var(--bg); }
.gallery-years{ color:var(--accent); }
.gal-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:14px; grid-auto-flow:dense; }
.gal-cell{ position:relative; overflow:hidden; background:var(--surface-1); }
.gal-cell.tall{ grid-row:span 2; }
.gal-cell.wide{ grid-column:span 2; }
.gal-slot{ display:block; width:100%; height:100%; transition:transform .9s var(--ease), filter .6s; filter:grayscale(0.25) contrast(1.02); }
.gal-cell:hover .gal-slot{ transform:scale(1.08); filter:grayscale(0); }
.gal-cap{ position:absolute; bottom:10px; left:12px; color:var(--tx-90); z-index:2; mix-blend-mode:difference; }
.gal-cell::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 60px rgba(0,0,0,0.5); pointer-events:none; }

/* ---------------- Quotes ---------------- */
.quotes{ background:linear-gradient(180deg, var(--bg), var(--surface)); }
.q-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); }
.q-card{ background:var(--surface-1); padding:38px 32px 32px; margin:0; position:relative; border-top:2px solid var(--accent); }
.q-num{ font-size:1.4rem; color:var(--accent); opacity:0.5; }
.q-text{ font-size:1.45rem; line-height:1.35; color:var(--tx); margin:14px 0 26px; }
.q-by{ display:flex; flex-direction:column; gap:5px; border-top:1px solid var(--line); padding-top:18px; }
.q-name{ font-weight:600; }
.q-ctx{ color:var(--accent); }

/* ---------------- About ---------------- */
.about{ background:var(--surface); }
.about-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(32px,5vw,80px); align-items:center; }
.about-media{ position:relative; }
.about-slot{ display:block; width:100%; aspect-ratio:4/5; border-right:4px solid var(--accent); }
.about-frame-tl, .about-frame-br{ position:absolute; width:84px; height:84px; pointer-events:none; }
.about-frame-tl{ top:-14px; left:-14px; border-top:2px solid color-mix(in srgb,var(--accent) 50%, transparent); border-left:2px solid color-mix(in srgb,var(--accent) 50%, transparent); }
.about-frame-br{ bottom:-14px; right:-14px; border-bottom:2px solid color-mix(in srgb,var(--accent) 50%, transparent); border-right:2px solid color-mix(in srgb,var(--accent) 50%, transparent); }
.about-h2{ font-size:clamp(2.8rem,6vw,5rem); line-height:0.98; margin:18px 0 18px; color:var(--tx); }
.about-lead{ font-size:1.5rem; line-height:1.4; color:var(--accent); margin:0 0 28px; }
.about-text p{ color:var(--tx-65); max-width:520px; }
.about-facts{ display:flex; gap:48px; margin-top:38px; }
.about-facts > div{ display:flex; flex-direction:column; gap:6px; }
.fact-n{ font-size:2.6rem; color:var(--tx); line-height:1; }
.fact-l{ color:var(--tx-45); }

/* ---------------- Kontakt ---------------- */
.kontakt{ background:var(--bg); text-align:center; position:relative; overflow:hidden; }
.kontakt-glow{ position:absolute; top:20%; left:50%; transform:translateX(-50%); width:760px; height:760px; max-width:120vw; background:radial-gradient(circle, var(--neon-wash), transparent 65%); pointer-events:none; }
.kontakt-inner{ position:relative; z-index:2; }
.kontakt-h2{ font-size:clamp(3rem,9vw,8rem); line-height:1.0; margin:24px 0 18px; color:var(--tx); }
.kontakt-sub{ max-width:560px; margin:0 auto 46px; color:var(--tx-65); font-size:1.1rem; }
.kontakt-phone{ display:inline-flex; flex-direction:column; gap:8px; align-items:center; margin-bottom:30px; transition:transform .3s var(--ease); }
.kontakt-phone:hover{ transform:scale(1.03); }
.kontakt-phone .kicker-mono{ color:var(--tx-45); }
.kontakt-phone-n{ font-size:clamp(2rem,5vw,3.4rem); background:linear-gradient(180deg,var(--accent-bright),var(--accent)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.kontakt-btns{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.kontakt-social{ margin-top:54px; display:flex; flex-direction:column; gap:18px; align-items:center; }
.social-links{ display:flex; gap:28px; flex-wrap:wrap; justify-content:center; }
.social-links a{ display:inline-flex; align-items:center; gap:9px; color:var(--tx-65); font-size:0.92rem; transition:color .2s; }
.social-links a:hover{ color:var(--accent); }
.social-links .material-symbols-outlined{ font-size:20px; }

/* ---------------- Footer ---------------- */
.footer{ background:var(--surface); border-top:1px solid var(--line); padding:60px 0 40px; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.footer-nav{ display:flex; gap:20px; flex-wrap:wrap; }
.footer-nav a{ font-size:0.84rem; color:var(--tx-65); transition:color .2s; }
.footer-nav a:hover{ color:var(--accent); }
.footer-legal{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.footer-legal a{ font-size:0.82rem; color:var(--tx-65); }
.footer-legal a:hover{ color:var(--accent); }

/* ---------------- Responsive ---------------- */
@media (max-width:960px){
  .ev-grid, .q-grid{ grid-template-columns:1fr; }
  .musik-grid, .about-grid{ grid-template-columns:1fr; }
  .gal-grid{ grid-template-columns:repeat(2,1fr); }
  .about-media{ max-width:440px; }
}
@media (max-width:560px){
  .gal-grid{ grid-template-columns:1fr; }
  .gal-cell.wide{ grid-column:span 1; }
  .hero-reel{ display:none; }
  .about-facts{ gap:28px; }
}

/* ---------------- Real photos (img drop-ins for former slots) ---------------- */
img.hero-slot, img.feature-slot, img.gal-slot, img.about-slot{ object-fit:cover; object-position:center; }
img.gal-slot{ height:100%; }

/* ---------------- Fix: width/height-Attribute dürfen die aspect-ratio-Box nicht überschreiben ---------------- */
/* Ohne dies erzwingt das HTML-height-Attribut (z.B. 2560px) eine viel zu hohe Box bei Feature-/About-Bildern. */
img.feature-slot, img.about-slot{ height:auto; }

/* Quotes: Masonry-Spalten (Karten behalten natürliche Höhe -> harmonisch trotz unterschiedlicher Textlänge) */
.q-grid{ display:block; column-count:3; column-gap:clamp(16px,2vw,26px); }
.q-card{ break-inside:avoid; -webkit-column-break-inside:avoid; width:100%; max-width:none;
  margin:0 0 clamp(16px,2vw,26px); display:inline-block; }
@media (max-width:960px){ .q-grid{ column-count:2; } }
@media (max-width:600px){ .q-grid{ column-count:1; } }