/*
Theme Name: PURA Erlebnismanufaktur
Theme URI: https://www.pura-erlebnis.de
Author: Leo Skull
Author URI: https://www.leo-skull.de
Description: Markenkonformes, SEO-optimiertes WordPress-Theme fuer PURA Die Erlebnismanufaktur. Aufgebaut nach Styleguide 2026 (Raleway, Pink, Bordeaux, Warm Sand, Grau).
Version: 0.26.0
Update URI: https://wpu.leo-skull.de/pura-erlebnismanufaktur/pura-erlebnismanufaktur.json
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: pura
*/

/* ---------- Raleway lokal gehostet (Variable Font, DSGVO) ---------- */
@font-face{
  font-family:'Raleway';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('assets/fonts/raleway-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --pink:#D2005D;       /* RGB 210/0/93  */
  --pink-deep:#b00050;
  --bordeaux:#6B0520;   /* RGB 107/5/32  */
  --bordeaux-2:#560418;
  --black:#161616;      /* gewohntes Schwarz (Styleguide: Logo auf Schwarz) */
  --black-2:#0e0e0e;
  --sand:#ECE0CB;       /* RGB 236/224/203 */
  --sand-light:#FBF6EC;
  --sand-deep:#e2d3ba;
  --grau:#57564A;       /* RGB 87/86/74  */
  --ink:#2c2722;
  --muted:#6f6a5e;
  --line:#ddcfb9;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Raleway',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--sand);
  color:var(--ink);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 30px}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:16px;background:#fff;padding:10px 16px;border-radius:8px;z-index:9999}

/* grain */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- nav ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;transition:.4s}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;padding:22px 30px;transition:.4s}
.site-header.scrolled{background:rgba(236,224,203,.92);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.site-header.scrolled .bar{padding:13px 30px}
.brand{display:flex;align-items:center}
.brand img,.brand svg{height:46px;width:auto;transition:height .4s;display:block}
.site-header.scrolled .brand img,.site-header.scrolled .brand svg{height:38px}
.brand .l-dark{display:none}
.site-header.scrolled .brand .l-light{display:none}
.site-header.scrolled .brand .l-dark{display:block}
.main-nav{display:flex;align-items:center;gap:32px;font-weight:500;font-size:14.5px;letter-spacing:.02em}
.main-nav a:not(.btn){position:relative;color:var(--sand)}
.site-header.scrolled .main-nav a:not(.btn){color:var(--bordeaux)}
.main-nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-5px;height:1.5px;width:0;background:var(--pink);transition:.3s}
.main-nav a:not(.btn):hover::after{width:100%}
.btn{display:inline-block;background:var(--pink);color:#fff;padding:12px 24px;border-radius:40px;font-weight:600;font-size:14px;letter-spacing:.02em;border:none;cursor:pointer;transition:.25s}
.btn:hover{background:var(--pink-deep);transform:translateY(-2px);box-shadow:0 10px 26px rgba(210,0,93,.3)}
.btn-ghost{background:transparent;border:1.5px solid currentColor}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:none}
.menu-toggle{display:none;background:none;border:none;font-size:27px;color:#fff;cursor:pointer}
.site-header.scrolled .menu-toggle{color:var(--bordeaux)}

/* ---------- decorative bird ---------- */
.bird-bg{position:absolute;pointer-events:none;opacity:.06;z-index:0}

/* ---------- hero (auf Schwarz, mit animierter Bildmarke) ---------- */
.hero{min-height:100vh;display:flex;align-items:center;padding:110px 0 60px;background:var(--black);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:
   radial-gradient(80% 70% at 78% 16%,rgba(210,0,93,.30),transparent 60%),
   radial-gradient(70% 80% at 0% 100%,rgba(107,5,32,.45),transparent 60%)}
/* dezenter Bordeaux-Colorblock fuer Markenwirkung */
.hero::after{content:"";position:absolute;top:0;bottom:0;right:0;width:46%;background:linear-gradient(160deg,rgba(107,5,32,.6),transparent 72%);clip-path:polygon(26% 0,100% 0,100% 100%,0 100%);opacity:.55;pointer-events:none}
.hero .wrap{position:relative;z-index:3;display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;width:100%}
.hero-copy .kicker{display:inline-block;color:var(--sand);font-weight:600;font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;border-left:3px solid var(--pink);padding-left:13px;margin-bottom:26px}
.hero-copy h1{color:#fff;font-weight:200;font-size:clamp(40px,6.4vw,82px);line-height:1.03;letter-spacing:.005em;max-width:15ch}
.hero-copy h1 strong{font-weight:500;color:var(--pink)}
.hero-copy p.lead{color:rgba(236,224,203,.85);font-size:clamp(16px,1.9vw,20px);max-width:46ch;margin:28px 0 36px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-cta .btn-ghost{color:#fff}
.hero-cta .btn-ghost:hover{background:#fff;color:var(--black)}
.hero .videohint{position:absolute;right:30px;bottom:24px;z-index:3;color:rgba(255,255,255,.55);font-size:12px;letter-spacing:.04em;border:1px solid rgba(255,255,255,.2);padding:7px 14px;border-radius:30px;display:inline-flex;align-items:center;gap:9px}
.hero button.videohint{cursor:pointer;background:rgba(255,255,255,.04);font-family:inherit;transition:.2s}
.hero button.videohint:hover{color:#fff;border-color:var(--pink);background:rgba(210,0,93,.16)}
.hero .videohint .vh-play{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--pink);color:#fff;font-size:9px;padding-left:2px}
/* Intro-Video-Overlay */
.video-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:24px}
.video-modal.open{display:flex}
.video-modal__backdrop{position:absolute;inset:0;background:rgba(15,8,12,.86);backdrop-filter:blur(3px)}
.video-modal__dialog{position:relative;z-index:1;width:min(1000px,100%);aspect-ratio:16/9;background:#000;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.video-modal__frame{position:absolute;inset:0;border-radius:14px;overflow:hidden}
.video-modal__frame iframe{width:100%;height:100%;border:0;display:block}
.video-modal__close{position:absolute;top:-16px;right:-16px;z-index:2;width:44px;height:44px;border-radius:50%;border:none;background:#fff;color:var(--ink);font-size:26px;line-height:1;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.35);transition:.2s}
.video-modal__close:hover{background:var(--pink);color:#fff}
@media(max-width:640px){.video-modal__close{top:8px;right:8px}}

/* animierte Bildmarke: die Fluegel setzen sich zusammen */
.hero-brand{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.hero-brand .glow{position:absolute;top:18%;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(210,0,93,.5),transparent 70%);filter:blur(22px);opacity:0;animation:glowin 1.4s ease-out .9s forwards}
.bird-anim{width:min(300px,64%);height:auto;overflow:visible;margin-bottom:16px;animation:float 5.5s ease-in-out 2s infinite}
.bird-anim path{fill:var(--pink)}
.bird-anim .shard{transform-box:fill-box;transform-origin:center;opacity:0;animation:assemble 1s cubic-bezier(.2,.8,.2,1) forwards}
.bird-anim .sh1{--sx:0;--sy:-150px;--sr:-12deg;animation-delay:0s;transform:translate(var(--sx),var(--sy)) rotate(var(--sr)) scale(.7)}
.bird-anim .sh2{--sx:150px;--sy:-26px;--sr:26deg;animation-delay:.22s;transform:translate(var(--sx),var(--sy)) rotate(var(--sr)) scale(.5)}
.bird-anim .sh3{--sx:-140px;--sy:104px;--sr:14deg;animation-delay:.38s;transform:translate(var(--sx),var(--sy)) rotate(var(--sr)) scale(.5)}
@keyframes assemble{0%{opacity:0}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes glowin{to{opacity:1}}
.brand-word{font-weight:200;font-size:clamp(40px,5vw,68px);letter-spacing:.16em;color:#fff;opacity:0;animation:wordin 1s ease-out .6s forwards}
.brand-word b{font-weight:200;color:var(--pink)}
.brand-claim{font-size:clamp(10px,1.1vw,12.5px);letter-spacing:.42em;color:var(--sand);margin-top:8px;opacity:0;animation:wordin 1s ease-out .85s forwards}
@keyframes wordin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .bird-anim,.bird-anim .shard,.brand-word,.brand-claim,.hero-brand .glow{animation:none;opacity:1;transform:none}
}

/* ---------- generic sections ---------- */
.pad{padding:clamp(72px,10vw,134px) 0;position:relative}
.eyebrow{color:var(--pink);font-weight:700;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px}
.head{font-weight:200;font-size:clamp(30px,4.6vw,52px);line-height:1.1;letter-spacing:.005em;max-width:20ch;color:var(--bordeaux)}
.head strong{font-weight:500;color:var(--pink)}
.lead-p{color:var(--muted);font-size:17px;max-width:60ch;margin-top:18px}
.reveal{opacity:0;transform:translateY(26px);transition:.8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- owner ---------- */
.owner{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
.owner-photo{aspect-ratio:4/5;border-radius:16px;position:relative;overflow:hidden;background:linear-gradient(160deg,var(--sand-deep),#d3bfa3);display:flex;align-items:flex-end;padding:22px}
.owner-photo .ph{font-size:12px;color:var(--muted);background:rgba(255,255,255,.7);padding:6px 12px;border-radius:30px}
.owner-photo::before{content:"";position:absolute;top:-40px;right:-40px;width:180px;height:180px;border-radius:50%;background:var(--pink);opacity:.18}
.owner blockquote{font-weight:200;font-size:clamp(23px,2.9vw,33px);line-height:1.3;color:var(--bordeaux);margin:20px 0}
.owner blockquote strong{font-weight:500;color:var(--pink)}
.sig{font-weight:600;font-size:18px;color:var(--pink);letter-spacing:.01em;margin-top:6px}
.role{font-size:14px;color:var(--muted)}

/* ---------- pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:54px}
.pillar{background:var(--sand-light);border:1px solid var(--line);border-radius:16px;padding:30px 26px;transition:.3s}
.pillar:hover{transform:translateY(-6px);box-shadow:0 18px 42px rgba(107,5,32,.1);border-color:var(--pink)}
.pillar .num{font-weight:200;color:var(--pink);font-size:34px;line-height:1}
.pillar h3{font-size:18.5px;font-weight:600;margin:14px 0 8px;color:var(--bordeaux)}
.pillar p{font-size:14.5px;color:var(--muted)}

/* ---------- cases ---------- */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:54px}
.case{background:var(--sand-light);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:.3s}
.case:hover{transform:translateY(-6px);box-shadow:0 24px 54px rgba(107,5,32,.13)}
.case .img{aspect-ratio:16/11;position:relative;background:linear-gradient(150deg,var(--bordeaux),var(--bordeaux-2))}
.case .img.c2{background:linear-gradient(150deg,var(--pink),var(--bordeaux))}
.case .img.c3{background:linear-gradient(150deg,#c8a98c,#7a4e34)}
.case .img::after{content:attr(data-ph);position:absolute;left:16px;bottom:14px;color:rgba(255,255,255,.6);font-size:11.5px}
.case .body{padding:24px 24px 28px;flex:1;display:flex;flex-direction:column}
.case .tagline{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--pink)}
.case h3{font-weight:400;font-size:21px;line-height:1.22;margin:10px 0 14px;color:var(--bordeaux)}
.case dt{font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);margin-top:10px}
.case dd{font-size:14px;color:var(--muted)}
.case .case-text{font-size:14px;color:var(--muted);line-height:1.55;margin-top:10px}
.case .more{margin-top:auto;padding-top:18px;font-weight:600;font-size:14px;color:var(--pink)}

/* ---------- logos ---------- */
.logos{background:var(--sand-deep);border-radius:20px;padding:40px;margin-top:60px;text-align:center}
.logos .l-label{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:24px}
.logo-row{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 46px;align-items:center}
.logo-row span{font-weight:500;font-size:21px;color:var(--bordeaux);opacity:.6;letter-spacing:.03em;transition:.3s}
.logo-row span:hover{opacity:1;color:var(--pink)}

/* ---------- dark feature ---------- */
.dark{background:var(--bordeaux);color:var(--sand);overflow:hidden}
.dark::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 70% at 75% 15%,rgba(210,0,93,.4),transparent 60%)}
.dark .wrap{position:relative;z-index:2}
.dark .eyebrow{color:#f29bc0}
.dark .head{color:#fff}
.feature{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}
.feature p{color:rgba(236,224,203,.82);font-size:17px;margin:22px 0}
.feature ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:30px}
.feature li{position:relative;padding-left:26px;color:rgba(236,224,203,.92);font-size:15.5px}
.feature li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;background:var(--pink)}
.feature .visual{aspect-ratio:1/1;border-radius:20px;position:relative;overflow:hidden;background:radial-gradient(80% 70% at 70% 25%,rgba(210,0,93,.5),transparent 60%),linear-gradient(160deg,#3c1322,#2a0a16)}
.feature .visual .ph{position:absolute;left:22px;bottom:20px;font-size:12px;color:rgba(255,255,255,.55)}
.badge-new{display:inline-block;background:rgba(210,0,93,.18);color:#f4a8c6;border:1px solid rgba(242,155,192,.4);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 13px;border-radius:30px;margin-bottom:18px}
.dark .btn{background:var(--pink)}

/* ---------- werkstatt ---------- */
.werk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:48px}
.werk{aspect-ratio:3/4;border-radius:14px;position:relative;overflow:hidden;transition:.4s;background:linear-gradient(160deg,var(--sand-deep),#bb9d82)}
.werk:nth-child(2){background:linear-gradient(160deg,var(--pink),var(--bordeaux));margin-top:32px}
.werk:nth-child(3){background:linear-gradient(160deg,#cdbcae,#8a7060)}
.werk:nth-child(4){background:linear-gradient(160deg,var(--bordeaux),var(--bordeaux-2));margin-top:32px}
.werk .ph{position:absolute;left:14px;bottom:12px;font-size:11.5px;color:#fff;z-index:1;background:rgba(0,0,0,.34);padding:4px 10px;border-radius:20px;backdrop-filter:blur(2px)}
.werk img,.feature .visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.werk:hover{transform:scale(1.03)}

/* ---------- jubilaeum (colorblocking) ---------- */
.jub{position:relative;overflow:hidden;border-radius:24px;padding:clamp(44px,6vw,76px);text-align:center;color:#fff;background:linear-gradient(115deg,var(--pink) 0%,var(--pink) 42%,var(--bordeaux) 42%,var(--bordeaux) 100%)}
.jub .big{font-weight:300;font-size:clamp(64px,12vw,132px);line-height:.9}
.jub h2{font-weight:200;font-size:clamp(25px,3.4vw,40px);margin:6px 0 16px}
.jub p{max-width:54ch;margin:0 auto 26px;color:rgba(255,255,255,.92);font-size:17px}
.jub .btn{background:#fff;color:var(--bordeaux)}
.jub .btn:hover{background:var(--ink);color:#fff}

/* ---------- leistungen ---------- */
.serv{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:50px}
.serv .cell{background:var(--sand);padding:34px 30px;transition:.3s}
.serv .cell:hover{background:var(--sand-light)}
.serv a.cell{text-decoration:none;color:inherit;display:block}
.serv .arr{color:var(--pink);font-size:22px;line-height:1}
.serv h3{font-weight:500;font-size:20px;margin:12px 0 8px;color:var(--bordeaux)}
.serv p{font-size:14.5px;color:var(--muted)}

/* ---------- team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:46px}
.person{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:var(--bordeaux)}
.person img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.03);transition:.5s}
.person:hover img{filter:grayscale(0);transform:scale(1.05)}
.person .base{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(transparent,rgba(22,22,22,.9));color:#fff;transition:.35s}
.person .base h4{font-size:16px;font-weight:600;line-height:1.2}
.person .base small{font-size:11.5px;color:var(--sand);opacity:.92;display:block;margin-top:2px}
.person:hover .base{opacity:0}
.person .ov{position:absolute;inset:0;background:linear-gradient(150deg,var(--pink),var(--bordeaux));color:#fff;padding:20px;display:flex;flex-direction:column;justify-content:flex-end;transform:translateY(101%);transition:.45s cubic-bezier(.2,.7,.2,1)}
.person:hover .ov{transform:none}
.person .ov h4{font-size:17px;font-weight:600;line-height:1.2}
.person .ov .role{font-size:11.5px;color:var(--sand);letter-spacing:.03em;margin:3px 0 12px}
.person .ov .hob{font-size:13px;line-height:1.45;margin-bottom:14px;opacity:.95}
.person .ov a{align-self:flex-start;font-size:12px;font-weight:600;color:#fff;border:1px solid rgba(255,255,255,.65);padding:7px 13px;border-radius:30px;transition:.25s}
.person .ov a:hover{background:#fff;color:var(--bordeaux)}
/* Highlight-Verlauf des Hover-Overlays: Default = .person .ov (oben), Alternativ = .hl-alt.
   Auswahl je Team-Mitglied über das CPT-Feld pura-team-highlight. */
.person.hl-alt .ov{background:linear-gradient(150deg,#e26aa0,var(--bordeaux))}

/* ---------- faq ---------- */
.faq{max-width:830px;margin:46px auto 0}
.q{border-bottom:1px solid var(--line)}
.q button{width:100%;background:none;border:none;cursor:pointer;text-align:left;padding:22px 0;font-family:inherit;font-size:18px;font-weight:600;color:var(--bordeaux);display:flex;justify-content:space-between;align-items:center;gap:20px}
.q .plus{color:var(--pink);font-size:25px;transition:.3s;flex-shrink:0}
.q.open .plus{transform:rotate(45deg)}
.q .a{max-height:0;overflow:hidden;transition:max-height .4s ease;color:var(--muted);font-size:15.5px}
.q.open .a{padding-bottom:22px}
.q .a p{margin:0 0 1em}
.q .a p:last-child{margin-bottom:0}
.faq-more{text-align:center;margin-top:34px}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start}
.contact .info{font-size:16px;color:var(--muted);margin-top:22px;line-height:2}
.contact .info b{color:var(--bordeaux)}
.contact .map{margin-top:24px;aspect-ratio:12/7;border-radius:16px;border:1px solid var(--line);overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;background:repeating-linear-gradient(45deg,var(--sand-deep),var(--sand-deep) 12px,var(--sand) 12px,var(--sand) 24px)}
.contact .map img{width:100%;height:100%;object-fit:cover;display:block}
.form{background:var(--sand-light);border:1px solid var(--line);border-radius:20px;padding:36px;box-shadow:0 22px 54px rgba(107,5,32,.07)}
.form h3{font-weight:400;font-size:25px;color:var(--bordeaux);margin-bottom:6px}
.form .sub{font-size:14px;color:var(--muted);margin-bottom:22px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-size:15px;background:var(--sand);color:var(--ink);transition:.2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--pink);background:#fff}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .btn{width:100%;margin-top:8px;padding:15px;font-size:15.5px}
/* Gravity Forms — PURA-Branding.
   GF (Orbital) faerbt alles ueber CSS-Custom-Properties; deren Werte setzt GF
   pro Formular-ID inline (hohe Spezifitaet). Wir ueberschreiben nur die Brand-
   Variablen mit !important — das schlaegt GFs normale Inline-Deklaration
   unabhaengig von Spezifitaet und Ladereihenfolge, sodass das Branding auch aus
   der zuerst geladenen style.css greift. Raleway erbt GF automatisch. */
.gform_wrapper.gform-theme{
	--gf-color-primary:#D2005D !important;            /* PURA Pink: Button, Fokus, Checkbox, Akzente */
	--gf-color-primary-rgb:210, 0, 93 !important;
	--gf-color-primary-darker:#b00050 !important;     /* Hover (Pink Deep) */
	--gf-color-primary-lighter:#e7548f !important;
	--gf-color-primary-contrast:#ffffff !important;   /* Text auf Pink */
	--gf-color-primary-contrast-rgb:255, 255, 255 !important;
	--gf-radius:10px !important;                       /* abgerundete Felder */
}
/* Submit-Button an den PURA-Pill-Look angleichen (full-width Pille). */
.gform_wrapper .gform_footer button,
.gform_wrapper .gform_footer input[type=submit]{width:100% !important;border-radius:40px !important;padding:14px 26px !important;font-weight:600;letter-spacing:.02em}
/* Fallback-Hinweis, wenn Gravity Forms/pura-core nicht aktiv sind. */
.form-fallback{font-size:15px;color:var(--muted);line-height:1.7}
.form-fallback a{color:var(--pink);font-weight:600}

/* ---------- footer ---------- */
.site-footer{background:var(--black);color:rgba(236,224,203,.72);padding:62px 0 34px;font-size:14px}
.site-footer .ft-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:32px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12)}
.site-footer img{height:54px}
.site-footer .claim{margin-top:14px;max-width:30ch}
.site-footer .cols{display:flex;gap:60px;flex-wrap:wrap}
.site-footer h5{color:#fff;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.site-footer .cols p{margin-bottom:8px}
.site-footer a:hover{color:#fff}
.site-footer .ft-bottom{padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px}

/* Newsletter im Footer (dunkler Kontext). Brand-Variablen (Pink-Button, Pill)
   erbt das GF-Formular global; hier nur die Textfarben für den dunklen Grund.
   .site-footer .ft-news … (0,3,x) schlägt GFs .gform-theme--framework … (0,2,x). */
.site-footer .ft-brand{max-width:380px}
.site-footer .ft-news{margin-top:30px}
.site-footer .ft-news-intro{margin:0 0 14px;max-width:38ch}
.site-footer .ft-news .gform_wrapper{margin:0}
.site-footer .ft-news .gfield_label,
.site-footer .ft-news .gform-field-label{color:rgba(236,224,203,.92)}
.site-footer .ft-news .gfield_consent_label,
.site-footer .ft-news .ginput_container_consent label,
.site-footer .ft-news .gfield_description{color:rgba(236,224,203,.66)}
.site-footer .ft-news .gfield_required{color:var(--pink)}
.site-footer .ft-news .gform_confirmation_message{color:rgba(236,224,203,.92)}
.site-footer .ft-news .form-fallback{color:rgba(236,224,203,.72);font-size:14px}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .main-nav{display:none}
  .main-nav.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:18px;background:var(--sand);padding:26px 30px;box-shadow:0 12px 30px rgba(0,0,0,.12)}
  .main-nav.open a:not(.btn){color:var(--bordeaux)}
  .menu-toggle{display:block}
  .hero .wrap{grid-template-columns:1fr;gap:34px}
  .hero-brand{order:-1}
  .bird-anim{width:min(220px,55%)}
  .owner,.feature,.contact{grid-template-columns:1fr;gap:38px}
  .pillars,.cases,.serv{grid-template-columns:1fr}
  .werk-grid{grid-template-columns:1fr 1fr}
  .werk:nth-child(n){margin-top:0}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .row2{grid-template-columns:1fr}
}

/* ---------- echte Case-Bilder auf der Startseite ---------- */
.case .img{background-size:cover;background-position:center}
.case .img.has-img::after{background:rgba(22,22,22,.18)}

/* ---------- Showreel (Video auf der Startseite) ---------- */
.showreel{background:var(--black);color:var(--sand);position:relative;overflow:hidden}
.showreel::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 80% at 80% 20%,rgba(210,0,93,.22),transparent 60%)}
.showreel .wrap{position:relative;z-index:2}
.showreel .eyebrow{color:#f29bc0}
.showreel .head{color:#fff}
.showreel .lead-p{color:rgba(236,224,203,.8)}
.video-frame{margin-top:40px;position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:linear-gradient(150deg,#2a1016,#120a0c);display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid rgba(255,255,255,.08)}
.video-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.video-frame .play{position:relative;z-index:2;width:84px;height:84px;border-radius:50%;background:var(--pink);display:flex;align-items:center;justify-content:center;transition:.3s}
.video-frame .play::after{content:"";border-left:24px solid #fff;border-top:15px solid transparent;border-bottom:15px solid transparent;margin-left:6px}
.video-frame:hover .play{transform:scale(1.08);box-shadow:0 0 0 12px rgba(210,0,93,.16)}
.video-frame .vlabel{position:absolute;z-index:2;bottom:18px;left:20px;font-size:12px;color:rgba(255,255,255,.6)}

/* ---------- Case-Detail (Geschichte) ---------- */
.case-hero{background:var(--black);color:#fff;padding:140px 0 0;position:relative;overflow:hidden}
.case-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 70% at 85% 0%,rgba(210,0,93,.28),transparent 60%)}
.case-hero .wrap{position:relative;z-index:2}
.case-hero .crumb{color:var(--sand);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase}
.case-hero .crumb a{color:var(--pink)}
.case-hero h1{font-weight:200;font-size:clamp(38px,6vw,76px);line-height:1.04;margin:14px 0 12px}
.case-hero .sub{color:rgba(236,224,203,.85);font-size:clamp(17px,2vw,21px);max-width:52ch}
.case-hero .client{margin-top:18px;font-size:13.5px;letter-spacing:.04em;color:var(--sand);opacity:.85}
.case-hero .heroimg{margin-top:46px;border-radius:18px 18px 0 0;overflow:hidden;aspect-ratio:21/9}
.case-hero .heroimg img{width:100%;height:100%;object-fit:cover}
.case-body{padding:clamp(56px,8vw,96px) 0}
.case-grid{display:grid;grid-template-columns:1fr 320px;gap:54px;align-items:start}
.story h2{font-weight:400;font-size:25px;color:var(--bordeaux);margin:28px 0 10px}
.story h2:first-of-type{margin-top:0}
.story p{color:var(--ink);margin-bottom:14px}
.story .intro{font-size:20px;font-weight:300;color:var(--bordeaux);margin-bottom:20px}
.meta-box{background:var(--sand-light);border:1px solid var(--line);border-radius:16px;padding:26px;position:sticky;top:96px}
.meta-box h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);margin-bottom:16px}
.meta-box dl{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px}
.meta-box dt{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.meta-box dd{font-size:16px;color:var(--bordeaux);font-weight:500;margin-top:2px}
.meta-box .full{grid-column:1/-1}
.tasks{margin-top:36px}
.tasks h2{font-weight:400;font-size:25px;color:var(--bordeaux);margin-bottom:16px}
.tasks ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px}
.tasks li{position:relative;padding-left:24px;font-size:15px;color:var(--ink)}
.tasks li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--pink)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
.gallery img.big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;height:100%}
.related{background:var(--sand-deep)}
.related .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
@media(max-width:900px){
  .case-grid{grid-template-columns:1fr;gap:34px}
  .meta-box{position:static}
  .tasks ul{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .gallery img.big{grid-column:span 2}
  .related .cards{grid-template-columns:1fr}
}

/* ---------- Inhaberin-Foto ---------- */
.owner-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.owner-photo .frame{position:absolute;left:-14px;bottom:-14px;width:120px;height:120px;border-left:4px solid var(--pink);border-bottom:4px solid var(--pink);border-radius:0 0 0 16px;z-index:2;pointer-events:none}

/* ---------- Was uns anders macht: Colorblocking in Rot ---------- */
.anders{background:var(--bordeaux);position:relative;overflow:hidden}
.anders::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 85% 8%,rgba(210,0,93,.4),transparent 60%)}
.anders .wrap{position:relative;z-index:2}
.anders .eyebrow{color:#f4a8c6}
.anders .head{color:#fff}
.anders .lead-after{color:rgba(236,224,203,.86);font-size:18px;margin-top:16px;max-width:54ch}
.anders .pillars{margin-top:48px}
.anders .pillar{border:none;border-radius:16px;padding:30px 26px;color:#fff;transition:.3s}
.anders .pillar:nth-child(odd){background:var(--pink)}
.anders .pillar:nth-child(even){background:#4a0418}
.anders .pillar:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(0,0,0,.32)}
.anders .pillar .num{display:none}
.anders .pillar .ic{width:40px;height:40px;color:#fff;margin-bottom:16px}
.anders .pillar .ic svg{width:100%;height:100%}
.anders .pillar h3{color:#fff;font-size:19px;font-weight:600;margin-bottom:8px}
.anders .pillar p{color:rgba(255,255,255,.86);font-size:14.5px}

/* ---------- Kundenstimmen (Video-Social-Proof) ---------- */
.voices{background:var(--black);color:var(--sand);position:relative;overflow:hidden}
.voices::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 70% at 12% 8%,rgba(210,0,93,.2),transparent 60%)}
.voices .wrap{position:relative;z-index:2}
.voices .eyebrow{color:#f4a8c6}
.voices .head{color:#fff}
.voices .lead-p{color:rgba(236,224,203,.8)}
/* Karussell: horizontal scroll-snap, Scrollbalken versteckt, Navigation per Pfeilen.
   overflow-y MUSS explizit hidden sein, sonst erzwingt overflow-x:auto auch einen
   vertikalen Scrollbalken (CSS-Quirk). Padding gibt dem Hover-Lift Platz. */
.voices-carousel{position:relative}
.voices-grid{display:flex;gap:22px;margin-top:46px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:8px 2px 14px;scrollbar-width:none;-ms-overflow-style:none}
.voices-grid::-webkit-scrollbar{display:none}
.voices-nav{position:absolute;top:38%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;border:none;background:rgba(255,255,255,.92);color:var(--bordeaux);font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 22px rgba(0,0,0,.35);transition:.2s}
.voices-nav:hover{background:var(--pink);color:#fff}
.voices-nav.prev{left:-10px}
.voices-nav.next{right:-10px}
.voices-nav[disabled]{opacity:0;pointer-events:none}
@media(max-width:760px){.voices-nav{display:none}}
.vcard{flex:0 0 min(86%,340px);scroll-snap-align:start;background:#1f1517;border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;transition:.3s}
.vcard:hover{transform:translateY(-5px);border-color:var(--pink)}
.vcard .vid{position:relative;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#3a1322,#180d10)}
.vcard .vid[data-video]{cursor:pointer}
.vcard .vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vcard .vid:has(.play) img{opacity:.5}
.vcard .vid .play{position:relative;z-index:2;width:60px;height:60px;border-radius:50%;background:var(--pink);display:flex;align-items:center;justify-content:center;transition:.3s}
.vcard .vid .play::after{content:"";border-left:17px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px}
.vcard:hover .vid .play{transform:scale(1.1)}
.vcard .vb{padding:22px}
.vcard .vb .quote{color:#fff;font-size:15px;line-height:1.5;margin-bottom:14px}
.vcard .vb .who{font-size:13px;color:var(--pink);font-weight:600}
.vcard .vb .who span{display:block;color:rgba(236,224,203,.6);font-weight:400;font-size:12px;margin-top:2px}

/* ---------- Signature: Speaker-Reihe / Community ---------- */
.feature .when{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#f4a8c6;border:1px solid rgba(244,168,198,.4);padding:7px 14px;border-radius:30px;margin-bottom:18px;font-weight:600}
.feature .namehint{display:block;font-size:12.5px;color:rgba(244,168,198,.85);margin-top:14px;font-style:italic}

@media(max-width:900px){.voices-grid{grid-template-columns:1fr}}