/* =========================================================
   Unternehmen-Header: Cinematic Dual-Panorama (Dresden + Guangzhou)
   Quelle: Claude Design "Unternehmen v10.html".
   Eingebunden nur auf der Unternehmen-Seite (siehe inc_head.php).
   ========================================================= */

/* Reveal-Mechanik. JS triggert `is-revealed` erst nachdem der wp-loading-
   Body-Fade fertig ist (sonst laufen die Animationen waehrend der Body
   noch opacity:0 ist und der User sieht nichts). CSS-Animationen statt
   Transitions, weil sie ihre Keyframes immer abspielen wenn das Property
   neu gesetzt wird - auch bei async-geladener CSS-Datei.
   Stagger: Headline (0 ms) -> grosses Panorama (150 ms) -> Buero-Cutout
   (700 ms). WOW.js scheidet aus, weil parent-transform Inner-Transforms
   blockiert. Band animiert nur opacity, damit Ken Burns ungestoert laeuft. */
.wpl-reveal .wpl-head{ opacity:0; }
.wpl-reveal .wpl-band{ opacity:0; }
.wpl-reveal.is-revealed .wpl-head{
  animation: wpl-head-in 800ms cubic-bezier(.22,1,.36,1) both;
}
.wpl-reveal.is-revealed .wpl-band{
  animation: wpl-band-in 900ms cubic-bezier(.22,1,.36,1) 150ms both;
}
@keyframes wpl-head-in{
  0%   { opacity:0; transform:translateY(14px); }
  100% { opacity:1; transform:translateY(0); }
}
@keyframes wpl-band-in{
  0%   { opacity:0; }
  100% { opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .wpl-reveal .wpl-head,
  .wpl-reveal .wpl-band{ opacity:1; }
  .wpl-reveal.is-revealed .wpl-head,
  .wpl-reveal.is-revealed .wpl-band,
  .wpl-reveal.is-revealed .wpl-cutout{
    animation:none;
  }
}

/* Lokaler Token-Scope, gemappt auf die globalen Site-Variablen
   (--wp-blue-mid = #1a3a5c in refresh.css). */
.wpl{
  --wp-blue:#1a3a5c;
  --wp-blue-deep:#13283f;
  --wp-gold:#c9a961;
  --wp-text:#1a2230;
  --wp-muted:#5a6577;
  --wp-grey:#f7f8fa;
  --wp-border:#e6eaf0;
  --radius:20px;
  --gap-bands:22px;
  --band-shadow:
    0 1px 2px rgba(26,58,92,.06),
    0 8px 18px -8px rgba(26,58,92,.22),
    0 28px 48px -18px rgba(19,40,63,.32),
    0 60px 110px -40px rgba(13,28,48,.45);

  /* Statt 1200px max-width: Bootstrap-Container/-Col gibt Breite vor. */
  max-width:none;
  margin:0;
  padding:0;
  background:transparent;
  color:var(--wp-text);
}

/* Kopf */
.wpl-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:32px;margin:0 0 28px;
}
.wpl-head__title{margin:0;max-width:760px}
.wpl-h2{
  font-family:"Manrope",system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:36px;line-height:1.1;font-weight:800;letter-spacing:-.02em;
  color:var(--wp-blue);margin:0 0 10px;
}
.wpl-sub{
  margin:0;color:var(--wp-muted);font-size:16px;line-height:1.6;font-weight:400;
  max-width:640px;
}

/* Baender Wrapper */
.wpl-stage{position:relative}
.wpl-bands{display:flex;flex-direction:column;gap:var(--gap-bands)}

/* Einzelnes Panorama-Band, sehr flach (5:1+) damit das Panorama-Gefuehl bleibt. */
.wpl-band{
  position:relative;overflow:hidden;
  border-radius:var(--radius);
  background:var(--wp-grey);
  box-shadow:var(--band-shadow);
  height:clamp(180px, 22vw, 300px);
  isolation:isolate;
  will-change:transform;
  z-index:0;
}
/* Wipe-Layer: pro Stadt ein eigener Layer (Bild + Scrim + Label).
   Die Layer werden per clip-path im Ping-Pong reingewipet. */
.wpl-band__layer{
  position:absolute;inset:0;
  overflow:hidden;
  clip-path:inset(0 0 0 0);
  will-change:clip-path;
  z-index:1;
}
.wpl-band__layer--dresden{ z-index:2; }
.wpl-band__layer--guangzhou{ z-index:1; }

.wpl-band__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  object-position:50% 50%;
  filter:saturate(.95) contrast(1.02);
  will-change:transform, object-position;
  z-index:0;
}
/* Horizontaler Ken Burns: langsamer Schwenk + minimaler Zoom. */
.wpl-band__layer--dresden .wpl-band__img{
  animation:kenBurnsH_A 34s ease-in-out infinite;
}
.wpl-band__layer--guangzhou .wpl-band__img{
  animation:kenBurnsH_B 40s ease-in-out infinite;
}
/* Tag-Bilder: spuerbarer Rein-Zoom (langsam, ohne Yo-Yo). */
.wpl-band__layer--dresden-day .wpl-band__img{
  animation:kenBurnsZoom_A 28s ease-in-out infinite;
}
.wpl-band__layer--guangzhou-day .wpl-band__img{
  animation:kenBurnsZoom_B 32s ease-in-out infinite;
}
@keyframes kenBurnsH_A{
  0%   { object-position:28% 50%; transform:scale(1.00); }
  50%  { object-position:72% 50%; transform:scale(1.04); }
  100% { object-position:28% 50%; transform:scale(1.00); }
}
@keyframes kenBurnsH_B{
  0%   { object-position:68% 50%; transform:scale(1.03); }
  50%  { object-position:24% 50%; transform:scale(1.00); }
  100% { object-position:68% 50%; transform:scale(1.03); }
}
@keyframes kenBurnsZoom_A{
  0%   { object-position:50% 55%; transform:scale(1.00); }
  85%  { object-position:56% 45%; transform:scale(1.18); }
  100% { object-position:50% 55%; transform:scale(1.00); }
}
@keyframes kenBurnsZoom_B{
  0%   { object-position:48% 55%; transform:scale(1.00); }
  85%  { object-position:42% 45%; transform:scale(1.18); }
  100% { object-position:48% 55%; transform:scale(1.00); }
}

/* Scrim fuer Lesbarkeit der Overlays */
.wpl-band__scrim{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    linear-gradient(180deg, rgba(19,40,63,.55) 0%, rgba(19,40,63,0) 32%, rgba(19,40,63,0) 58%, rgba(19,40,63,.78) 100%),
    linear-gradient(90deg,  rgba(19,40,63,.32) 0%, rgba(19,40,63,0) 40%);
}

/* Tag/Nacht-Tint. Wird per JS-Klasse .is-night auf dem Layer gesetzt. */
.wpl-band__layer::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(10,20,50,.40) 0%, rgba(10,20,50,.22) 100%);
  mix-blend-mode:multiply;
  opacity:0;
  transition:opacity 1200ms ease;
  z-index:1;
}
.wpl-band__layer.is-night::after{opacity:1}
.wpl-band__layer.is-night .wpl-band__img{filter:saturate(.85) contrast(1.05) brightness(.92)}

/* Hover-Verstaerkung */
.wpl-band:hover .wpl-band__img{
  filter:saturate(1.05) contrast(1.04);
}

/* Bottom Overlay: Stadt-Info */
.wpl-cityinfo{
  position:absolute;left:18px;bottom:14px;right:18px;z-index:3;
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  pointer-events:none;
}
.wpl-cityinfo__text{
  color:#fff;max-width:520px;text-shadow:0 2px 18px rgba(0,0,0,.4);
  font-family:"Manrope",system-ui,-apple-system,Segoe UI,sans-serif;
}
.wpl-cityinfo__label{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--wp-gold);margin-bottom:5px;
}
.wpl-cityinfo__city{
  font-size:26px;font-weight:800;color:#fff;margin:0;letter-spacing:-.02em;line-height:1;
}
.wpl-cityinfo__addr{
  margin:5px 0 0;color:rgba(255,255,255,.85);font-size:13px;line-height:1.4;font-weight:500;
}

/* Buero-Card-Cutout, sitzt rechts unten und ueberlappt das Band.
   Liegt ueber dem Wipe-Layer (z-index 6 > Layer 2/3). */
.wpl-cutout{
  position:absolute;
  right:40px;
  bottom:-60px;
  width:280px;
  height:160px;
  border-radius:16px;
  overflow:hidden;
  background:var(--wp-grey);
  box-shadow:
    0 0 0 5px #fff,
    0 2px 4px rgba(19,40,63,.08),
    0 24px 48px -18px rgba(19,40,63,.45);
  z-index:6;
  isolation:isolate;
  opacity:0;
}
/* Cutout-Entrance jetzt an `.is-revealed` gekoppelt, damit der Stagger
   sicher nach dem Band kommt (Band-Animation laeuft 150-1050 ms, Cutout
   startet bei 700 ms und endet bei 1700 ms). Vorher startete der Cutout
   schon beim Page-Load, unabhaengig vom Reveal-Trigger. */
.wpl-reveal.is-revealed .wpl-cutout{
  animation:wpl-cutoutIn 1s cubic-bezier(.2,.7,.2,1) 700ms forwards;
}
@keyframes wpl-cutoutIn{
  0%{opacity:0;transform:translateY(8px) scale(.96)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.wpl-cutout__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;
  animation:kenBurnsCut 42s ease-in-out infinite;
  will-change:transform, object-position;
}
@keyframes kenBurnsCut{
  0%   { object-position:40% 42%; transform:scale(1.00); }
  50%  { object-position:60% 42%; transform:scale(1.03); }
  100% { object-position:40% 42%; transform:scale(1.00); }
}
.wpl-cutout__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(19,40,63,0) 35%, rgba(19,40,63,.82) 100%);
  pointer-events:none;
}
.wpl-cutout__info{
  position:absolute;left:14px;right:14px;bottom:12px;color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.5);z-index:2;
  font-family:"Manrope",system-ui,-apple-system,Segoe UI,sans-serif;
}
.wpl-cutout__label{
  display:block;font-size:9.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--wp-gold);margin-bottom:3px;
}
.wpl-cutout__name{
  font-size:15px;font-weight:800;margin:0;letter-spacing:-.01em;line-height:1.15;
}
.wpl-cutout__sub{
  margin:2px 0 0;font-size:11.5px;color:rgba(255,255,255,.82);font-weight:500;line-height:1.35;
}

/* Responsive */
@media (min-width: 1600px){
  .wpl-band{height:clamp(280px, 19vw, 360px)}
}
@media (max-width: 980px){
  .wpl-cutout{width:230px;height:140px;right:24px;bottom:-50px}
  .wpl-cutout__name{font-size:14px}
  .wpl-cityinfo__city{font-size:22px}
  .wpl-h2{font-size:30px}
  .wpl-band{height:clamp(160px, 24vw, 240px)}
}
@media (max-width: 768px){
  .wpl-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:20px}
  .wpl-h2{font-size:26px}
  .wpl-sub{font-size:15px}

  .wpl-bands{gap:14px}
  .wpl-band{height:160px}
  .wpl-band__img{object-position:50% 55%}

  /* Cutout wird unter dem Band als eigene Karte, nicht ueberlappend */
  .wpl-cutout{
    position:relative;
    right:auto;top:auto;bottom:auto;left:auto;
    transform:none;
    width:100%;height:200px;
    margin-top:14px;
    animation:none;opacity:1;
    box-shadow:0 2px 4px rgba(19,40,63,.08), 0 18px 36px -16px rgba(19,40,63,.35);
  }
  .wpl-cutout__img{animation:none;transform:scale(1.02)}

  .wpl-stage{display:flex;flex-direction:column;align-items:stretch}

  .wpl-cityinfo{left:14px;right:14px;bottom:14px}
  .wpl-cityinfo__city{font-size:24px}
  .wpl-cityinfo__addr{font-size:13px}
  .wpl-cityinfo__label{font-size:10px;margin-bottom:6px}
}
@media (max-width: 480px){
  .wpl-cityinfo__city{font-size:22px}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .wpl-band__img,
  .wpl-cutout__img{animation:none;object-position:50% 50%;transform:none}
  .wpl-cutout{animation:none;opacity:1;transform:none}
  .wpl-band__layer::after{transition:none}
}