/* =====================================================================
   pages/leistungen.css  –  DIENSTLEISTUNG (Portfolio, Inspo-Aufbau)
   ---------------------------------------------------------------------
   Großes Service-Panel + Video-Kacheln rechts, 3D-Tilt, Glow, Schatten,
   Elemente ragen leicht über den Rahmen. Motion = verspieltes Feld.
   ===================================================================== */

.page-leistungen {
  --ink: #eef0ff; --muted: rgba(238,240,255,.62);
  --bg:#0c0d12; --bg-2:#0c0d12; --fg:var(--ink); --creme:var(--ink); --creme-dim:var(--muted);
  --line: rgba(255,255,255,.1); background:#0c0d12;
}

/* ---- Szene-Hintergrund ---- */
.scene { position: fixed; inset: 0; z-index: -2; background:#0c0d12; overflow:hidden; }
.scene__layer { position:absolute; inset:-10%; opacity:0; transition:opacity 1s ease; will-change:opacity; }
.scene__layer.is-active { opacity:1; }
.scene__layer--motion {
  background:
    radial-gradient(60% 50% at 22% 28%, rgba(124,92,255,.32), transparent 70%),
    radial-gradient(55% 45% at 80% 75%, rgba(77,184,255,.20), transparent 70%),
    linear-gradient(160deg, #0e1024, #0a0b14 60%);
}
.scene__layer--youtube {
  background:
    radial-gradient(58% 50% at 78% 26%, rgba(255,59,48,.26), transparent 70%),
    radial-gradient(50% 45% at 18% 78%, rgba(255,122,77,.12), transparent 70%),
    linear-gradient(160deg, #1a0e10, #0b0809 60%);
}
.scene__layer--ugc {
  background:
    radial-gradient(60% 55% at 75% 28%, rgba(25,195,154,.30), transparent 70%),
    radial-gradient(55% 50% at 18% 80%, rgba(110,204,176,.30), transparent 70%),
    linear-gradient(160deg, #f3fbf7, #e3f4ec 65%);
}

/* Header-Kontrast bei heller Szene */
body.scene-light .header.is-scrolled { background: color-mix(in srgb,#fff 78%, transparent); border-bottom-color: rgba(0,0,0,.08); }
body.scene-light .nav__link { color:#14201c; }
body.scene-light .nav__link--cta { -webkit-text-fill-color: initial; }
body.scene-light .header__actions .btn { color:#14201c; border-color: rgba(0,0,0,.2); }
body.scene-light .nav-toggle span { background:#14201c; }

/* ---- Intro ---- */
.folio-intro { padding-top: clamp(8rem,18vh,12rem); padding-bottom: clamp(2rem,6vh,4rem); position:relative; z-index:1; }
.folio-intro__title { font-size: clamp(2.6rem,8vw,6.5rem); line-height:.98; color:var(--ink); }
.folio-intro__lead { max-width:46ch; margin-top:1.6rem; font-size:var(--fs-lead); color:var(--muted); }

/* =====================================================================
   PANELS
   ===================================================================== */
.panel { position:relative; z-index:1; padding-block: clamp(3rem,8vh,6.5rem); perspective:1700px; }
.panel--motion  { --accent:#7c5cff; --accent2:#4db8ff; --glow:rgba(124,92,255,.55); --ink:#eef0ff; --muted:rgba(238,240,255,.66);
  --card: linear-gradient(150deg, rgba(44,38,86,.78), rgba(15,16,30,.86)); --card-bd: rgba(150,130,255,.24); --c1:#8b6bff; --c2:#3f7bff; --scrim: linear-gradient(90deg, rgba(10,10,22,.92), transparent 70%); }
.panel--youtube { --accent:#ff453a; --accent2:#ff8a5c; --glow:rgba(255,69,58,.5); --ink:#fff5f4; --muted:rgba(255,245,244,.64);
  --card: linear-gradient(150deg, rgba(58,22,22,.78), rgba(12,9,9,.88)); --card-bd: rgba(255,90,80,.24); --c1:#ff5347; --c2:#ff8a5c; --scrim: linear-gradient(90deg, rgba(12,7,7,.92), transparent 70%); }
.panel--ugc     { --accent:#039d74; --accent2:#16c39a; --glow:rgba(22,195,154,.42); --ink:#13211c; --muted:#5d6c65;
  --card: linear-gradient(150deg, #ffffff, #eef9f3); --card-bd: rgba(3,157,116,.2); --c1:#6eccb0; --c2:#16c39a; --scrim: linear-gradient(90deg, rgba(255,255,255,.94), transparent 72%); }

.pcard {
  position: relative;
  display: grid; grid-template-columns: minmax(0,1fr) clamp(210px, 25vw, 310px);
  gap: clamp(1.2rem, 3vw, 2.8rem); align-items: stretch;
  max-width: 1180px;
  padding: clamp(1.4rem, 2.6vw, 2.4rem);
  color: var(--ink); font-family:"Poppins", var(--font-body);
  transform: perspective(1700px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));
  transform-style: preserve-3d; transition: transform .5s var(--ease-out);
}
.pcard--offset-left  { margin-right: auto; }
.pcard--offset-right { margin-left: auto; }
/* Geclippte Kartenfläche (Glow/Schatten/Highlight) */
.pcard__frame {
  position:absolute; inset:0; z-index:0; border-radius: clamp(22px, 2.2vw, 34px);
  background: var(--card); border:1px solid var(--card-bd); overflow:hidden;
  box-shadow: 0 60px 110px -45px rgba(0,0,0,.75), 0 0 70px -22px var(--glow), inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
}
.pcard__frame::after { content:""; position:absolute; inset:0; background: radial-gradient(120% 75% at 50% -10%, rgba(255,255,255,.12), transparent 55%); }

/* ---- Stage (großes Haupt-Rechteck) ---- */
.pcard__stage { position:relative; z-index:1; min-height: clamp(380px, 44vw, 540px); display:block; }
.pcard__circle {
  position:absolute; left: clamp(70px,9vw,150px); top:50%; transform: translateY(-50%);
  width: clamp(180px,22vw,300px); aspect-ratio:1; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--c1), var(--c2));
  box-shadow: 0 24px 60px -18px var(--glow); z-index:0;
}
.pcard__glow {
  position:absolute; left: clamp(70px,9vw,150px); top:50%; transform: translate(-10%,-50%);
  width: clamp(260px,30vw,420px); aspect-ratio:1; border-radius:50%;
  background: radial-gradient(circle, var(--glow), transparent 62%); filter: blur(22px); z-index:0;
  animation: pulse 5s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:.5;} 50%{opacity:.85;} }

.pcard__subject {
  position:absolute; left: clamp(60px,8vw,140px); bottom:-3%; z-index:1;
  width:auto; height:auto; max-width: clamp(220px,26vw,360px); max-height: 116%;
  filter: drop-shadow(0 26px 40px rgba(0,0,0,.5));
}
.pcard__subject--phone { max-height: 122%; max-width: clamp(180px,21vw,280px); }
.pcard__subject-link { position:absolute; inset:0; z-index:2; display:block; cursor:pointer; }
.pcard__subject-link .pcard__subject { left: 50%; }
/* UGC: Handy mittig-rechts, damit der Text unten links frei bleibt */
.panel--ugc .pcard__circle, .panel--ugc .pcard__glow { left: 48%; }
.panel--ugc .pcard__reelcue { left: 56%; }
/* UGC: kleinere Schrift, damit das Handy nicht die Sicht versperrt */
.panel--ugc .pcard__title { font-size: clamp(1.5rem, 2.6vw, 2.4rem); }
.panel--ugc .pcard__text { font-size: clamp(.8rem, .92vw, .92rem); max-width: 32ch; }

/* Reel-Hinweis (UGC) */
.pcard__reelcue {
  position:absolute; left: clamp(120px,16vw,260px); bottom:12%; z-index:3;
  display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .8rem .4rem .45rem; border-radius:100px;
  background: rgba(255,255,255,.94); color:#13211c; font-weight:600; font-size:.78rem; white-space:nowrap;
  box-shadow:0 12px 24px -10px rgba(0,0,0,.5); opacity:0; transform: translateY(6px); transition:opacity .35s, transform .35s var(--ease-out);
}
.pcard__reelcue .vid__play { position:static; width:24px; height:24px; background:var(--accent); opacity:1; transform:none; }
.pcard__reelcue .vid__play::after { border-left-color:#fff; }
.pcard__subject-link:hover .pcard__reelcue { opacity:1; transform: translateY(0); }
.pcard__subject-link:hover .pcard__subject { filter: drop-shadow(0 32px 46px rgba(0,0,0,.55)); }

/* Text (überlagert unten links) */
.pcard__scrim { position:absolute; inset:0; z-index:2; background: var(--scrim); border-radius: clamp(22px,2.2vw,34px); pointer-events:none; }
.pcard__info { position:absolute; left: clamp(1.4rem,2.5vw,2.4rem); bottom: clamp(1.4rem,2.5vw,2.4rem); right: 8%; z-index:3; }
.pcard__meta { display:flex; align-items:center; gap:.7rem; margin-bottom:.5rem; }
.pcard__no { font-family:"Poppins",sans-serif; font-weight:700; color:var(--accent); font-size:1.05rem; letter-spacing:.04em; }
.pcard__kicker { font-size:var(--fs-small); letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.pcard__title { font-family:"Poppins",sans-serif; font-weight:700; line-height:.98; font-size: clamp(1.9rem,3.8vw,3.4rem); letter-spacing:-.02em; color:var(--ink); text-transform:none; }
.pcard__text { margin-top:.8rem; color:var(--muted); font-size: clamp(.88rem,1.05vw,1.02rem); max-width: 44ch; }
.pcard__cta { display:inline-flex; align-items:center; gap:.55rem; margin-top:1.2rem; padding:.7rem 1.2rem; border-radius:100px;
  background: color-mix(in srgb, var(--accent) 18%, transparent); border:1px solid color-mix(in srgb, var(--accent) 48%, transparent);
  color:var(--ink); font-weight:600; font-size:.9rem; transition: background .3s, transform .3s var(--ease-out), box-shadow .3s; }
.pcard__cta:hover { background: color-mix(in srgb, var(--accent) 30%, transparent); transform: translateY(-2px); box-shadow:0 12px 26px -12px var(--glow); }

/* ---- Video-Kacheln (rechts) ---- */
.pcard__tiles { position:relative; z-index:1; display:flex; flex-direction:column; gap: clamp(.5rem,1vw,.85rem); justify-content:center; }
.vid { position:relative; display:block; aspect-ratio:16/9; border-radius:14px; overflow:hidden;
  border:1px solid var(--card-bd); background: rgba(0,0,0,.25); box-shadow:0 16px 30px -16px rgba(0,0,0,.65);
  --d: calc(var(--i,0) * .08s); transition: transform .45s var(--ease-out), box-shadow .45s, border-color .45s; }
.vid img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s var(--ease-out); }
.vid__play { position:absolute; inset:0; margin:auto; width:40px; height:40px; border-radius:50%; background: rgba(255,255,255,.9);
  display:grid; place-items:center; opacity:.85; transition:opacity .35s, transform .35s var(--ease-out), background .35s; }
.vid__play::after { content:""; border-left:11px solid var(--accent); border-top:6.5px solid transparent; border-bottom:6.5px solid transparent; margin-left:3px; }
.vid:hover { transform: translateY(-3px) scale(1.02); border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow:0 26px 44px -18px var(--glow); }
.vid:hover img { transform: scale(1.07); }
.vid:hover .vid__play { opacity:1; transform: scale(1.08); background:#fff; }

/* YouTube: vertikaler Stapel, eine Kachel ragt über den Rand */
.yt-stack .vid:nth-child(2) { margin-right: -8%; }
.yt-stack .vid:hover { transform: translateX(-5px) scale(1.03); }

/* UGC: 2x2 Reel-Grid (Hochformat) */
.ugc-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(.5rem,1vw,.8rem); align-content:center; }
.vid--reel { aspect-ratio: 9/16; border-radius:16px; }
.ugc-grid .vid:nth-child(1) { transform: translateY(8%); }
.ugc-grid .vid:nth-child(4) { transform: translateY(8%); }
.ugc-grid .vid:hover { transform: translateY(0) scale(1.04); }

/* Motion: verspielt versetztes 2x2-Raster (leicht gedreht, nicht gestapelt) */
.md-stack { display:grid; grid-template-columns:1fr 1fr; gap: clamp(.55rem,1.1vw,.95rem); align-content:center; }
.md-card { position:relative; aspect-ratio:16/10; transform-origin:center;
  box-shadow: 0 22px 38px -18px rgba(0,0,0,.7); transition: transform .45s var(--ease-out), box-shadow .45s; }
.md-card:nth-child(1){ transform: rotate(-4deg) translateY(-5%); z-index:2; }
.md-card:nth-child(2){ transform: rotate(3deg)  translate(6%, 4%); z-index:1; }
.md-card:nth-child(3){ transform: rotate(4deg)  translateY(5%); z-index:1; }
.md-card:nth-child(4){ transform: rotate(-3deg) translate(-4%, -3%); z-index:2; }
.md-card:hover { transform: rotate(0deg) translateY(-6px) scale(1.08); z-index:9; box-shadow:0 34px 60px -20px var(--glow); }

/* =====================================================================
   ANIMIERTER GOOGLY-CURSOR (Motion Design)
   ===================================================================== */
.md-cursor {
  position:absolute; right: -4%; top: -10%; z-index:5;
  width: clamp(120px, 16vw, 200px); aspect-ratio:1;
  animation: cursorFloat 5.5s ease-in-out infinite;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.45));
}
.md-cursor > img { width:100%; height:100%; display:block; }
@keyframes cursorFloat {
  0%,100%{ transform: translateY(0) rotate(0deg); }
  30%    { transform: translateY(-10px) rotate(-4deg); }
  60%    { transform: translateY(4px) rotate(3deg); }
}
.md-eye { position:absolute; transform: translate(-50%,-50%); }
.md-eye--1 { left:70.5%; top:41%; width:27%; height:27%; }
.md-eye--2 { left:85.5%; top:63.5%; width:30%; height:30%; }
.md-eye__ball { position:absolute; inset:0; border-radius:50%; background:#fff; overflow:hidden; }
.md-eye__pupil { position:absolute; left:50%; top:50%; width:50%; height:50%; border-radius:50%; background:#111;
  transform: translate(-50%,-50%); animation: pupilRoll 3.4s ease-in-out infinite; }
.md-eye--2 .md-eye__pupil { animation-delay:-1.1s; }
@keyframes pupilRoll {
  0%,100%{ transform: translate(-50%,-50%); }
  20%{ transform: translate(-18%,-50%); }
  45%{ transform: translate(-50%,-12%); }
  70%{ transform: translate(-82%,-72%); }
}
/* Zwinkern (nur ein Auge, sicher im Inneren) */
.md-eye__lid { position:absolute; inset:-6%; border-radius:50%; background:#36b3f9; transform: scaleY(0); transform-origin: top;
  animation: blink 5.5s ease-in-out infinite; }
@keyframes blink { 0%,90%,100%{ transform: scaleY(0);} 94%{ transform: scaleY(1);} }

/* After Effects Logo (schwebt, ragt leicht über den Rand) */
.md-ae { position:absolute; left: clamp(150px, 20vw, 270px); top: 16%; z-index:4;
  width: clamp(64px, 8vw, 108px); aspect-ratio:1;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.5)); animation: floatY 6s ease-in-out infinite .6s; }
@keyframes floatY { 0%,100%{ transform: translateY(0) rotate(-4deg);} 50%{ transform: translateY(-12px) rotate(4deg);} }

/* YouTube + DaVinci Resolve Logos auf dem roten Kreis */
.yt-logos { position:absolute; left: clamp(70px,9vw,150px); top:50%; transform: translateY(-50%);
  width: clamp(190px,24vw,320px); aspect-ratio:1; z-index:1; display:grid; place-items:center; }
.yt-logos__yt { width:64%; height:auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.5)); }
.yt-logos__resolve { position:absolute; right:-12%; bottom:-6%; width:46%; height:auto;
  border-radius:18px; filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)); animation: floatY 6.5s ease-in-out infinite; }

/* =====================================================================
   KONTAKT-CTA (zentriert) + Light-Sweep
   ===================================================================== */
.cta-final { position:relative; z-index:1; text-align:center; padding-block: clamp(5rem,15vh,9rem);
  --accent:#039d74; --accent2:#19c39a; --glow: rgba(22,195,154,.5); }
.cta-big {
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; gap: clamp(1rem,2.5vw,2rem); margin-inline:auto;
  padding: clamp(1.4rem,3vw,2.4rem) clamp(1.8rem,4vw,3.2rem); border-radius:26px; cursor:pointer;
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.7); color:var(--ink);
  animation: ctaGlow 4.5s ease-in-out infinite; transition: transform .4s var(--ease-out), box-shadow .4s ease;
}
@keyframes ctaGlow { 0%,100%{ box-shadow:0 30px 70px -30px rgba(0,0,0,.7), 0 0 38px -8px var(--glow);} 50%{ box-shadow:0 30px 70px -30px rgba(0,0,0,.7), 0 0 70px 2px var(--glow);} }
.cta-big__label { font-family:"Poppins",sans-serif; font-weight:700; line-height:1; text-align:left; font-size: clamp(1.5rem,4vw,3rem); letter-spacing:-.02em; }
.cta-big__icon { flex:0 0 auto; width: clamp(48px,6vw,70px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; color:#0c0d12;
  background: radial-gradient(circle at 35% 30%, var(--accent2), var(--accent)); box-shadow:0 14px 30px -10px var(--glow); transition: transform .45s var(--ease-out); }
.cta-big__icon svg { width:44%; height:44%; }
.cta-big__sweep { position:absolute; inset:0; z-index:-1; border-radius:inherit; overflow:hidden; }
.cta-big__sweep::before { content:""; position:absolute; top:-50%; left:-75%; width:50%; height:200%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); transition: left .7s var(--ease-out); }
.cta-big:hover { transform: translateY(-4px) scale(1.02); box-shadow:0 40px 90px -30px rgba(0,0,0,.75), 0 0 90px 4px var(--glow); }
.cta-big:hover .cta-big__sweep::before { left:125%; }
.cta-big:hover .cta-big__icon { transform: translateX(5px); }
body.scene-light .cta-big { background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.72)); border-color: rgba(3,157,116,.25); color:#13211c; }

/* =====================================================================
   MODAL
   ===================================================================== */
.modal { position:fixed; inset:0; z-index:9600; display:grid; place-items:center; padding:1.2rem; opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s; }
.modal.is-open { opacity:1; visibility:visible; }
.modal__backdrop { position:absolute; inset:0; background: rgba(6,8,12,.72); backdrop-filter: blur(8px); }
.modal__dialog { position:relative; width:min(620px,100%); max-height:90vh; overflow-y:auto;
  background: linear-gradient(160deg,#16181f,#101218); border:1px solid rgba(255,255,255,.1); border-radius:22px;
  padding: clamp(1.6rem,4vw,2.8rem); box-shadow:0 50px 100px -30px rgba(0,0,0,.8);
  transform: translateY(24px) scale(.96); opacity:0; transition: transform .5s var(--ease-out), opacity .5s; }
.modal.is-open .modal__dialog { transform:none; opacity:1; }
.modal__close { position:absolute; top:1rem; right:1rem; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  color:var(--creme); background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); transition: background .3s, transform .3s; }
.modal__close:hover { background: rgba(255,255,255,.14); transform: rotate(90deg); }
.modal__title { font-size: clamp(1.5rem,4vw,2.2rem); margin:.3rem 0 .5rem; }
.modal__lead { color:var(--muted); margin-bottom:1.6rem; font-size:var(--fs-small); }
.modal__actions { display:flex; flex-direction:column; gap:.8rem; align-items:flex-start; margin-top:.4rem; }
.modal .form__note { color:var(--muted); font-size:var(--fs-small); }
.modal { --accent:#19c39a; --muted: rgba(238,240,255,.62); }
.chips { display:flex; flex-wrap:wrap; gap:.55rem; }
.chip { position:relative; cursor:pointer; }
.chip input { position:absolute; opacity:0; pointer-events:none; }
.chip span { display:inline-block; padding:.5rem .9rem; border-radius:100px; font-size:.85rem; border:1px solid rgba(255,255,255,.16); color:var(--creme); transition: background .25s, border-color .25s, color .25s; }
.chip input:checked + span { background:var(--accent); border-color:var(--accent); color:#07120e; font-weight:600; }

/* ---- Footer slim ---- */
.footer__grid--slim { grid-template-columns: 1fr 1fr; max-width: 640px; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 900px) {
  .pcard { grid-template-columns: 1fr; }
  /* Visual oben als Band, Text fließt sauber darunter */
  .pcard__stage { min-height: 0; padding-top: clamp(230px, 60vw, 340px); }
  .pcard__circle, .pcard__glow { left: 50% !important; top: clamp(120px, 32vw, 185px); transform: translate(-50%, -50%); }
  .pcard__subject { left: 50% !important; transform: translateX(-50%); bottom: auto; top: 0; max-height: clamp(220px, 56vw, 320px); max-width: 70%; }
  .pcard__info { position: static; right: auto; }
  .pcard__scrim { display: none; }
  .pcard__reelcue { left: 50% !important; bottom: auto; top: clamp(150px, 42vw, 240px); }
  .md-cursor { right: 4%; top: 2%; width: clamp(96px, 26vw, 150px); }
  .md-stack { display:grid; grid-template-columns: 1fr 1fr; gap:.7rem; }
  .md-card { margin:0 !important; transform: rotate(var(--rot,0deg)) scale(.96); aspect-ratio:16/9; }
  .yt-stack { display:grid; grid-template-columns: 1fr 1fr; }
  .yt-stack .vid { margin:0 !important; }
}
@media (max-width: 560px) {
  .ugc-grid, .md-stack, .yt-stack { grid-template-columns: 1fr 1fr; }
  .cta-big { flex-direction:column; gap:1.1rem; text-align:center; }
  .cta-big__label { text-align:center; }
  .footer__grid--slim { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .pcard__glow, .cta-big, .md-cursor, .md-eye__pupil, .md-eye__lid { animation:none; }
  .scene__layer { transition:none; }
}