/* ============================================================
   rAIch ARTS — "WOW" Design Layer
   Editorial typography · gold gradients · depth · motion
   Loaded after each page's inline styles, so it wins the cascade.
   ============================================================ */

:root{
  --w-gold:#C9A84C;
  --w-gold-2:#E8CF8B;
  --w-gold-deep:#A8862F;
  --w-ink:#111B33;
  --w-paper:#FDFCFA;
  --w-shadow-sm:0 1px 2px rgba(15,26,53,.05),0 4px 12px rgba(15,26,53,.05);
  --w-shadow-md:0 2px 4px rgba(15,26,53,.05),0 12px 32px rgba(15,26,53,.09);
  --w-shadow-gold:0 8px 40px rgba(201,168,76,.22);
  --w-grad-gold:linear-gradient(100deg,#A8862F 0%,#C9A84C 35%,#EFD9A0 55%,#C9A84C 75%,#A8862F 100%);
}

/* ---------- Foundations ---------- */
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--w-paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:rgba(201,168,76,.28);color:var(--w-ink)}
html{scrollbar-color:rgba(201,168,76,.55) transparent}

/* ---------- Editorial display type ---------- */
.hero h1,.section-title,.cta-section h2,.cs-hero h1,
.founder-info h3,.article-hero h1,.blog-hero h1,.form-hero h1{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;
  letter-spacing:-0.02em;
}
.hero h1{font-size:clamp(48px,6.5vw,92px);line-height:1.02;font-weight:560}
.form-hero h1{font-weight:560;letter-spacing:-0.02em}
.form-hero h1 .gold,.blog-hero h1 .gold{
  font-style:italic;font-weight:640;
  background:var(--w-grad-gold);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:w-shimmer 6s ease-in-out infinite;
  padding-right:.06em;
}
.hero h1 .gold{
  font-style:italic;font-weight:640;
  background:var(--w-grad-gold);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:w-shimmer 6s ease-in-out infinite;
  padding-right:.06em;
}
@keyframes w-shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.section-title{font-weight:560;letter-spacing:-0.015em}
.cta-section h2{font-weight:560}
.cta-section h2 span{font-style:italic}

/* section labels: gold rule before */
.section-label{display:flex;align-items:center;gap:12px;font-weight:700}
.section-label::before{content:'';width:32px;height:1px;background:var(--w-grad-gold);flex-shrink:0}
.cta-section .section-label{justify-content:center}
.cta-section .section-label::after{content:'';width:32px;height:1px;background:var(--w-grad-gold);flex-shrink:0}

/* ---------- Nav ---------- */
nav{background:rgba(253,252,250,.72);backdrop-filter:blur(24px) saturate(1.4);transition:box-shadow .4s,background .4s}
nav.w-scrolled{background:rgba(253,252,250,.92);box-shadow:0 1px 0 rgba(15,26,53,.06),0 8px 32px rgba(15,26,53,.06)}
.nav-links a:not(.btn){position:relative}
.nav-links a:not(.btn):not(.dropdown-trigger)::after{
  content:'';position:absolute;left:0;bottom:-4px;width:100%;height:1.5px;
  background:var(--w-grad-gold);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.nav-links a:not(.btn):not(.dropdown-trigger):hover::after,
.nav-links a.active:not(.btn)::after{transform:scaleX(1);transform-origin:left}
.dropdown-menu{box-shadow:var(--w-shadow-md);border-radius:14px}

/* ---------- Language toggle (top right) ---------- */
nav .container{gap:14px}
.nav-logo{margin-right:auto}
.lang-toggle{display:inline-flex;align-items:center;gap:2px;padding:4px;border:1px solid rgba(201,168,76,.5);border-radius:100px;background:rgba(253,252,250,.7);backdrop-filter:blur(8px);cursor:pointer;flex-shrink:0;line-height:0;transition:border-color .3s,box-shadow .3s}
.lang-toggle:hover{border-color:var(--w-gold);box-shadow:0 2px 12px rgba(201,168,76,.2)}
.lang-toggle span{font-family:'Inter',system-ui,sans-serif;font-size:11px;font-weight:800;letter-spacing:.05em;line-height:1;padding:5px 9px;border-radius:100px;color:rgba(21,32,63,.5);transition:color .3s,background .3s}
.lang-toggle .lt-de{color:#fff;background:linear-gradient(135deg,#D4B35A,#B3903A)}
.lang-toggle .lt-en{background:transparent}
.lang-toggle[data-lang="en"] .lt-de{color:rgba(21,32,63,.5);background:transparent}
.lang-toggle[data-lang="en"] .lt-en{color:#fff;background:linear-gradient(135deg,#D4B35A,#B3903A)}
@media(max-width:768px){.lang-toggle{margin-right:4px}}

/* ---------- Hero: copy left, explainer video right ---------- */
.hero-grid{
  display:grid;grid-template-columns:1.06fr 1fr;gap:60px;align-items:center;
}
.hero-copy{min-width:0}
/* the headline was sized for the full container width; it now lives in a
   ~540px column, so cap it lower or "Wir machen deine Marke" over-wraps */
.hero-grid .hero h1,.hero .hero-grid h1,.hero-copy h1{
  font-size:clamp(38px,4.4vw,62px);max-width:none;
}
.hero-copy p{max-width:none;font-size:17px}

.hero-media{min-width:0;position:relative}
.hero-media::before{                       /* soft gold glow behind the card */
  content:'';position:absolute;inset:-14% -10%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(201,168,76,.20),transparent 68%);
  filter:blur(6px);
}
.video-card{
  position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;
  background:#0F1A35;
  border:1px solid rgba(15,26,53,.10);
  box-shadow:0 2px 6px rgba(15,26,53,.06),0 24px 60px rgba(15,26,53,.16);
  transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s;
}
.video-card:hover{transform:translateY(-4px);box-shadow:0 2px 6px rgba(15,26,53,.06),0 30px 72px rgba(15,26,53,.22)}
.video-card video{width:100%;height:100%;object-fit:cover;display:block}

/* click-to-watch overlay; hidden once the user starts it with sound */
.video-overlay{
  position:absolute;inset:0;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  border:0;cursor:pointer;font:inherit;color:#fff;
  /* scrim keeps the label readable over the moving footage underneath */
  background:linear-gradient(180deg,rgba(15,26,53,.30),rgba(15,26,53,.62));
  transition:opacity .35s ease,visibility .35s ease;
}
.video-play-icon{
  width:66px;height:66px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#D4B35A,#B3903A);
  box-shadow:0 8px 30px rgba(201,168,76,.45);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.video-play-icon svg{width:26px;height:26px;color:#15203F;margin-left:3px}
.video-overlay:hover .video-play-icon{transform:scale(1.09)}
.video-overlay-label{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  text-shadow:0 1px 10px rgba(15,26,53,.5);
}
.video-card.is-playing .video-overlay{opacity:0;visibility:hidden}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-media{order:2}
  .hero-copy h1{font-size:clamp(40px,9vw,56px)}
  .hero-media::before{inset:-8% -6%}
}

/* ---------- Brand logo wall ----------
   Every logo sits in an identical 160x64 slot, so the rhythm is even no matter
   how wide the mark is. Height is then tuned per logo from its aspect ratio
   (h = 46 / ratio^0.38) so a 10:1 wordmark and a square badge carry the same
   optical weight instead of one dwarfing the other. Uniform grayscale ties the
   set together; colour returns on hover. */
.marquee-section{
  padding:56px 0;
  border-top:1px solid rgba(15,26,53,.07);
  border-bottom:1px solid rgba(15,26,53,.07);
  background:linear-gradient(180deg,rgba(201,168,76,.028),transparent 60%);
}
.marquee-label{
  text-align:center;font-size:10px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(21,32,63,.42);margin-bottom:32px;
}
.marquee-viewport{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
/* defined here too: kontakt.html and the blog article never had a marquee,
   so they carry no @keyframes scroll of their own */
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.marquee-track{
  display:flex;align-items:center;gap:56px;width:max-content;
  animation:scroll 58s linear infinite;
}
.marquee-viewport:hover .marquee-track{animation-play-state:paused}

/* Natural widths + one constant gap. Fixed-width slots looked uneven because
   the marks range from 40px to 150px wide, so the visible gap swung between
   ~26px and ~136px. With a fixed gap every space is identical instead. */
.logo-item{
  flex:0 0 auto;height:64px;
  display:flex;align-items:center;justify-content:center;
}
.logo-item img{
  /* definite height, not max-height: an SVG carrying only a viewBox (no
     width/height attrs) resolves to 0 in a flex row under auto+max-height */
  width:auto;
  height:calc(var(--lh,40px) * var(--ls,1));
  max-width:150px;
  object-fit:contain;
  filter:grayscale(1);
  opacity:var(--lo,.6);
  transition:opacity .4s ease,transform .4s cubic-bezier(.22,1,.36,1);
}
/* opacity lift only — restoring colour would make the inverted white logos
   below flash back to white and vanish on this light background */
.logo-item:hover img{opacity:.95;transform:scale(1.06)}

/* Size + opacity per logo, solved from each mark's measured aspect ratio AND
   its ink density (share of the box actually covered in dark pixels). Density
   ran 0.067 (Ortega, thin line art) to 0.573 (Schwartau, solid) — an 8.5x
   spread — which is why equal-area sizing still looked lopsided. Sizing on
   area alone left perceived weight varying 8.9x; this brings it to 1.6x. */
.logo-item img[src$="gentlemens.png"]   {--lh:15px;--lo:.47}
.logo-item img[src$="ampeg.png"]        {--lh:18px;--lo:.51}
.logo-item img[src$="line6.png"]        {--lh:21px;--lo:.42}
.logo-item img[src$="shure.png"]        {--lh:22px;--lo:.45}
.logo-item img[src$="patrickreiser.png"]{--lh:25px;--lo:.71}
.logo-item img[src$="noisyrooms.png"]   {--lh:27px;--lo:.73}
.logo-item img[src$="gai.png"]          {--lh:32px;--lo:.62}
.logo-item img[src$="schwartau.svg"]    {--lh:36px;--lo:.48}
.logo-item img[src$="fischer.png"]      {--lh:38px;--lo:.71}
.logo-item img[src$="elixir.png"]       {--lh:43px;--lo:.55}
.logo-item img[src$="ortega.png"]       {--lh:45px;--lo:.82}
.logo-item img[src$="yamaha.svg"]       {--lh:45px;--lo:.72}
.logo-item img[src$="childcare.png"]    {--lh:46px;--lo:.60}
.logo-item img[src$="flbackline.png"]   {--lh:47px;--lo:.58}
.logo-item img[src$="iriedaily.png"]    {--lh:48px;--lo:.65}
.logo-item img[src$="thesocialhub.png"] {--lh:48px;--lo:.76}

/* These four are pure-white marks drawn for the old dark-navy theme — on the
   light page they were invisible. Inverting turns them dark so they read. */
.logo-item img[src$="ampeg.png"],
.logo-item img[src$="fischer.png"],
.logo-item img[src$="gentlemens.png"],
.logo-item img[src$="patrickreiser.png"]{filter:grayscale(1) invert(1)}

/* Shure's neon green desaturates to a very pale grey — darken it to match. */
.logo-item img[src$="shure.png"]{filter:grayscale(1) brightness(.5)}

@media(max-width:768px){
  .marquee-section{padding:40px 0}
  .logo-item{height:52px}
  /* --ls scales every per-logo --lh at once, keeping the tuned ratios intact */
  .marquee-track{--ls:.78;gap:36px;animation-duration:42s}
  .logo-item img{max-width:118px}
}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:100%}
}

/* ---------- Buttons: gradient + shine sweep ---------- */
.btn{
  background:linear-gradient(135deg,#D4B35A 0%,#C9A84C 45%,#B3903A 100%);
  position:relative;overflow:hidden;
  box-shadow:0 2px 8px rgba(201,168,76,.25),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s;
}
.btn::before{
  content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);transition:left .6s ease;
}
.btn:hover{background:linear-gradient(135deg,#DDBE66 0%,#CFAE52 45%,#BB9840 100%);transform:translateY(-2px) scale(1.02);box-shadow:var(--w-shadow-gold),inset 0 1px 0 rgba(255,255,255,.35)}
.btn:hover::before{left:130%}
.btn-outline{background:transparent;box-shadow:none}
.btn-outline:hover{background:rgba(201,168,76,.06);transform:translateY(-2px);box-shadow:none}
.btn-outline::before{display:none}

/* ---------- Hero atmosphere ---------- */
.hero{position:relative}
.hero::before{
  width:1000px;height:1000px;top:-320px;
  background:
    radial-gradient(circle at 30% 40%,rgba(201,168,76,.14) 0%,transparent 55%),
    radial-gradient(circle at 70% 60%,rgba(232,207,139,.10) 0%,transparent 60%);
  animation:w-drift 14s ease-in-out infinite alternate;
}
@keyframes w-drift{from{transform:translateX(-50%) translateY(0) rotate(0deg)}to{transform:translateX(-46%) translateY(24px) rotate(4deg)}}
.hero-badge{
  background:rgba(253,252,250,.8);backdrop-filter:blur(8px);
  border:1px solid rgba(201,168,76,.35);box-shadow:var(--w-shadow-sm);
  font-weight:600;letter-spacing:.02em;
}
.hero p{font-size:19px}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.hero-badge{margin-bottom:0}
.badge-ihk{
  color:var(--w-ink);font-weight:700;
  background:linear-gradient(135deg,rgba(201,168,76,.16),rgba(232,207,139,.10));
  border:1px solid rgba(201,168,76,.5);
  box-shadow:0 2px 12px rgba(201,168,76,.18);
}
.badge-ihk svg{width:14px;height:14px;color:var(--w-gold-deep);flex-shrink:0}
.hero-stats .stat-num{
  font-family:'Fraunces',Georgia,serif;font-weight:600;font-style:italic;
  background:var(--w-grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ---------- Cards: depth + lift ---------- */
.value-card,.service-card,.case-card,.testimonial-card,.blog-card,
.cs-result,.stat-card,.cs-quote{
  background:#FFFFFF;
  box-shadow:var(--w-shadow-sm);
  border:1px solid rgba(15,26,53,.07);
  border-radius:20px;
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s,border-color .45s;
}
.value-card:hover,.case-card:hover,.blog-card:hover,.testimonial-card:hover{
  transform:translateY(-6px);
  border-color:rgba(201,168,76,.45);
  box-shadow:var(--w-shadow-md),0 16px 48px rgba(201,168,76,.12);
  background:#FFFFFF;
}
.service-card:hover{transform:translateY(-3px);border-color:rgba(201,168,76,.45);box-shadow:var(--w-shadow-md);background:#fff}
.value-icon{
  background:linear-gradient(135deg,rgba(201,168,76,.16),rgba(232,207,139,.10));
  box-shadow:inset 0 0 0 1px rgba(201,168,76,.18);
  border-radius:14px;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.value-card:hover .value-icon{transform:scale(1.08) rotate(-4deg)}
.service-num{
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:600;
  color:transparent;background:var(--w-grad-gold);-webkit-background-clip:text;background-clip:text;
  opacity:.5;transition:opacity .3s;
}
.service-card:hover .service-num{opacity:1}
.case-visual{overflow:hidden}
.case-visual img{transition:transform .8s cubic-bezier(.22,1,.36,1)!important}
.case-card:hover .case-visual img{transform:scale(1.06)}
.case-body h3,.blog-body h3{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-0.01em}

/* gold top edge on result/stat tiles */
.cs-result,.stat-card{position:relative;overflow:hidden}
.cs-result::before,.stat-card::before{
  content:'';position:absolute;top:0;left:20%;right:20%;height:2px;
  background:var(--w-grad-gold);border-radius:0 0 4px 4px;opacity:.7;
}
.cs-result .result-num,.stat-card .stat-num{
  font-family:'Fraunces',Georgia,serif;font-weight:600;font-style:italic;
  background:var(--w-grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ---------- Process ---------- */
.step-num{
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:600;
  background:#fff;box-shadow:var(--w-shadow-sm);border:1.5px solid rgba(201,168,76,.35);
  transition:all .45s cubic-bezier(.22,1,.36,1);
}
.process-step:hover .step-num{
  background:linear-gradient(135deg,#D4B35A,#B3903A);color:#fff;
  transform:scale(1.1);box-shadow:var(--w-shadow-gold);
}
.process-step::after{background:linear-gradient(90deg,rgba(201,168,76,.5),rgba(201,168,76,.15))}

/* ---------- Testimonials ---------- */
.testimonial-card{position:relative}
.testimonial-card::before{
  content:'\201C';position:absolute;top:10px;right:24px;
  font-family:'Fraunces',Georgia,serif;font-size:96px;line-height:1;
  color:rgba(201,168,76,.14);pointer-events:none;
}
.testimonial-card .quote{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:420;font-size:16.5px;color:var(--w-ink)}

/* ---------- FAQ ---------- */
.faq-item{transition:background .3s;border-radius:12px}
.faq-item.open{background:rgba(201,168,76,.045)}
.faq-item .faq-q{padding-left:12px;padding-right:12px}
.faq-item .faq-a p{padding-left:12px;padding-right:12px}

/* ---------- CTA section ---------- */
.cta-section{position:relative;overflow:hidden}
.cta-section::before{
  width:900px;height:500px;
  background:radial-gradient(ellipse,rgba(201,168,76,.16) 0%,transparent 65%);
}

/* ---------- Gold availability marquee ---------- */
.avail-marquee{background:linear-gradient(90deg,#B3903A,#C9A84C 30%,#D9BC6B 50%,#C9A84C 70%,#B3903A)}

/* ---------- Footer ---------- */
footer{background:linear-gradient(180deg,transparent,rgba(201,168,76,.05));border-top:1px solid rgba(201,168,76,.2)}

/* ---------- Reveal choreography ---------- */
.fade-in{opacity:0;transform:translateY(36px);filter:blur(6px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1),filter .9s}
.fade-in.visible{opacity:1;transform:none;filter:none}
.w-reveal{opacity:0;transform:translateY(28px);filter:blur(4px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1),filter .8s;transition-delay:var(--w-delay,0s)}
.w-reveal.w-in{opacity:1;transform:none;filter:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .fade-in,.w-reveal{opacity:1;transform:none;filter:none}
}
@media(max-width:768px){
  .hero h1{font-size:clamp(40px,10vw,56px)}
}