/* Poul Bracker Filmproduktion — shared styles
   Design tokens + base rules extracted from the approved design mockups.
   Edit colours here once; every page inherits them. */

/* ---- Design tokens ----
   Brand colours (--pb-bg, --pb-fg, --pb-accent …) are auto-generated from the
   mockups into assets/tokens.css (loaded before this file). Only site-specific
   additions live here. */
body{
  --pb-gut:48px; /* horizontal page gutter — shrinks on small screens */
}

/* ---- Base ---- */
body{margin:0;background:var(--pb-bg);color:var(--pb-fg);font-family:'Space Grotesk',system-ui,sans-serif}
a{color:inherit;text-decoration:none}
a:hover{opacity:.85}
img{max-width:100%}
*:focus-visible{outline:2px solid var(--pb-accent);outline-offset:2px} /* WCAG 2.2 visible focus */

/* ---- Animations used across pages ---- */
@keyframes pbMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pbMarqueeR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes pbScrollUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes pbScrollDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@keyframes pbCut{0%,24.9%{opacity:1}25%,100%{opacity:0}}
@keyframes pbBounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important}
}

/* =====================================================================
   Responsive layer — the design mockups are desktop-only (1440px).
   Helper classes (pb-nav, pb-grid, pb-fs-*) are injected at build time.
   ===================================================================== */

/* Burger menu button (hidden on desktop) */
.pb-burger{
  display:none;width:42px;height:42px;flex:none;
  align-items:center;justify-content:center;
  border:1px solid rgba(var(--pb-fg-rgb),.3);border-radius:8px;
  background:transparent;color:var(--pb-fg);font-size:20px;line-height:1;
  cursor:pointer;font-family:inherit;
}

/* Tablet: relax gutter + dense card grids drop to 2 columns */
@media (max-width:1000px){
  body{--pb-gut:30px}
  .pb-grid-cards{grid-template-columns:repeat(2,1fr)!important}
}

/* Nav collapses to a burger dropdown */
@media (max-width:880px){
  .pb-nav{flex-wrap:wrap;position:relative}
  .pb-burger{display:flex}
  .pb-nav-menu{
    display:none!important;position:absolute;top:100%;left:0;right:0;
    flex-direction:column!important;align-items:flex-start!important;gap:18px!important;
    background:var(--pb-bg2);padding:22px var(--pb-gut)!important;
    border-bottom:1px solid rgba(var(--pb-fg-rgb),.12);z-index:60;
  }
  .pb-nav-menu.pb-open{display:flex!important}
}

/* Phone: single-column stacks + fluid display type */
@media (max-width:680px){
  body{--pb-gut:18px}
  .pb-grid{grid-template-columns:1fr!important}
  .pb-fs-l{font-size:clamp(2.1rem,8.5vw,3rem)!important;line-height:1.06!important}
  .pb-fs-m{font-size:clamp(1.5rem,6vw,2.05rem)!important;line-height:1.16!important}
  .pb-row{flex-wrap:wrap!important}
  footer > div{flex-wrap:wrap;gap:16px}
  /* contact strips & footer link rows (phone/email/legal links) */
  [style*="display:flex;gap:24px"]{flex-wrap:wrap!important}
  /* any flex row holding a phone/email link must wrap (long, unbreakable).
     max-width caps rows that use flex:none (which otherwise size to content
     and overflow the viewport instead of wrapping). */
  [style*="display:flex"]:has(a[href^="mailto:"]),
  [style*="display:flex"]:has(a[href^="tel:"]){flex-wrap:wrap!important;max-width:100%!important}
}

/* ---- Referenzen category filter chips ---- */
[data-pb-chip]{
  background:transparent;color:rgba(var(--pb-fg-rgb),.85);
  border:1px solid rgba(var(--pb-fg-rgb),.3);font-weight:400;
}
[data-pb-chip].pb-chip-active{
  background:var(--pb-accent);color:var(--pb-bg);border-color:var(--pb-accent);font-weight:700;
}

/* =====================================================================
   Contact form (kontakt.html -> kontakt.php)
   ===================================================================== */
.pb-form{position:relative}
.pb-form input:focus,.pb-form textarea:focus{border-bottom-color:var(--pb-accent)!important}
/* inline outline:none from the mockup would hide keyboard focus (WCAG 2.2) */
.pb-form input:focus-visible,.pb-form textarea:focus-visible,.pb-form button:focus-visible{outline:2px solid var(--pb-accent)!important;outline-offset:2px}
.pb-form input::placeholder,.pb-form textarea::placeholder{color:rgba(var(--pb-fg-rgb),.4)}
.pb-form button[disabled]{opacity:.6;cursor:wait}
.pb-topic{position:relative;display:inline-flex;cursor:pointer}
.pb-topic input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.pb-topic span{border:1px solid rgba(var(--pb-fg-rgb),.3);padding:9px 18px;font-size:13px}
.pb-topic input:checked + span{background:var(--pb-accent-bg);color:var(--pb-on-accent);border-color:var(--pb-accent-bg);font-weight:700}
.pb-topic input:focus-visible + span{outline:2px solid var(--pb-accent);outline-offset:2px}
.pb-hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.pb-form-status{margin:0;font-size:14px;line-height:1.5}
.pb-form-status:empty{display:none}
.pb-form-status.is-ok{color:var(--pb-accent);font-weight:700}
.pb-form-status.is-error{color:#e5484d}

/* =====================================================================
   Click-to-load YouTube facade (short-film.html)
   ===================================================================== */
.pb-yt{position:absolute;inset:0;overflow:hidden}
.pb-yt-btn{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer;display:block}
.pb-yt-btn img{width:100%;height:100%;object-fit:cover;display:block;opacity:.7;transition:opacity .2s}
.pb-yt-btn:hover img{opacity:.85}
.pb-yt-btn:focus-visible{outline:3px solid var(--pb-accent);outline-offset:3px}
.pb-yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;background:var(--pb-accent-bg);color:var(--pb-on-accent);display:flex;align-items:center;justify-content:center;font-size:28px;padding-left:5px;box-sizing:border-box}
.pb-yt-note{position:absolute;left:0;right:0;bottom:0;margin:0;padding:28px 18px 14px;font-size:12px;line-height:1.5;color:rgba(244,242,236,.85);background:linear-gradient(transparent,rgba(0,0,0,.8))}
.pb-yt-note a{text-decoration:underline}
.pb-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:680px){.pb-yt-play{width:64px;height:64px;font-size:22px}.pb-yt-note{font-size:11px;padding:20px 12px 10px}}