/* ==========================================================================
   PACKLAST — Design System (2026 redesign)
   --------------------------------------------------------------------------
   Loaded on every page via includes/style.php, on top of Bootstrap 5.3.
   Sections:
     1. Fonts            6. Header / navigation      11. Footer
     2. Tokens           7. Page title band (inner)  12. Legacy / CMS compat
     3. Base             8. Homepage sections        13. Motion + reveal
     4. Layout helpers   9. Map consent gate         14. Reduced motion
     5. Buttons + chips 10. Mobile CTA bar
   Brand: ink black + Packlast yellow (logo) + red for actions.
   Yellow is never used as text on light backgrounds (fails contrast) — only
   as a fill, a marker or as text on ink.
   ========================================================================== */

/* ---------- 1. Fonts (self-hosted: no request to Google before consent) ---------- */
@font-face{
  font-family:"Outfit";
  src:url("/assets/fonts/outfit-latin-wght.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("/assets/fonts/inter-latin-wght.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ---------- 2. Tokens ---------- */
:root{
  /* brand */
  --pl-red:#e60000;
  --pl-red-dark:#c40000;
  --pl-yellow:#ffcc00;
  --pl-yellow-soft:#fff3c4;
  --pl-ink:#0c0c0d;
  --pl-ink-2:#1d1d20;
  --pl-ink-3:#2b2b30;

  /* surfaces + text */
  --pl-paper:#faf8f3;
  --pl-surface:#ffffff;
  --pl-text:#111114;
  --pl-muted:#575b63;          /* 6.6:1 on white */
  --pl-muted-on-ink:#b9bbc2;   /* 9.8:1 on ink */
  --pl-line:#e8e5dc;
  --pl-line-ink:#2c2c31;

  /* legacy aliases (old inline styles + CMS content reference these) */
  --pl-gray-bg:var(--pl-paper);

  /* type */
  --pl-font-display:"Outfit", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --pl-font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* shape + depth */
  --pl-radius-sm:10px;
  --pl-radius:18px;
  --pl-radius-lg:28px;
  --pl-shadow-sm:0 1px 2px rgba(12,12,13,.06), 0 1px 1px rgba(12,12,13,.04);
  --pl-shadow:0 10px 30px -12px rgba(12,12,13,.18), 0 2px 6px rgba(12,12,13,.05);
  --pl-shadow-lg:0 30px 60px -20px rgba(12,12,13,.28);
  --pl-shadow-legacy:0 2px 10px rgba(0,0,0,.05);

  /* motion — one token per job, not one duration for everything */
  --pl-ease-out:cubic-bezier(.2,.7,.2,1);
  --pl-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --pl-dur-fast:160ms;   /* hover, press */
  --pl-dur:280ms;        /* state changes */
  --pl-dur-slow:640ms;   /* entrances */

  --pl-header-h:72px;
  --pl-gutter:20px;
}

/* ---------- 3. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:16px; scroll-behavior:smooth; scroll-padding-top:calc(var(--pl-header-h) + 16px); }
body{
  margin:0;
  font-family:var(--pl-font-body);
  font-size:1rem;
  line-height:1.6;
  color:var(--pl-text);
  background:var(--pl-surface);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  font-family:var(--pl-font-display);
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.15;
  color:inherit;
  text-wrap:balance;
}
p{ text-wrap:pretty; }
a{ color:inherit; text-underline-offset:3px; }
img,video{ max-width:100%; }
::selection{ background:var(--pl-yellow); color:var(--pl-ink); }

/* Visible keyboard focus everywhere (never removed, only restyled) */
:focus-visible{
  outline:3px solid var(--pl-ink);
  outline-offset:3px;
  border-radius:6px;
}
.pl-on-ink :focus-visible,
.pl-footer :focus-visible{ outline-color:var(--pl-yellow); }

.pl-skip{
  position:absolute; left:16px; top:-100px; z-index:2000;
  background:var(--pl-ink); color:#fff; padding:.75rem 1rem; border-radius:var(--pl-radius-sm);
  font-weight:600; text-decoration:none;
}
.pl-skip:focus{ top:12px; }

.pl-ico{ width:1.25em; height:1.25em; flex:0 0 auto; display:inline-block; vertical-align:-.2em; }
.pl-ico--lg{ width:28px; height:28px; }

/* ---------- 4. Layout helpers ---------- */
.container{ max-width:1200px; margin-inline:auto; padding-inline:var(--pl-gutter); }
.pl-wrap{ width:100%; max-width:1200px; margin-inline:auto; padding-inline:var(--pl-gutter); }
.pl-section{ padding-block:clamp(64px, 9vw, 120px); position:relative; }
.pl-section--paper{ background:var(--pl-paper); }
.pl-section--ink{ background:var(--pl-ink); color:#fff; }
.pl-section--tight{ padding-block:clamp(48px, 6vw, 80px); }

.pl-eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--pl-font-display);
  font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pl-muted);
  margin:0 0 1rem;
}
.pl-eyebrow::before{
  content:""; width:28px; height:4px; border-radius:2px; background:var(--pl-yellow);
}
.pl-on-ink .pl-eyebrow{ color:var(--pl-muted-on-ink); }

.pl-h2{
  font-size:clamp(1.85rem, 1.1rem + 2.7vw, 3.1rem);
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.06;
  margin:0 0 1.1rem;
}
.pl-lead{
  font-size:clamp(1.02rem, .95rem + .35vw, 1.15rem);
  color:var(--pl-muted);
  max-width:62ch;
  margin:0;
}
.pl-on-ink .pl-lead{ color:var(--pl-muted-on-ink); }
.pl-head{ margin-bottom:clamp(32px, 5vw, 56px); }
.pl-head--split{
  display:grid; gap:1.25rem 3rem; align-items:end;
}
@media (min-width:992px){
  .pl-head--split{ grid-template-columns:1.1fr .9fr; }
}

/* Yellow marker highlight (animates in when its parent is revealed) */
.pl-mark{
  position:relative; white-space:nowrap; z-index:0;
  background:linear-gradient(transparent 58%, var(--pl-yellow) 58%, var(--pl-yellow) 92%, transparent 92%) no-repeat;
  background-size:100% 100%;
}

/* ---------- 5. Buttons + chips ---------- */
.pl-btn{
  --_bg:var(--pl-ink); --_fg:#fff; --_bd:var(--pl-ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:48px; padding:.75rem 1.35rem;
  font-family:var(--pl-font-display); font-size:1rem; font-weight:700; letter-spacing:.005em;
  color:var(--_fg); background:var(--_bg);
  border:2px solid var(--_bd); border-radius:999px;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color var(--pl-dur-fast) ease, color var(--pl-dur-fast) ease,
             border-color var(--pl-dur-fast) ease, box-shadow var(--pl-dur) var(--pl-ease-out),
             transform var(--pl-dur-fast) ease;
}
.pl-btn .pl-ico{ transition:transform var(--pl-dur) var(--pl-ease-out); }
.pl-btn:hover .pl-ico:last-child{ transform:translateX(3px); }
.pl-btn:active{ transform:scale(.97); }
.pl-btn--primary{ --_bg:var(--pl-red); --_bd:var(--pl-red); --_fg:#fff; box-shadow:0 8px 20px -8px rgba(230,0,0,.55); }
.pl-btn--primary:hover{ --_bg:var(--pl-red-dark); --_bd:var(--pl-red-dark); color:#fff; box-shadow:0 12px 26px -8px rgba(230,0,0,.6); }
.pl-btn--ink:hover{ --_bg:var(--pl-ink-3); --_bd:var(--pl-ink-3); color:#fff; }
.pl-btn--ghost{ --_bg:transparent; --_fg:var(--pl-ink); --_bd:rgba(12,12,13,.18); }
.pl-btn--ghost:hover{ --_bd:var(--pl-ink); color:var(--pl-ink); }
.pl-btn--yellow{ --_bg:var(--pl-yellow); --_bd:var(--pl-yellow); --_fg:var(--pl-ink); }
.pl-btn--yellow:hover{ --_bg:#ffd633; --_bd:#ffd633; color:var(--pl-ink); }
.pl-btn--ghost-ink{ --_bg:transparent; --_fg:#fff; --_bd:rgba(255,255,255,.28); }
.pl-btn--ghost-ink:hover{ --_bd:#fff; color:#fff; }
.pl-btn--sm{ min-height:44px; padding:.5rem 1rem; font-size:.95rem; }
.pl-btn--lg{ min-height:56px; padding:.95rem 1.7rem; font-size:1.06rem; }

.pl-actions{ display:flex; flex-wrap:wrap; gap:.75rem; }

.pl-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .85rem; border-radius:999px;
  background:var(--pl-surface); border:1px solid var(--pl-line);
  font-size:.9rem; font-weight:600; color:var(--pl-text);
  text-decoration:none;
}
a.pl-chip{ transition:border-color var(--pl-dur-fast) ease, transform var(--pl-dur-fast) ease; }
a.pl-chip:hover{ border-color:var(--pl-ink); }
.pl-chip .pl-ico{ color:var(--pl-red); }

.pl-dot-live{
  position:relative; width:8px; height:8px; border-radius:50%; background:#16a34a; flex:0 0 auto;
}
.pl-dot-live::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid #16a34a; opacity:0;
  animation:pl-ping 2s var(--pl-ease-out) infinite;
}

/* Bootstrap buttons used by inner pages / CMS content → same language */
.btn{ font-family:var(--pl-font-display); font-weight:700; border-radius:999px; padding-inline:1.2rem; }
.btn-danger{ background:var(--pl-red); border-color:var(--pl-red); color:#fff; }
.btn-danger:hover,.btn-danger:focus-visible{ background:var(--pl-red-dark); border-color:var(--pl-red-dark); color:#fff; }
.btn-outline-danger{ border:2px solid var(--pl-red); color:var(--pl-red); background:transparent; }
.btn-outline-danger:hover{ background:var(--pl-red); border-color:var(--pl-red); color:#fff; }
.btn-lg{ min-height:52px; }

/* ---------- 6. Header / navigation ---------- */
.pl-topbar{
  background:var(--pl-ink); color:var(--pl-muted-on-ink);
  font-size:.82rem;
}
.pl-topbar__inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:38px;
}
.pl-topbar__items{ display:flex; gap:1.5rem; margin:0; padding:0; list-style:none; }
.pl-topbar__items li{ display:inline-flex; align-items:center; gap:.45rem; }
.pl-topbar__items .pl-ico{ color:var(--pl-yellow); width:15px; height:15px; }
.pl-topbar a{ color:#fff; text-decoration:none; font-weight:600; }
.pl-topbar a:hover{ color:var(--pl-yellow); }
.pl-topbar__items li, .pl-topbar a{ white-space:nowrap; }
@media (max-width:767.98px){
  .pl-topbar__items li:not(:first-child){ display:none; }
}
@media (max-width:519.98px){
  .pl-topbar__items{ display:none; }
  .pl-topbar__inner{ justify-content:center; }
}

.pl-header{
  position:sticky; top:0; z-index:1030;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--pl-dur) ease, box-shadow var(--pl-dur) ease, background-color var(--pl-dur) ease;
}
.pl-header.is-scrolled{
  background:rgba(255,255,255,.94);
  border-bottom-color:var(--pl-line);
  box-shadow:0 6px 24px -14px rgba(12,12,13,.25);
}
.pl-header__inner{
  display:flex; align-items:center; gap:1.25rem;
  height:var(--pl-header-h);
}
.pl-brand{ display:flex; align-items:center; flex:0 0 auto; }
.pl-brand img{
  display:block; height:52px; width:auto;
  transition:height var(--pl-dur) var(--pl-ease-out);
}
.pl-header.is-scrolled .pl-brand img{ height:44px; }

.pl-nav{ display:none; margin-left:auto; }
.pl-nav ul{ display:flex; align-items:center; gap:.25rem; list-style:none; margin:0; padding:0; }
.pl-nav a{
  position:relative; display:inline-flex; align-items:center; gap:.45rem;
  min-height:44px; padding:.5rem .8rem;
  font-weight:600; font-size:.95rem; color:var(--pl-text); text-decoration:none;
  border-radius:999px;
  transition:background-color var(--pl-dur-fast) ease;
}
.pl-nav a .pl-ico{ width:18px; height:18px; color:var(--pl-red); }
.pl-nav a:hover{ background:rgba(12,12,13,.05); }
.pl-nav a[aria-current="page"]::after{
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:6px; height:3px; border-radius:2px; background:var(--pl-yellow);
}
.pl-header__cta{ display:flex; align-items:center; gap:.5rem; margin-left:auto; }
.pl-header__login{ display:none; }

.pl-burger{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  border:1px solid var(--pl-line); background:var(--pl-surface); color:var(--pl-ink);
  cursor:pointer;
  transition:background-color var(--pl-dur-fast) ease;
}
.pl-burger:hover{ background:var(--pl-paper); }

@media (min-width:1100px){
  .pl-nav{ display:block; }
  .pl-header__cta{ margin-left:.5rem; }
  .pl-header__login{ display:inline-flex; }
  .pl-burger{ display:none; }
}
@media (min-width:1100px) and (max-width:1279.98px){
  .pl-nav a{ padding:.5rem .55rem; font-size:.9rem; }
  .pl-nav a .pl-ico{ display:none; }
}
@media (max-width:359.98px){
  .pl-header__cta .pl-btn--primary span{ display:none; }   /* icon-only "book" on very small phones */
  .pl-header__cta .pl-btn--primary{ width:48px; padding:0; }
}

/* scroll progress (pure CSS scroll-driven animation; absent where unsupported) */
.pl-progress{
  position:absolute; left:0; right:0; bottom:-1px; height:3px;
  background:var(--pl-yellow); transform-origin:0 50%; transform:scaleX(0);
}
@supports (animation-timeline: scroll()){
  .pl-progress{ animation:pl-grow linear both; animation-timeline:scroll(root); }
}
@keyframes pl-grow{ to{ transform:scaleX(1); } }

/* Drawer (mobile menu) */
.pl-drawer{
  position:fixed; inset:0; z-index:1045;
  visibility:hidden; pointer-events:none;
}
.pl-drawer.is-open{ visibility:visible; pointer-events:auto; }
.pl-drawer__scrim{
  position:absolute; inset:0; background:rgba(12,12,13,.5);
  opacity:0; transition:opacity var(--pl-dur) ease;
}
.pl-drawer__panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(420px, 100%);
  background:var(--pl-surface);
  display:flex; flex-direction:column;
  padding:16px var(--pl-gutter) calc(24px + env(safe-area-inset-bottom));
  transform:translateX(100%);
  transition:transform var(--pl-dur) var(--pl-ease-out);
  overflow-y:auto;
}
.pl-drawer.is-open .pl-drawer__scrim{ opacity:1; }
.pl-drawer.is-open .pl-drawer__panel{ transform:none; }
.pl-drawer__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.pl-drawer__top img{ height:44px; width:auto; }
.pl-drawer__nav{ list-style:none; margin:0 0 1.5rem; padding:0; }
.pl-drawer__nav li{ border-bottom:1px solid var(--pl-line); }
.pl-drawer__nav a{
  display:flex; align-items:center; gap:.85rem;
  min-height:60px; padding:.5rem .25rem;
  font-family:var(--pl-font-display); font-size:1.2rem; font-weight:700;
  color:var(--pl-text); text-decoration:none;
}
.pl-drawer__nav a .pl-ico{ color:var(--pl-red); }
.pl-drawer__nav a .pl-ico:last-child{ margin-left:auto; color:var(--pl-muted); width:20px; height:20px; }
.pl-drawer.is-open .pl-drawer__nav li{ animation:pl-drawer-item var(--pl-dur-slow) var(--pl-ease-out) both; animation-delay:calc(60ms + var(--i,0) * 45ms); }
@keyframes pl-drawer-item{ from{ opacity:0; transform:translateX(16px); } to{ opacity:1; transform:none; } }
.pl-drawer__cta{ display:grid; gap:.75rem; margin-bottom:1.5rem; }
.pl-drawer__cta .pl-btn{ width:100%; }
.pl-drawer__meta{ margin-top:auto; font-size:.92rem; color:var(--pl-muted); display:grid; gap:.5rem; }
.pl-drawer__meta span{ display:flex; align-items:center; gap:.5rem; }
.pl-drawer__meta .pl-ico{ color:var(--pl-red); width:18px; height:18px; }
body.pl-locked{ overflow:hidden; }

/* ---------- 7. Inner-page title band (page.php, blog.php, kontakt.php) ---------- */
.pl-page-hero{
  position:relative; overflow:hidden;
  background:var(--pl-yellow);
  color:var(--pl-ink);
  padding-block:clamp(40px, 6vw, 72px);
}
.pl-page-hero::after{               /* echo of the logo's sun disc */
  content:""; position:absolute; right:-120px; top:-160px;
  width:420px; height:420px; border-radius:50%;
  background:rgba(255,255,255,.28);
  pointer-events:none;
}
.pl-page-hero h1{
  font-weight:800; letter-spacing:-.025em;
  font-size:clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
  margin:0 0 .4rem; max-width:28ch;
}
.pl-page-hero p{ margin:0; position:relative; z-index:1; }
.pl-page-hero > .pl-wrap, .pl-page-hero > .container{ position:relative; z-index:1; }
.pl-page-hero .small{ opacity:.8; }

/* ---------- 8. Homepage ---------- */

/* 8.1 Hero */
.pl-hero{
  position:relative; overflow:hidden;
  padding-block:clamp(40px, 6vw, 88px) clamp(56px, 7vw, 104px);
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(255,204,0,.22), transparent 60%),
    var(--pl-paper);
}
.pl-hero::before{                    /* faint street-grid texture */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(12,12,13,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12,12,13,.045) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 70% 40%, #000 20%, transparent 70%);
          mask-image:radial-gradient(ellipse at 70% 40%, #000 20%, transparent 70%);
}
.pl-hero__grid{
  position:relative; display:grid; gap:clamp(40px, 5vw, 64px); align-items:center;
}
.pl-hero__grid > *{ min-width:0; }
@media (min-width:992px){
  .pl-hero__grid{ grid-template-columns:1.05fr .95fr; }
}
.pl-hero__badge{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.4rem .9rem .4rem .7rem; margin-bottom:1.25rem;
  background:var(--pl-surface); border:1px solid var(--pl-line); border-radius:999px;
  font-size:.88rem; font-weight:600; box-shadow:var(--pl-shadow-sm);
}
.pl-hero h1{
  font-size:clamp(2.2rem, 1.25rem + 3.9vw, 4.1rem);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.02;
  margin:0 0 1.25rem;
  max-width:16ch;
}
.pl-hero__sub{
  font-size:clamp(1.05rem, .98rem + .4vw, 1.25rem);
  color:var(--pl-muted);
  max-width:46ch; margin:0 0 2rem;
}
.pl-hero__trust{
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem;
  list-style:none; margin:1.75rem 0 0; padding:0;
  font-size:.94rem; font-weight:600; color:var(--pl-text);
}
.pl-hero__trust li{ display:inline-flex; align-items:center; gap:.45rem; }
.pl-hero__trust .pl-ico{
  width:20px; height:20px; padding:3px; border-radius:50%;
  background:var(--pl-ink); color:var(--pl-yellow); stroke-width:3;
}

/* hero visual */
.pl-hero__visual{ position:relative; padding:28px 8px 0; }
.pl-hero__sun{
  position:absolute; z-index:0; border-radius:50%;
  width:min(78%, 440px); aspect-ratio:1;
  right:2%; top:50%; transform:translateY(-50%);
  background:var(--pl-yellow);
  box-shadow:inset 0 0 0 10px var(--pl-ink);
}
.pl-hero__media{
  position:relative; z-index:1;
  border-radius:var(--pl-radius-lg);
  background:var(--pl-ink);
  padding:10px;
  box-shadow:var(--pl-shadow-lg);
  transform:rotate(-1.5deg);
}
.pl-hero__media video,
.pl-hero__media img{
  display:block; width:100%; height:auto;
  aspect-ratio:848 / 464; object-fit:cover;
  border-radius:calc(var(--pl-radius-lg) - 10px);
  background:#f3e7b7;
}
/* Animated hero scene (replaces the stock video): courier in Packlast uniform,
   the Packlast van drives in from the left, brakes and parks. */
.pl-scene{
  position:relative; overflow:hidden; isolation:isolate;
  aspect-ratio:848 / 464; border-radius:calc(var(--pl-radius-lg) - 10px); background:#f3e7b7;
}
.pl-hero__media .pl-scene img{ aspect-ratio:auto; border-radius:0; background:none; }
.pl-scene__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pl-scene__van{
  position:absolute; left:56.5%; bottom:-1.6%; width:45%;
  animation:pl-van-drive 2.6s cubic-bezier(.16,.84,.28,1) .45s both;
}
.pl-scene__van picture{ display:block; transform-origin:62% 92%; animation:pl-van-brake 2.6s linear .45s both; }
.pl-scene__van img{ display:block; width:100%; height:auto; }
.pl-scene__shadow{
  position:absolute; left:4%; right:2%; bottom:3%; height:9%; z-index:-1;
  background:radial-gradient(closest-side, rgba(40,25,0,.38), transparent); filter:blur(2px);
}
.pl-scene__van::before{                       /* air streaks while moving */
  content:""; position:absolute; right:100%; top:38%; width:46%; height:34%;
  background:repeating-linear-gradient(180deg, transparent 0 18%, rgba(255,255,255,.75) 18% 24%, transparent 24% 40%);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000); mask-image:linear-gradient(90deg, transparent, #000);
  animation:pl-van-streaks 2.6s ease-out .45s both;
}
@keyframes pl-van-drive{
  0%   { transform:translateX(-232%); }
  78%  { transform:translateX(1.2%); }
  90%  { transform:translateX(-.4%); }
  100% { transform:none; }
}
@keyframes pl-van-brake{                       /* road vibration, nose dips when braking, settles */
  0%,8%,16%,24%,32%,40%,48%,56%,64% { translate:0 0; }
  4%,12%,20%,28%,36%,44%,52%,60%   { translate:0 -.6%; }
  70%  { rotate:0deg; }
  79%  { rotate:1.6deg; }
  88%  { rotate:-.6deg; }
  95%  { rotate:.2deg; }
  100% { rotate:0deg; translate:0 0; }
}
@keyframes pl-van-streaks{ 0%{ opacity:0; } 10%,55%{ opacity:1; } 80%,100%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){
  .pl-scene__van, .pl-scene__van picture, .pl-scene__van::before{ animation:none; }
  .pl-scene__van::before{ display:none; }
}

.pl-float{
  position:absolute; z-index:2;
  background:var(--pl-surface); border:1px solid var(--pl-line);
  border-radius:16px; box-shadow:var(--pl-shadow);
  padding:.7rem .9rem;
  display:flex; align-items:center; gap:.7rem;
  font-size:.86rem; line-height:1.25;
}
.pl-float strong{ display:block; font-family:var(--pl-font-display); font-size:1rem; }
.pl-float__ico{
  width:38px; height:38px; border-radius:12px; flex:0 0 auto;
  display:grid; place-items:center; background:var(--pl-yellow); color:var(--pl-ink);
}
.pl-float__ico .pl-ico{ width:20px; height:20px; }
.pl-float--pickup{ left:-6px; top:0; }
.pl-float--eco{ left:-6px; right:auto; top:40%; }   /* left side: the parked van on the right stays visible */
.pl-float--eco .pl-float__ico{ background:#dcfce7; color:#166534; }

/* tracking demo card (illustrative, clearly labelled as example) */
.pl-track{
  position:relative; z-index:3; margin:-44px auto 0 0; width:min(64%, 380px);   /* bottom-left, under the door — not over the van */
  background:var(--pl-ink); color:#fff;
  border-radius:20px; padding:14px 16px 12px;
  box-shadow:var(--pl-shadow-lg);
}
.pl-track__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:.8rem; color:var(--pl-muted-on-ink); }
.pl-track__status{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--pl-font-display); font-weight:700; font-size:.95rem; color:#fff;
}
.pl-track__status .pl-dot-live{ background:var(--pl-yellow); }
.pl-track__status .pl-dot-live::after{ border-color:var(--pl-yellow); }
.pl-track svg{ display:block; width:100%; height:auto; margin-top:6px; overflow:visible; }
.pl-track__base{ stroke:rgba(255,255,255,.22); stroke-dasharray:3 6; }
.pl-track__done{ stroke:var(--pl-yellow); }
.pl-track__legend{ display:flex; justify-content:space-between; font-size:.74rem; color:var(--pl-muted-on-ink); margin-top:2px; }

@media (min-width:576px){
  .pl-float--pickup{ left:-18px; }
  .pl-float--eco{ left:-18px; right:auto; }
}
@media (max-width:575.98px){
  .pl-hero__visual{ padding:20px 0 0; }
  .pl-float{ font-size:.8rem; padding:.55rem .7rem; }
  .pl-float__ico{ width:32px; height:32px; }
  .pl-float--eco{ display:none; }
  .pl-track{ width:100%; margin-top:12px; }   /* phones: below the scene, the van stays visible */
}

/* 8.2 District marquee */
.pl-marquee{
  background:var(--pl-ink); color:#fff;
  overflow:hidden; padding-block:18px;
  border-block:4px solid var(--pl-yellow);
}
.pl-marquee__track{
  display:flex; gap:0; width:max-content;
  animation:pl-marquee 48s linear infinite;
}
.pl-marquee:hover .pl-marquee__track{ animation-play-state:paused; }
.pl-marquee__group{ display:flex; align-items:center; flex:0 0 auto; margin:0; padding:0; list-style:none; }
.pl-marquee__group li{
  display:inline-flex; align-items:center; gap:1.5rem; padding-right:1.5rem;
  font-family:var(--pl-font-display); font-weight:700; font-size:clamp(1.05rem, .9rem + .6vw, 1.45rem);
  letter-spacing:-.01em; white-space:nowrap;
}
.pl-marquee__group li::after{
  content:""; width:10px; height:10px; border-radius:50%; background:var(--pl-yellow);
}
@keyframes pl-marquee{ to{ transform:translateX(-50%); } }

/* 8.3 Intro + stats */
.pl-intro{ display:grid; gap:clamp(32px, 5vw, 72px); }
@media (min-width:992px){ .pl-intro{ grid-template-columns:1fr 1fr; align-items:start; } }
.pl-intro__text p:not(.pl-eyebrow){ color:var(--pl-muted); font-size:1.06rem; margin:0 0 1rem; }   /* not the small label */
.pl-intro__text p strong{ color:var(--pl-text); }
.pl-stats{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.pl-stat{
  position:relative; overflow:hidden;
  background:var(--pl-surface); border:1px solid var(--pl-line);
  border-radius:var(--pl-radius); padding:22px 20px 20px;
}
.pl-stat__num{
  display:block;
  font-family:var(--pl-font-display); font-weight:800;
  font-size:clamp(1.75rem, 1.2rem + 2.2vw, 3.3rem); line-height:1; letter-spacing:-.04em; white-space:nowrap;
  font-variant-numeric:tabular-nums;
  margin-bottom:.5rem;
}
.pl-stat__num small{ font-size:.45em; font-weight:700; letter-spacing:0; margin-left:.15em; }
.pl-stat p{ margin:0; font-size:.93rem; color:var(--pl-muted); line-height:1.4; }
.pl-stat--ink{ background:var(--pl-ink); border-color:var(--pl-ink); color:#fff; }
.pl-stat--ink p{ color:var(--pl-muted-on-ink); }
.pl-stat--ink .pl-stat__num{ color:var(--pl-yellow); }
.pl-stat--yellow{ background:var(--pl-yellow); border-color:var(--pl-yellow); }
.pl-stat--yellow p{ color:var(--pl-ink-2); }

/* 8.4 Services (bento) */
.pl-features{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }
.pl-bento{
  display:grid; gap:14px;
  grid-template-columns:1fr;
}
@media (min-width:640px){ .pl-bento{ grid-template-columns:1fr 1fr; } }
@media (min-width:992px){
  .pl-bento{ grid-template-columns:repeat(3, 1fr); }
  .pl-card--wide{ grid-column:span 2; }
}
.pl-card{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column;
  background:var(--pl-surface);
  border:1px solid var(--pl-line);
  border-radius:var(--pl-radius-lg);
  padding:clamp(22px, 2.6vw, 30px);
  text-decoration:none; color:inherit;
  transition:transform var(--pl-dur) var(--pl-ease-out), box-shadow var(--pl-dur) var(--pl-ease-out), border-color var(--pl-dur) ease;
}
a.pl-card:hover{ transform:translateY(-4px); box-shadow:var(--pl-shadow); border-color:transparent; color:inherit; }
/* pointer-following spotlight (set by JS via --mx/--my; harmless if JS is off) */
.pl-spot::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,204,0,.22), transparent 45%);
  transition:opacity var(--pl-dur) ease;
}
.pl-spot:hover::before{ opacity:1; }
.pl-card__icon{
  width:54px; height:54px; border-radius:16px;
  display:grid; place-items:center;
  background:var(--pl-yellow-soft); color:var(--pl-ink);
  margin-bottom:1.25rem;
  transition:transform var(--pl-dur) var(--pl-ease-spring), background-color var(--pl-dur) ease;
}
.pl-card__icon .pl-ico{ width:26px; height:26px; }
a.pl-card:hover .pl-card__icon{ transform:rotate(-8deg) scale(1.06); background:var(--pl-yellow); }
.pl-card h3{ font-size:clamp(1.2rem, 1.05rem + .5vw, 1.45rem); font-weight:800; margin:0 0 .6rem; letter-spacing:-.02em; }
.pl-card p{ color:var(--pl-muted); margin:0 0 1.5rem; }
.pl-card__link{
  margin-top:auto; display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--pl-font-display); font-weight:700; color:var(--pl-red);
}
.pl-card__link .pl-ico{ width:18px; height:18px; transition:transform var(--pl-dur) var(--pl-ease-out); }
a.pl-card:hover .pl-card__link .pl-ico{ transform:translate(3px,-3px); }
.pl-card__tag{
  position:absolute; top:clamp(22px, 2.6vw, 30px); right:clamp(22px, 2.6vw, 30px);
  font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.3rem .6rem; border-radius:999px; background:var(--pl-ink); color:var(--pl-yellow);
}

.pl-card--ink{ background:var(--pl-ink); border-color:var(--pl-ink); color:#fff; }
.pl-card--ink p{ color:var(--pl-muted-on-ink); }
.pl-card--ink .pl-card__icon{ background:var(--pl-yellow); }
.pl-card--ink .pl-card__link{ color:var(--pl-yellow); }
.pl-card--ink .pl-card__tag{ background:var(--pl-yellow); color:var(--pl-ink); }
a.pl-card--ink:hover{ color:#fff; }
.pl-card--ink.pl-spot::before{ background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,204,0,.16), transparent 45%); }
.pl-card--yellow{ background:var(--pl-yellow); border-color:var(--pl-yellow); }
.pl-card--yellow p{ color:var(--pl-ink-2); }
.pl-card--yellow .pl-card__icon{ background:var(--pl-ink); color:var(--pl-yellow); }
.pl-card--yellow .pl-card__link{ color:var(--pl-ink); }
@media (min-width:992px){
  .pl-card--wide.pl-card--ink{ min-height:300px; }
  .pl-card--wide h3{ font-size:clamp(1.5rem, 1.1rem + 1vw, 2rem); max-width:30ch; }
  .pl-card--wide p{ max-width:52ch; }
}

/* 8.4b Fleet band: the real Packlast vehicle on a moving road */
.pl-fleet{
  position:relative; overflow:hidden; isolation:isolate;
  background:radial-gradient(700px 300px at 80% 20%, rgba(255,204,0,.16), transparent 60%), var(--pl-ink);
  color:#fff; padding:clamp(48px, 6vw, 80px) 0 0;
}
.pl-fleet__grid{ display:grid; gap:24px 48px; align-items:end; }
@media (min-width:992px){ .pl-fleet__grid{ grid-template-columns:.9fr 1.1fr; } }
.pl-fleet h2{ color:#fff; }
.pl-fleet h2 .accent{ color:var(--pl-yellow); }
.pl-fleet__chips{ list-style:none; margin:1.5rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.pl-fleet__chips li{ display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .85rem; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); font-weight:600; font-size:.9rem; }
.pl-fleet__chips .pl-ico{ color:var(--pl-yellow); }
.pl-fleet__text{ padding-bottom:clamp(24px, 4vw, 56px); }
.pl-fleet__van{ position:relative; margin:0; z-index:1; transform:translateX(var(--fleet-x, 0px)); will-change:transform; }
.pl-fleet__van img{ display:block; width:100%; height:auto; filter:drop-shadow(0 18px 18px rgba(0,0,0,.45)); animation:pl-fleet-idle 1.4s ease-in-out infinite; }
@keyframes pl-fleet-idle{ 0%,100%{ translate:0 0; } 50%{ translate:0 -1.5px; } }
.pl-fleet__road{
  position:relative; height:46px; margin-top:-26px; background:#1b1b1f;
  border-top:4px solid #2b2b30;
}
.pl-fleet__road::after{                       /* moving centre line */
  content:""; position:absolute; left:0; right:0; top:50%; height:4px; transform:translateY(-50%);
  background:repeating-linear-gradient(90deg, var(--pl-yellow) 0 44px, transparent 44px 88px);
  animation:pl-road 1.1s linear infinite;
}
@keyframes pl-road{ from{ background-position:0 0; } to{ background-position:88px 0; } }   /* van faces left, so the road flows right */
@media (prefers-reduced-motion:reduce){ .pl-fleet__road::after, .pl-fleet__van img{ animation:none; } .pl-fleet__van{ transform:none; } }

/* 8.5 App promo */
.pl-app{
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; gap:2.5rem; align-items:center;
  background:var(--pl-ink); color:#fff;
  border-radius:clamp(24px, 3vw, 36px);
  padding:clamp(28px, 5vw, 64px);
}
@media (min-width:992px){ .pl-app{ grid-template-columns:1.2fr .8fr; } }
.pl-app::before{
  content:""; position:absolute; z-index:-1;
  width:520px; height:520px; right:-160px; bottom:-260px; border-radius:50%;
  background:var(--pl-yellow); opacity:.95;
}
.pl-app h2{ color:#fff; }
.pl-app h2 .accent{ color:var(--pl-yellow); }
.pl-app__list{ list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:.7rem; }
.pl-app__list li{ display:flex; gap:.7rem; align-items:flex-start; color:var(--pl-muted-on-ink); }
.pl-app__list li strong{ color:#fff; }
.pl-app__list .pl-ico{ color:var(--pl-yellow); margin-top:.2em; }
.pl-app__get{
  justify-self:center;
  display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; justify-content:center;
  background:var(--pl-surface); color:var(--pl-ink);
  border-radius:var(--pl-radius-lg); padding:20px;
  box-shadow:var(--pl-shadow-lg);
}
.pl-app__get .qr-img{ width:150px; height:150px; border-radius:12px; display:block; }
.pl-app__stores{ display:grid; gap:.6rem; justify-items:center; }
.pl-app__stores a{ display:block; line-height:0; border-radius:10px; transition:transform var(--pl-dur-fast) ease; }
.pl-app__stores a:hover{ transform:translateY(-2px); }
.pl-app__stores img{ height:50px; width:auto; display:block; }
.pl-app__hint{ font-size:.82rem; color:var(--pl-muted); margin:0; text-align:center; width:100%; }

/* 8.6 Benefits */
.pl-benefits{ display:grid; gap:14px; }
@media (min-width:768px){ .pl-benefits{ grid-template-columns:repeat(3, 1fr); } }
.pl-benefit{
  background:var(--pl-surface); border:1px solid var(--pl-line);
  border-radius:var(--pl-radius-lg); padding:clamp(24px, 2.6vw, 32px);
}
.pl-benefit__num{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:1.75rem;
  font-family:var(--pl-font-display); font-weight:800; color:var(--pl-muted); font-size:.9rem; letter-spacing:.08em;
}
.pl-benefit__num .pl-card__icon{ margin:0; }
.pl-benefit h3{ font-size:1.3rem; font-weight:800; margin:0 0 .6rem; }
.pl-benefit p{ margin:0; color:var(--pl-muted); }
.pl-benefit p strong{ color:var(--pl-text); }

/* 8.7 How it works */
.pl-how{ display:grid; gap:clamp(32px, 5vw, 72px); }
@media (min-width:992px){
  .pl-how{ grid-template-columns:.8fr 1.2fr; align-items:start; }
  .pl-how__aside{ position:sticky; top:calc(var(--pl-header-h) + 32px); }
}
.pl-steps{ position:relative; padding-left:64px; }
.pl-steps__list{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(40px, 6vw, 72px); }
.pl-steps__rail{
  position:absolute; left:23px; top:8px; bottom:8px; width:3px; border-radius:3px;
  background:var(--pl-line); overflow:hidden;
}
.pl-steps__rail span{
  position:absolute; inset:0; background:var(--pl-ink);
  transform-origin:top; transform:scaleY(var(--pl-progress, 1));
}
.pl-step{ position:relative; }
.pl-step__num{
  position:absolute; left:-64px; top:0;
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--pl-font-display); font-weight:800; font-size:1.2rem;
  background:var(--pl-surface); color:var(--pl-ink); border:3px solid var(--pl-line);
  transition:background-color var(--pl-dur) ease, border-color var(--pl-dur) ease, transform var(--pl-dur) var(--pl-ease-spring);
}
.pl-step.is-active .pl-step__num{ background:var(--pl-yellow); border-color:var(--pl-ink); transform:scale(1.08); }
.pl-step h3{ font-size:clamp(1.25rem, 1.05rem + .7vw, 1.6rem); font-weight:800; margin:.55rem 0 .6rem; }
.pl-step p{ color:var(--pl-muted); margin:0 0 1.25rem; max-width:56ch; }
.pl-step__caption{ font-family:var(--pl-font-display); font-weight:700; font-size:1.05rem; margin:0 0 .75rem; }
.pl-step video{
  display:block; width:100%; max-width:520px; height:auto;
  aspect-ratio:848 / 464; object-fit:cover;
  border-radius:var(--pl-radius); background:#f3e7b7;
  border:1px solid var(--pl-line);
}

/* 8.8 Use cases */
.pl-uses{ display:grid; gap:14px; }
@media (min-width:640px){ .pl-uses{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .pl-uses{ grid-template-columns:repeat(4, 1fr); } }
.pl-use{
  background:var(--pl-surface); border:1px solid var(--pl-line);
  border-radius:var(--pl-radius-lg); padding:24px;
  display:flex; flex-direction:column;
}
.pl-use .pl-card__icon{ width:48px; height:48px; border-radius:14px; margin-bottom:1rem; }
.pl-use__tag{
  align-self:flex-start;
  font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--pl-red-dark); background:#fdecec; border-radius:999px; padding:.3rem .65rem; margin-bottom:.75rem;
}
.pl-use h3{ font-size:1.15rem; font-weight:800; margin:0 0 .5rem; }
.pl-use p{ margin:0; color:var(--pl-muted); font-size:.96rem; }
.pl-use p strong{ color:var(--pl-text); }

/* 8.9 Gallery (scroll-snap carousel) */
.pl-gallery{ position:relative; }
.pl-gallery__track{
  display:grid; grid-auto-flow:column; grid-auto-columns:86%;
  gap:14px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-inline:var(--pl-gutter);
  padding:4px var(--pl-gutter) 8px; margin-inline:calc(var(--pl-gutter) * -1);
  scrollbar-width:none;
}
.pl-gallery__track::-webkit-scrollbar{ display:none; }
@media (min-width:768px){ .pl-gallery__track{ grid-auto-columns:calc(50% - 7px); } }
.pl-gallery__slide{ scroll-snap-align:start; margin:0; }
.pl-gallery__slide button{
  display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in;
  border-radius:var(--pl-radius); overflow:hidden;
}
.pl-gallery__slide img{
  display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover;
  border-radius:var(--pl-radius); border:1px solid var(--pl-line); background:var(--pl-paper);
  transition:transform var(--pl-dur-slow) var(--pl-ease-out);
}
.pl-gallery__slide button:hover img{ transform:scale(1.025); }
.pl-gallery__controls{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.25rem; }
.pl-gallery__dots{ display:flex; gap:.4rem; }
.pl-gallery__dots button{
  width:44px; height:44px; padding:0; border:0; background:none; cursor:pointer;
  display:grid; place-items:center;
}
.pl-gallery__dots button::before{
  content:""; width:10px; height:10px; border-radius:999px; background:var(--pl-line);
  transition:width var(--pl-dur) var(--pl-ease-out), background-color var(--pl-dur) ease;
}
.pl-gallery__dots button[aria-current="true"]::before{ width:28px; background:var(--pl-ink); }
.pl-gallery__arrows{ display:flex; gap:.5rem; }
.pl-round{
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--pl-line); background:var(--pl-surface); color:var(--pl-ink);
  cursor:pointer; transition:background-color var(--pl-dur-fast) ease, border-color var(--pl-dur-fast) ease, opacity var(--pl-dur-fast) ease;
}
.pl-round:hover{ border-color:var(--pl-ink); }
.pl-round:disabled{ opacity:.35; cursor:default; }

/* 8.10 Delivery area */
.pl-area{ display:grid; gap:clamp(32px, 5vw, 64px); align-items:center; }
@media (min-width:992px){ .pl-area{ grid-template-columns:1fr 1fr; } }
.pl-area__chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1.5rem 0 2rem; padding:0; list-style:none; }
.pl-area__map{
  position:relative; margin:0;
  border-radius:var(--pl-radius-lg); overflow:hidden;
  background:#f6e7dc;
  box-shadow:var(--pl-shadow);
}
.pl-area__map img{ display:block; width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover; }
.pl-area__badge{
  position:absolute; left:16px; bottom:16px;
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--pl-ink); color:#fff; border-radius:999px; padding:.5rem .9rem;
  font-weight:700; font-size:.88rem;
}
.pl-area__badge .pl-ico{ color:var(--pl-yellow); width:18px; height:18px; }

/* 8.11 FAQ (native details/summary — works without JS) */
.pl-faq{ display:grid; gap:clamp(32px, 5vw, 72px); }
@media (min-width:992px){ .pl-faq{ grid-template-columns:.8fr 1.2fr; align-items:start; } }
.pl-faq__list{ display:grid; gap:10px; }
.pl-qa{
  background:var(--pl-surface); border:1px solid var(--pl-line); border-radius:var(--pl-radius);
  transition:border-color var(--pl-dur) ease, box-shadow var(--pl-dur) ease;
}
.pl-qa[open]{ border-color:var(--pl-ink); box-shadow:var(--pl-shadow-sm); }
.pl-qa summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:64px; padding:1rem 1.25rem;
  border-radius:var(--pl-radius);
}
.pl-qa summary::-webkit-details-marker{ display:none; }
.pl-qa summary h3{ font-size:1.08rem; font-weight:700; margin:0; letter-spacing:-.01em; }
.pl-qa summary .pl-ico{
  width:32px; height:32px; padding:6px; border-radius:50%; background:var(--pl-paper);
  transition:transform var(--pl-dur) var(--pl-ease-out), background-color var(--pl-dur) ease;
}
.pl-qa[open] summary .pl-ico{ transform:rotate(45deg); background:var(--pl-yellow); }
.pl-qa__body{ padding:0 1.25rem 1.25rem; color:var(--pl-muted); }
.pl-qa__body p{ margin:0; }
.pl-qa__body strong{ color:var(--pl-text); }
/* smooth height where the browser supports animating to auto */
@supports (interpolate-size: allow-keywords){
  .pl-faq__list{ interpolate-size:allow-keywords; }
  .pl-qa::details-content{
    block-size:0; overflow:hidden;
    transition:block-size var(--pl-dur) var(--pl-ease-out), content-visibility var(--pl-dur) allow-discrete;
  }
  .pl-qa[open]::details-content{ block-size:auto; }
}

/* 8.12 Related links */
.pl-links{ list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:1px solid var(--pl-line); }
@media (min-width:768px){ .pl-links{ grid-template-columns:1fr 1fr; column-gap:3rem; } }
.pl-links a{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:64px; padding:.75rem 0;
  border-bottom:1px solid var(--pl-line);
  font-family:var(--pl-font-display); font-weight:700; font-size:1.08rem;
  text-decoration:none; color:var(--pl-text);
  transition:color var(--pl-dur-fast) ease, padding var(--pl-dur) var(--pl-ease-out);
}
.pl-links a .pl-ico{ color:var(--pl-red); transition:transform var(--pl-dur) var(--pl-ease-out); }
.pl-links a:hover{ padding-left:.5rem; }
.pl-links a:hover .pl-ico{ transform:translate(3px,-3px); }

/* 8.13 Contact / location */
.pl-contact{ display:grid; gap:clamp(28px, 4vw, 56px); align-items:stretch; }
@media (min-width:992px){ .pl-contact{ grid-template-columns:.85fr 1.15fr; } }
.pl-nap{ list-style:none; margin:1.5rem 0 2rem; padding:0; display:grid; gap:.9rem; }
.pl-nap li{ display:flex; gap:.9rem; align-items:flex-start; }
.pl-nap__ico{
  width:44px; height:44px; border-radius:14px; flex:0 0 auto;
  display:grid; place-items:center; background:var(--pl-yellow-soft); color:var(--pl-ink);
}
.pl-nap__ico .pl-ico{ width:20px; height:20px; }
.pl-nap small{ display:block; color:var(--pl-muted); font-size:.85rem; }
.pl-nap strong, .pl-nap a{ font-weight:700; color:var(--pl-text); text-decoration:none; }
.pl-nap a:hover{ text-decoration:underline; }

/* 8.14 Final CTA band */
.pl-cta{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--pl-yellow); color:var(--pl-ink);
  border-radius:clamp(24px, 3vw, 36px);
  padding:clamp(32px, 6vw, 80px);
  display:grid; gap:2rem; align-items:center;
}
@media (min-width:992px){ .pl-cta{ grid-template-columns:1.3fr auto; } }
.pl-cta h2{ font-size:clamp(2rem, 1.2rem + 3vw, 3.5rem); font-weight:800; letter-spacing:-.035em; line-height:1.02; margin:0 0 .75rem; }
.pl-cta p{ margin:0; font-size:1.1rem; max-width:48ch; }
.pl-cta__van{
  position:absolute; z-index:-1; left:-50px; bottom:-70px;
  width:240px; height:240px; color:rgba(12,12,13,.06); transform:scaleX(-1);
}

/* ---------- 8b. Inner pages (CMS content, blog, index) ---------- */

/* Breadcrumbs */
.pl-crumbs{ position:relative; z-index:1; margin-bottom:1rem; font-size:.88rem; }
.pl-crumbs ol{ display:flex; flex-wrap:wrap; gap:.25rem .5rem; list-style:none; margin:0; padding:0; }
.pl-crumbs li{ display:inline-flex; align-items:center; gap:.5rem; color:inherit; }
.pl-crumbs li + li::before{ content:""; width:6px; height:6px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); opacity:.45; }
.pl-crumbs a{ text-decoration:none; opacity:.75; }
.pl-crumbs a:hover{ opacity:1; text-decoration:underline; }
.pl-crumbs [aria-current]{ font-weight:600; }
.pl-crumbs li + li::before{ flex:0 0 auto; }

/* Service / location hero (smaller than the homepage hero) */
.pl-hero--page{ padding-block:clamp(28px, 4vw, 56px) clamp(40px, 5vw, 72px); }
.pl-hero--page h1{ font-size:clamp(2rem, 1.2rem + 3vw, 3.3rem); max-width:22ch; }
.pl-hero--page .pl-hero__sub{ margin-bottom:1.75rem; }
.pl-facts{
  position:relative; background:var(--pl-ink); color:#fff;
  border-radius:var(--pl-radius-lg); padding:24px 24px 12px;
  box-shadow:var(--pl-shadow-lg);
}
.pl-facts{ border-top:6px solid var(--pl-yellow); }
.pl-facts__title{ display:flex; align-items:center; gap:.6rem; font-family:var(--pl-font-display); font-weight:700; margin:0 0 .75rem; }
.pl-facts__title .pl-dot-live{ background:var(--pl-yellow); }
.pl-facts__title .pl-dot-live::after{ border-color:var(--pl-yellow); }
.pl-facts dl{ margin:0; }
.pl-facts dl > div{ display:flex; justify-content:space-between; gap:1rem; padding:.8rem 0; border-top:1px solid var(--pl-line-ink); }
.pl-facts dt{ display:flex; align-items:center; gap:.55rem; font-weight:500; color:var(--pl-muted-on-ink); }
.pl-facts dt .pl-ico{ color:var(--pl-yellow); width:18px; height:18px; }
.pl-facts dd{ margin:0; font-weight:700; text-align:right; }
@media (min-width:992px){ .pl-hero--page .pl-hero__grid{ grid-template-columns:1.25fr .75fr; } }

/* Article layout: content + sticky sidebar (TOC / booking card) */
.pl-section--article{ padding-block:clamp(32px, 5vw, 64px) clamp(56px, 7vw, 96px); }
.pl-layout{ display:grid; gap:24px; align-items:start; }
@media (min-width:992px){
  .pl-layout{ grid-template-columns:minmax(0, 1fr) 300px; gap:40px; }
  .pl-layout__aside{ grid-column:2; grid-row:1; height:100%; }
  .pl-layout .pl-article{ grid-column:1; grid-row:1; }
  .pl-layout__sticky{ position:sticky; top:calc(var(--pl-header-h) + 24px); display:grid; gap:16px; }
}
@media (max-width:991.98px){
  /* phones: TOC stays above the text; the booking card is dropped because the
     facts card + sticky booking bar already cover it */
  .pl-layout__aside .pl-bookcard{ display:none; }
  .pl-layout--notoc .pl-layout__aside{ display:none; }
  .pl-layout__sticky{ display:grid; gap:16px; }
}
.pl-layout--single{ max-width:900px; grid-template-columns:minmax(0, 1fr) !important; }
.pl-layout--single .pl-article{ grid-column:auto !important; }

.pl-article{
  min-width:0;
  background:var(--pl-surface); border:1px solid var(--pl-line);
  border-radius:var(--pl-radius-lg);
  padding:clamp(22px, 4.5vw, 56px);
}
.pl-article__cover{ display:block; width:100%; height:auto; max-height:460px; object-fit:cover; border-radius:var(--pl-radius); margin-bottom:2rem; }
.pl-article__stamp{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  margin:2.5rem 0 0; padding-top:1.25rem; border-top:1px solid var(--pl-line);
  font-size:.86rem; color:var(--pl-muted);
}
.pl-article__stamp .pl-ico{ width:16px; height:16px; }

/* Table of contents */
.pl-toc{
  background:var(--pl-surface); border:1px solid var(--pl-line); border-radius:var(--pl-radius);
  padding:4px 0;
}
.pl-toc summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  min-height:48px; padding:.5rem 1.1rem;
  font-family:var(--pl-font-display); font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--pl-muted);
}
.pl-toc summary::-webkit-details-marker{ display:none; }
.pl-toc summary::after{ content:""; width:8px; height:8px; border-right:2px solid; border-bottom:2px solid; transform:rotate(45deg); transition:transform var(--pl-dur) var(--pl-ease-out); }
.pl-toc[open] summary::after{ transform:rotate(-135deg); }
.pl-toc ol{ list-style:none; margin:0; padding:0 .5rem .6rem; max-height:min(52vh, 460px); overflow-y:auto; }
.pl-toc a{
  display:block; padding:.45rem .6rem; border-radius:10px;
  font-size:.92rem; line-height:1.35; color:var(--pl-muted); text-decoration:none;
  border-left:3px solid transparent;
  transition:background-color var(--pl-dur-fast) ease, color var(--pl-dur-fast) ease;
}
.pl-toc a:hover{ background:var(--pl-paper); color:var(--pl-text); }
.pl-toc a.is-active{ color:var(--pl-ink); font-weight:600; background:var(--pl-yellow-soft); border-left-color:var(--pl-yellow); border-radius:0 10px 10px 0; }

/* Booking card */
.pl-bookcard{
  background:var(--pl-ink); color:#fff; border-radius:var(--pl-radius);
  padding:20px; display:grid; gap:.7rem;
}
.pl-bookcard__title{ font-family:var(--pl-font-display); font-weight:800; font-size:1.2rem; margin:0; }
.pl-bookcard__facts{ list-style:none; margin:0 0 .4rem; padding:0; display:grid; gap:.45rem; font-size:.9rem; color:var(--pl-muted-on-ink); }
.pl-bookcard__facts li{ display:flex; align-items:center; gap:.55rem; }
.pl-bookcard__facts .pl-ico{ width:17px; height:17px; color:var(--pl-yellow); }
.pl-bookcard .pl-btn{ width:100%; }
.pl-bookcard .pl-btn--ghost{ --_fg:#fff; --_bd:rgba(255,255,255,.25); }
.pl-bookcard .pl-btn--ghost:hover{ --_bd:#fff; color:#fff; }

/* ---- Prose: typography for HTML coming from the CMS ---- */
.pl-prose{
  color:#2b2f36; font-size:1.0625rem; line-height:1.78;
  overflow-wrap:break-word;
}
.pl-prose > :first-child{ margin-top:0 !important; }
.pl-prose p{ margin:0 0 1.15rem; }
.pl-prose h2,.pl-prose h3,.pl-prose h4,.pl-prose h5{ color:var(--pl-ink); scroll-margin-top:calc(var(--pl-header-h) + 24px); }
.pl-prose h2{ font-size:clamp(1.45rem, 1.2rem + .9vw, 1.9rem); font-weight:800; letter-spacing:-.02em; margin:2.75rem 0 1rem; }
.pl-prose h2:not(.app-promo__title)::before{
  content:""; display:block; width:36px; height:5px; border-radius:3px; background:var(--pl-yellow); margin-bottom:.9rem;
}
.pl-prose h3{ font-size:clamp(1.15rem, 1.05rem + .4vw, 1.35rem); font-weight:700; margin:2rem 0 .6rem; }
.pl-prose h4,.pl-prose h5{ font-size:1.1rem; font-weight:700; margin:1.6rem 0 .5rem; }
.pl-prose strong,.pl-prose b{ color:var(--pl-ink); font-weight:650; }
.pl-prose a:not(.btn):not(.pl-btn){
  color:var(--pl-red-dark); font-weight:500;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  transition:color var(--pl-dur-fast) ease, text-decoration-color var(--pl-dur-fast) ease;
}
.pl-prose a:not(.btn):not(.pl-btn):hover{ color:var(--pl-ink); text-decoration-color:var(--pl-yellow); text-decoration-thickness:3px; }

.pl-prose ul,.pl-prose ol{ margin:0 0 1.35rem; padding:0; list-style:none; }
.pl-prose li{ position:relative; padding-left:1.75rem; margin-bottom:.55rem; }
.pl-prose ul > li::before{
  content:""; position:absolute; left:.3rem; top:.68em;
  width:8px; height:8px; border-radius:50%; background:var(--pl-yellow); box-shadow:0 0 0 2px var(--pl-ink);
}
.pl-prose ol{ counter-reset:pl-ol; }
.pl-prose ol > li{ counter-increment:pl-ol; padding-left:2.4rem; }
.pl-prose ol > li::before{
  content:counter(pl-ol); position:absolute; left:0; top:.1em;
  width:1.65rem; height:1.65rem; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--pl-font-display); font-weight:800; font-size:.85rem;
  background:var(--pl-ink); color:var(--pl-yellow);
}
.pl-prose li > ul,.pl-prose li > ol{ margin:.55rem 0 0; }
.pl-prose ul > li.pl-li-emoji{ padding-left:0; }
.pl-prose ul > li.pl-li-emoji::before{ display:none; }

.pl-prose hr{ border:0; height:1px; background:var(--pl-line); margin:2.5rem 0; opacity:1; }
.pl-prose blockquote{
  margin:1.75rem 0; padding:1.1rem 1.4rem;
  background:var(--pl-paper); border-left:5px solid var(--pl-yellow); border-radius:0 var(--pl-radius-sm) var(--pl-radius-sm) 0;
  color:var(--pl-text); font-size:1.08rem;
}
.pl-prose blockquote p:last-child{ margin-bottom:0; }
.pl-prose img{ max-width:100%; height:auto; border-radius:var(--pl-radius); }
.pl-prose figure{ margin:1.75rem 0; }
.pl-prose figcaption{ font-size:.88rem; color:var(--pl-muted); margin-top:.5rem; }
.pl-prose table{ width:100%; border-collapse:collapse; margin:1.5rem 0; display:block; overflow-x:auto; font-size:.95rem; }
.pl-prose th,.pl-prose td{ border:1px solid var(--pl-line); padding:.65rem .8rem; text-align:left; vertical-align:top; }
.pl-prose th{ background:var(--pl-paper); font-weight:600; }
.pl-prose code{ background:var(--pl-paper); padding:.1rem .35rem; border-radius:6px; font-size:.92em; }
.pl-prose pre{ background:var(--pl-ink); color:#eaeef3; padding:1rem; border-radius:var(--pl-radius-sm); overflow:auto; }

/* Embedded CMS components (Bootstrap grids, buttons, promo boxes) */
.pl-prose .container{ max-width:none; padding-inline:0; }
.pl-prose .btn{ margin:.25rem .25rem .25rem 0; }
.pl-prose .row{ margin-block:1rem; }
.pl-prose .app-promo{ margin:2rem 0 !important; }
.pl-prose .app-promo .container{ padding:0; }
.pl-prose .app-promo__card p{ color:var(--pl-muted-on-ink); }
.pl-prose .app-promo__card strong{ color:#fff; }
.pl-prose .app-promo__card h2,.pl-prose .app-promo__card h3{ color:#fff; margin-top:0; }
.pl-prose .app-promo__card li::before{ background:var(--pl-yellow); box-shadow:none; }
.pl-prose .bg-light.p-4,.pl-prose .bg-light.p-3,
.pl-prose .border.rounded{
  background:var(--pl-paper) !important; border:1px solid var(--pl-line) !important;
  border-radius:var(--pl-radius) !important; box-shadow:none !important;
}
/* CMS sections that were built as stand-alone page blocks: flatten them into the article */
.pl-prose .liefergebiete-box{ padding:0 !important; background:none !important; border:0 !important; box-shadow:none !important; margin:1.5rem 0; }
.pl-prose .shadow,.pl-prose .shadow-sm,.pl-prose .shadow-lg{ box-shadow:none !important; }
.pl-prose section.bg-light,.pl-prose section.bg-white{ background:none !important; }
.pl-prose section.py-5,.pl-prose section.py-4{ padding-block:0 !important; }
.pl-prose .app-promo__card{ grid-template-columns:1fr !important; }
.pl-prose .app-promo__card .qr-and-stores{ justify-self:start; }
.pl-prose .app-promo__card .stores{ flex-direction:row; flex-wrap:wrap; }
.pl-prose section{ margin-block:1.5rem; }
.pl-prose h4.termsbx,.pl-prose h2.termsbx{ margin-top:2rem; }
/* bold-only paragraphs used as pseudo-headings in older CMS texts */
.pl-prose p > strong:only-child{ display:inline-block; }

.pl-prose--post > p:first-of-type{ font-size:1.18rem; line-height:1.7; color:var(--pl-text); }

/* Jobs (details accordion, apply button opens the existing modal) */
.pl-jobs{ max-width:900px; }
.pl-job summary h2{ font-size:clamp(1.1rem, 1rem + .4vw, 1.3rem); font-weight:800; margin:0; letter-spacing:-.01em; }
.pl-job summary{ min-height:76px; padding:1.1rem 1.4rem; }
.pl-job .pl-qa__body{ padding:0 1.4rem 1.4rem; color:#2b2f36; }
.pl-job__apply{ margin-top:1.75rem; padding-top:1.25rem; border-top:1px solid var(--pl-line); }

/* Blog */
.pl-postmeta{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.1rem; margin:0; font-size:.86rem; color:var(--pl-muted); }
.pl-postmeta span{ display:inline-flex; align-items:center; gap:.4rem; }
.pl-postmeta .pl-ico{ width:16px; height:16px; }
.pl-page-hero--post h1{ max-width:30ch; }
.pl-page-hero .pl-postmeta{ color:var(--pl-ink-2); position:relative; z-index:1; }

.pl-posts{ display:grid; gap:18px; }
@media (min-width:640px){ .pl-posts{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .pl-posts{ grid-template-columns:repeat(3, 1fr); } }
.pl-post{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--pl-surface); border:1px solid var(--pl-line); border-radius:var(--pl-radius-lg);
  transition:transform var(--pl-dur) var(--pl-ease-out), box-shadow var(--pl-dur) var(--pl-ease-out);
}
.pl-post:hover{ transform:translateY(-4px); box-shadow:var(--pl-shadow); }
.pl-post__media{ aspect-ratio:16 / 9; overflow:hidden; background:var(--pl-yellow-soft); }
.pl-post__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--pl-dur-slow) var(--pl-ease-out); }
.pl-post:hover .pl-post__media img{ transform:scale(1.04); }
.pl-post__placeholder{
  position:relative; display:grid; place-items:center; height:100%; min-height:180px; overflow:hidden;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--pl-ink);
}
.pl-post__placeholder::before{ content:""; position:absolute; width:38%; aspect-ratio:1; border-radius:50%; background:var(--pl-yellow); right:-8%; bottom:-42%; }
.pl-post__placeholder span{ position:relative; display:inline-flex; align-items:center; gap:.5rem; font-family:var(--pl-font-display); font-weight:800; font-size:1.05rem; color:#fff; letter-spacing:.02em; }
.pl-post__placeholder .pl-ico{ width:26px; height:26px; color:var(--pl-yellow); }
.pl-post__body{ display:flex; flex-direction:column; flex:1; padding:22px 24px 24px; }
.pl-post h2{ font-size:1.22rem; font-weight:800; letter-spacing:-.015em; margin:.6rem 0 .5rem; }
.pl-post h2 a{ text-decoration:none; color:inherit; }
.pl-post h2 a::after{ content:""; position:absolute; inset:0; }      /* whole card clickable */
.pl-post h2 a:focus-visible{ outline:none; }
.pl-post:has(a:focus-visible){ outline:3px solid var(--pl-ink); outline-offset:3px; }
.pl-post__body > p:not(.pl-postmeta){ color:var(--pl-muted); margin:0 0 1.25rem; font-size:.97rem; }
.pl-post .pl-card__link{ margin-top:auto; }
@media (min-width:1024px){
  .pl-post--featured{ grid-column:1 / -1; flex-direction:row; }
  .pl-post--featured .pl-post__media{ flex:0 0 56%; aspect-ratio:auto; min-height:340px; }
  .pl-post--featured .pl-post__body{ padding:clamp(28px, 3vw, 48px); justify-content:center; }
  .pl-post--featured h2{ font-size:clamp(1.6rem, 1.2rem + 1vw, 2.2rem); }
  .pl-post--featured .pl-card__link{ margin-top:.5rem; }
}

/* "Unsere Seiten" index */
.pl-index__bar{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-bottom:.75rem; }
.pl-search{
  flex:1 1 320px; max-width:520px;
  display:flex; align-items:center; gap:.6rem;
  min-height:52px; padding:0 1rem;
  background:var(--pl-surface); border:1px solid var(--pl-line); border-radius:999px;
  transition:border-color var(--pl-dur-fast) ease, box-shadow var(--pl-dur-fast) ease;
}
.pl-search:focus-within{ border-color:var(--pl-ink); box-shadow:0 0 0 3px rgba(255,204,0,.35); }
.pl-search .pl-ico{ color:var(--pl-muted); }
.pl-search input{ flex:1; border:0; outline:0; background:transparent; font:inherit; min-height:48px; color:var(--pl-text); }
.pl-index__sort{ display:flex; gap:.4rem; }
.pl-index__sort .pl-chip{ cursor:pointer; min-height:44px; }
.pl-index__sort .pl-chip[aria-pressed="true"]{ background:var(--pl-ink); color:#fff; border-color:var(--pl-ink); }
.pl-index__count{ font-size:.9rem; color:var(--pl-muted); margin:0 0 1rem; }
.pl-index__list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
@media (min-width:768px){ .pl-index__list{ grid-template-columns:1fr 1fr; } }
@media (min-width:1200px){ .pl-index__list{ grid-template-columns:repeat(3, 1fr); } }
.pl-index__list a{
  position:relative; display:flex; flex-direction:column; gap:.3rem; height:100%;
  padding:16px 44px 16px 18px;
  background:var(--pl-surface); border:1px solid var(--pl-line); border-radius:var(--pl-radius);
  text-decoration:none; color:var(--pl-text);
  transition:border-color var(--pl-dur-fast) ease, transform var(--pl-dur-fast) ease, box-shadow var(--pl-dur) ease;
}
.pl-index__list a:hover{ border-color:var(--pl-ink); transform:translateY(-2px); box-shadow:var(--pl-shadow-sm); }
.pl-index__title{ font-family:var(--pl-font-display); font-weight:700; line-height:1.3; }
.pl-index__meta{ font-size:.8rem; color:var(--pl-muted); overflow-wrap:anywhere; }
.pl-index__list .pl-ico{ position:absolute; right:16px; top:18px; width:18px; height:18px; color:var(--pl-red); }
.pl-index__empty{ padding:2rem; text-align:center; color:var(--pl-muted); }

@media print{
  .pl-topbar,.pl-header,.pl-drawer,.pl-footer,.pl-mbar,.pl-layout__aside,.pl-cta,.pl-app,.pl-crumbs,.modal{ display:none !important; }
  .pl-page-hero{ background:none; padding:0 0 1rem; }
  .pl-article{ border:0; padding:0; }
  .pl-section{ padding:0; background:none; }
}

/* Related links (internal linking block on service/district pages) */
.pl-related__grid{ display:grid; gap:28px; margin-top:1.5rem; }
@media (min-width:992px){ .pl-related__grid{ grid-template-columns:1fr 1fr; gap:48px; } }
.pl-related__title{ display:flex; align-items:center; gap:.55rem; font-size:1.1rem; font-weight:800; margin:0 0 1rem; }
.pl-related__title .pl-ico{ color:var(--pl-red); }
.pl-related__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 1.5rem; border-top:1px solid var(--pl-line); }
.pl-related__list a{
  display:flex; align-items:center; min-height:48px; padding:.4rem 0;
  border-bottom:1px solid var(--pl-line);
  font-weight:600; color:var(--pl-text); text-decoration:none;
  transition:color var(--pl-dur-fast) ease, padding var(--pl-dur) var(--pl-ease-out);
}
.pl-related__list a:hover{ color:var(--pl-red-dark); padding-left:.35rem; }
.pl-related__list--chips{ display:flex; flex-wrap:wrap; gap:.5rem; border:0; }
.pl-related__list--chips a{ min-height:44px; border-bottom:1px solid var(--pl-line); padding:.45rem .9rem; }
.pl-related__list--chips a:hover{ padding-left:.9rem; border-color:var(--pl-ink); }
@media (max-width:479.98px){ .pl-related__list{ grid-template-columns:1fr; } }

/* ---------- 8c. Packlast App (CTAs, phone frames, /packlast-app) ---------- */

/* "im Browser buchen" — the quiet second choice under every app CTA */
.pl-weblink{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.9rem; font-weight:500; color:var(--pl-muted);
  text-decoration:underline; text-decoration-color:rgba(87,91,99,.35); text-underline-offset:3px;
}
.pl-weblink:hover{ color:var(--pl-text); text-decoration-color:currentColor; }
.pl-weblink .pl-ico{ width:16px; height:16px; }
.pl-on-ink .pl-weblink, .pl-bookcard .pl-weblink, .pl-drawer .pl-weblink{ color:var(--pl-muted-on-ink); text-decoration-color:rgba(185,187,194,.35); }
.pl-on-ink .pl-weblink:hover, .pl-bookcard .pl-weblink:hover{ color:#fff; }
.pl-hero__alt{ margin:1rem 0 0; }
.pl-bookcard .pl-weblink, .pl-drawer .pl-weblink{ justify-content:center; padding:.25rem 0; }

/* Official store badges, always the same size */
.pl-badges{ display:flex; flex-wrap:wrap; gap:.6rem; }
.pl-badges a{ display:block; line-height:0; border-radius:10px; transition:transform var(--pl-dur-fast) ease, box-shadow var(--pl-dur) var(--pl-ease-out); }
.pl-badges a:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -10px rgba(0,0,0,.5); }
.pl-badges img{ height:52px; width:auto; display:block; }
@media (max-width:419.98px){ .pl-badges img{ height:46px; } }
/* on a phone, the matching store comes first */
.pl-os-android .pl-badges a[data-store="android"]{ order:-1; }
.pl-qr{ display:block; border-radius:12px; background:#fff; padding:6px; aspect-ratio:1; height:auto; object-fit:contain; }
picture:has(> .pl-qr){ display:block; flex:0 0 auto; line-height:0; }

/* Phone frame around a real app screenshot */
.pl-phone{
  --w:280px;
  position:relative; margin:0; width:var(--w); flex:0 0 auto;
  padding:calc(var(--w) * .035);
  border-radius:calc(var(--w) * .15);
  background:linear-gradient(145deg, #2b2b30, #0c0c0d 40%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.12),
    0 0 0 1px rgba(0,0,0,.5),
    0 40px 80px -30px rgba(0,0,0,.55),
    0 18px 36px -18px rgba(0,0,0,.4);
}
.pl-phone::before{                  /* punch-hole camera */
  content:""; position:absolute; z-index:2; left:50%; top:calc(var(--w) * .058);
  width:calc(var(--w) * .038); aspect-ratio:1; transform:translateX(-50%);
  border-radius:50%; background:#0c0c0d; box-shadow:0 0 0 2px rgba(255,255,255,.05);
}
.pl-phone::after{                   /* side button */
  content:""; position:absolute; right:-3px; top:22%; width:3px; height:12%;
  border-radius:0 3px 3px 0; background:#2b2b30;
}
.pl-phone img{
  display:block; width:100%; height:auto; aspect-ratio:400 / 811;
  border-radius:calc(var(--w) * .118); background:#f4f4f4;
}

/* ---- Hero of /packlast-app ---- */
.pl-apphero{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(900px 520px at 78% 30%, rgba(255,204,0,.18), transparent 62%),
    radial-gradient(700px 400px at 10% 110%, rgba(230,0,0,.18), transparent 60%),
    var(--pl-ink);
  color:#fff;
  padding-block:clamp(28px, 4vw, 56px) clamp(56px, 7vw, 104px);
}
.pl-apphero::before{                 /* street grid, as on the homepage */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 70% 45%, #000 15%, transparent 70%);
          mask-image:radial-gradient(ellipse at 70% 45%, #000 15%, transparent 70%);
}
.pl-apphero__grid{ display:grid; gap:clamp(40px, 5vw, 72px); align-items:center; }
.pl-apphero__grid > *{ min-width:0; }
@media (min-width:992px){ .pl-apphero__grid{ grid-template-columns:1fr 1fr; } }
.pl-apphero .pl-crumbs{ color:var(--pl-muted-on-ink); }
.pl-apphero .pl-crumbs a{ color:#fff; }
.pl-apphero .pl-hero__badge{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); color:#fff; box-shadow:none; }
.pl-apphero h1{
  font-size:clamp(2.2rem, 1.2rem + 3.8vw, 4rem); font-weight:800; letter-spacing:-.035em; line-height:1.03;
  margin:0 0 1.25rem; color:#fff; max-width:15ch;
}
.pl-apphero h1 .pl-mark{ color:var(--pl-ink); background:var(--pl-yellow); padding:0 .14em; border-radius:.14em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.pl-apphero__sub{ font-size:clamp(1.05rem, .98rem + .4vw, 1.22rem); color:var(--pl-muted-on-ink); max-width:48ch; margin:0 0 2rem; }
.pl-apphero__get{ display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem 1.5rem; }
@media (min-width:992px){ html:not(.pl-os-ios):not(.pl-os-android) .pl-apphero__get .pl-badges{ flex-direction:column; } }
.pl-apphero__qr{ display:none; align-items:center; gap:.9rem; font-size:.85rem; line-height:1.35; color:var(--pl-muted-on-ink); padding-left:1.5rem; border-left:1px solid rgba(255,255,255,.14); }
@media (min-width:992px){ html:not(.pl-os-ios):not(.pl-os-android) .pl-apphero__qr{ display:flex; } }
.pl-apphero .pl-hero__trust{ color:#fff; }
.pl-apphero .pl-hero__trust .pl-ico{ background:var(--pl-yellow); color:var(--pl-ink); }

.pl-apphero__visual{ position:relative; min-height:clamp(420px, 52vw, 640px); display:grid; place-items:center; }
.pl-apphero__sun{
  position:absolute; width:min(108%, 600px); aspect-ratio:1; border-radius:50%;
  background:var(--pl-yellow); top:42%; left:58%; transform:translate(-50%, -50%);
  box-shadow:inset 0 0 0 14px rgba(12,12,13,.9), 0 0 140px 20px rgba(255,204,0,.22);
}
.pl-phones{
  position:relative; width:100%; height:100%; display:grid; place-items:center;
  perspective:1400px;
}
.pl-phones .pl-phone{ grid-area:1 / 1; transition:transform 900ms var(--pl-ease-out); }
.pl-phone--main{ --w:clamp(210px, 23vw, 290px); z-index:3; transform:translateY(0) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); }
.pl-phone--left,
.pl-phone--right{ --w:clamp(170px, 19vw, 240px); z-index:2; filter:saturate(.95); }
.pl-phone--left{ transform:translateX(-72%) translateY(7%) rotate(-9deg); }
.pl-phone--right{ transform:translateX(72%) translateY(7%) rotate(9deg); }
html.js .pl-phones:not(.is-in) .pl-phone--left{ transform:translateX(-10%) translateY(10%) rotate(0); }
html.js .pl-phones:not(.is-in) .pl-phone--right{ transform:translateX(10%) translateY(10%) rotate(0); }
html.js .pl-phones:not(.is-in) .pl-phone--main{ transform:translateY(24px); }
.pl-phones.is-in .pl-phone--main{ animation:pl-hover 6s ease-in-out 1.2s infinite; }
@keyframes pl-hover{ 0%,100%{ translate:0 0; } 50%{ translate:0 -12px; } }
.pl-float--app1{ left:0; top:12%; z-index:4; }
.pl-float--app2{ right:0; bottom:14%; z-index:4; }
.pl-float--app2 .pl-float__ico{ background:var(--pl-red); color:#fff; }
.pl-apphero .pl-float{ color:var(--pl-text); }
@media (max-width:575.98px){
  .pl-apphero__visual{ min-height:440px; margin-inline:-8px; }
  .pl-phone--left{ transform:translateX(-56%) translateY(8%) rotate(-8deg); }
  .pl-phone--right{ transform:translateX(56%) translateY(8%) rotate(8deg); }
  .pl-float--app1{ top:4%; left:4px; }
  .pl-float--app2{ bottom:4%; right:4px; }
}

/* ---- "Preis checken ohne Anmeldung" callout ---- */
.pl-nologin-wrap{ padding-bottom:0; }
.pl-nologin{
  display:grid; gap:1.25rem; align-items:center;
  background:var(--pl-yellow); color:var(--pl-ink);
  border-radius:var(--pl-radius-lg); padding:clamp(22px, 3vw, 32px) clamp(22px, 3.5vw, 40px);
  box-shadow:0 24px 50px -28px rgba(180,140,0,.6);
}
@media (min-width:992px){
  .pl-nologin{ grid-template-columns:auto 1fr auto; grid-template-areas:"ico txt btn" "ico steps btn"; gap:1rem 2rem; }
  .pl-nologin__ico{ grid-area:ico; align-self:start; }
  .pl-nologin > div{ grid-area:txt; }
  .pl-nologin__steps{ grid-area:steps; }
  .pl-nologin .pl-btn{ grid-area:btn; align-self:center; }
}
.pl-nologin__ico{ width:60px; height:60px; border-radius:18px; display:grid; place-items:center; background:var(--pl-ink); color:var(--pl-yellow); }
.pl-nologin h2{ font-size:clamp(1.35rem, 1.1rem + .9vw, 1.75rem); font-weight:800; letter-spacing:-.02em; margin:0 0 .3rem; }
.pl-nologin p{ margin:0; max-width:56ch; color:#3a3000; }
.pl-nologin__steps{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.pl-nologin__steps li{
  display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap;
  background:rgba(255,255,255,.55); border-radius:999px; padding:.4rem .8rem .4rem .45rem;
  font-weight:700; font-size:.88rem;
}
.pl-nologin__steps span{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--pl-ink); color:var(--pl-yellow); font-size:.78rem; }
.pl-nologin .pl-btn{ justify-self:start; }

/* ---- Screen tour: sticky phone + steps (desktop); inline phones (mobile) ---- */
.pl-tour{ display:grid; gap:40px; }
.pl-tour__stage{ display:none; }
.pl-tour__steps{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(28px, 4vw, 40px); }
.pl-tour__step{ display:grid; grid-template-columns:auto 1fr; gap:1rem 1.25rem; }
.pl-tour__num{
  width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  font-family:var(--pl-font-display); font-weight:800; font-size:1.1rem;
  background:var(--pl-yellow-soft); color:var(--pl-ink);
  transition:background-color var(--pl-dur) ease, color var(--pl-dur) ease, transform var(--pl-dur) var(--pl-ease-spring);
}
.pl-tour__step h3{ font-size:clamp(1.3rem, 1.05rem + .9vw, 1.9rem); font-weight:800; letter-spacing:-.02em; margin:.35rem 0 .5rem; }
.pl-tour__step p{ color:var(--pl-muted); margin:0 0 1.25rem; max-width:44ch; font-size:1.05rem; }
.pl-phone--inline{ --w:min(240px, 62vw); }
@media (min-width:992px){
  .pl-tour{ grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(40px, 6vw, 96px); }
  .pl-tour__stage{
    display:grid; place-items:start center; position:relative;
  }
  .pl-tour__phone{
    position:sticky; top:calc(var(--pl-header-h) + 40px);
    width:300px; aspect-ratio:400 / 811; padding:10px; box-sizing:content-box;
    border-radius:46px; background:linear-gradient(145deg, #2b2b30, #0c0c0d 40%);
    box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12), 0 50px 90px -35px rgba(0,0,0,.5);
  }
  .pl-tour__phone::before{
    content:""; position:absolute; inset:-60px -90px; z-index:-1; border-radius:50%;
    background:radial-gradient(closest-side, rgba(255,204,0,.45), transparent);
  }
  .pl-tour__screen{
    position:absolute; inset:10px; width:calc(100% - 20px); height:calc(100% - 20px);
    object-fit:cover; border-radius:36px; background:#f4f4f4;
    opacity:0; transform:scale(.98); transition:opacity 420ms ease, transform 520ms var(--pl-ease-out);
  }
  .pl-tour__screen.is-active{ opacity:1; transform:none; }
  .pl-tour__steps{ gap:0; }
  .pl-tour__step{ min-height:min(70vh, 560px); align-content:center; opacity:.35; transition:opacity var(--pl-dur) ease; }
  .pl-tour__step.is-active{ opacity:1; }
  .pl-tour__step.is-active .pl-tour__num{ background:var(--pl-red); color:#fff; transform:scale(1.08); }
  .pl-tour__step .pl-phone--inline{ display:none; }
  html:not(.js) .pl-tour__step{ opacity:1; }
}

/* ---- Feature grid ---- */
.pl-feats{ display:grid; gap:16px; }
@media (min-width:640px){ .pl-feats{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:992px){ .pl-feats{ grid-template-columns:repeat(3, 1fr); } }
.pl-feat{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--pl-surface); border:1px solid var(--pl-line); border-radius:var(--pl-radius-lg);
  padding:clamp(22px, 2.6vw, 30px);
}
.pl-feat h3{ font-size:1.25rem; font-weight:800; letter-spacing:-.015em; margin:0 0 .5rem; }
.pl-feat p{ color:var(--pl-muted); margin:0; }

/* ---- Gallery (horizontal, scroll-snap) ---- */
.pl-gallery{ overflow:hidden; }
.pl-gallery .pl-head{ margin-bottom:clamp(24px, 4vw, 40px); }
.pl-gallery__nav{ display:none; gap:.5rem; justify-self:end; }
@media (min-width:992px){ .pl-gallery__nav{ display:flex; } }
.pl-gallery .pl-round{ background:transparent; color:#fff; border-color:rgba(255,255,255,.25); }
.pl-gallery .pl-round:hover{ border-color:#fff; }
.pl-shots{
  list-style:none; margin:0; padding:20px max(var(--pl-gutter), calc((100vw - 1200px) / 2 + var(--pl-gutter))) 36px;
  display:flex; gap:clamp(20px, 3vw, 36px);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:max(var(--pl-gutter), calc((100vw - 1200px) / 2 + var(--pl-gutter)));
  scrollbar-width:none; overscroll-behavior-x:contain;
}
.pl-shots::-webkit-scrollbar{ display:none; }
.pl-shots:focus-visible{ outline-offset:-3px; }
.pl-shots__item{ scroll-snap-align:start; flex:0 0 auto; display:grid; gap:1rem; justify-items:start; }
.pl-shots__item .pl-phone{ --w:clamp(210px, 22vw, 260px); transition:transform var(--pl-dur) var(--pl-ease-out); }
.pl-shots__item:hover .pl-phone{ transform:translateY(-8px); }
.pl-shots__item p{ margin:0; max-width:26ch; font-size:.92rem; color:var(--pl-muted-on-ink); }
.pl-shots__item p strong{ display:block; color:#fff; font-family:var(--pl-font-display); font-size:1.05rem; }
.pl-gallery__cta{ margin-top:8px; }

/* ---- 3 steps ---- */
.pl-appsteps{ list-style:none; margin:0; padding:0; display:grid; gap:16px; counter-reset:s; }
@media (min-width:768px){ .pl-appsteps{ grid-template-columns:repeat(3, 1fr); } }
.pl-appsteps li{ background:var(--pl-paper); border-radius:var(--pl-radius-lg); padding:clamp(22px, 2.6vw, 30px); }
.pl-appsteps__num{
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%; margin-bottom:1rem;
  background:var(--pl-ink); color:var(--pl-yellow); font-family:var(--pl-font-display); font-weight:800;
}
.pl-appsteps h3{ font-size:1.2rem; font-weight:800; margin:0 0 .4rem; }
.pl-appsteps p{ margin:0; color:var(--pl-muted); }

/* ---- Homepage/service app promo: real phone instead of a plain QR card ---- */
.pl-app__visual{ position:relative; display:grid; place-items:center; min-height:360px; }
.pl-app__visual .pl-phone{ --w:clamp(200px, 20vw, 250px); transform:rotate(4deg); z-index:1; }
.pl-app__bubble{
  position:absolute; z-index:2; left:0; bottom:18%;
  background:#fff; color:var(--pl-text); border-radius:18px 18px 18px 6px;
  padding:.7rem 1rem; box-shadow:var(--pl-shadow-lg); font-size:.9rem; line-height:1.3; max-width:210px;
}
.pl-app__bubble small{ display:block; color:var(--pl-muted); font-size:.75rem; margin-bottom:.15rem; }
.pl-app__get2{ display:grid; gap:1rem; margin-top:1.75rem; }
.pl-app__get2 .pl-app__qrrow{ display:none; align-items:center; gap:.9rem; font-size:.85rem; color:var(--pl-muted-on-ink); }
@media (min-width:992px){ html:not(.pl-os-ios):not(.pl-os-android) .pl-app__get2 .pl-app__qrrow{ display:flex; } }
@media (max-width:991.98px){ .pl-app__visual{ min-height:0; padding-top:8px; } .pl-app__bubble{ left:4%; } }

/* ---- B2B block: web portal, API, billing cycle ---- */
.pl-b2b{
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; gap:clamp(28px, 4vw, 56px); align-items:center;
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(255,204,0,.14), transparent 60%),
    var(--pl-ink-2);
  color:#fff; border-radius:clamp(24px, 3vw, 36px);
  padding:clamp(28px, 5vw, 60px);
}
@media (min-width:992px){ .pl-b2b{ grid-template-columns:1fr 1fr; } }
.pl-b2b h2{ color:#fff; }
.pl-b2b h2 .accent{ color:var(--pl-yellow); }
.pl-b2b .pl-actions{ margin:1.75rem 0 1rem; }
.pl-b2b__points{ list-style:none; margin:0; padding:0; display:grid; gap:12px; counter-reset:b; }
.pl-b2b__points li{
  display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--pl-radius); padding:18px 20px;
}
.pl-b2b__ico{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:var(--pl-yellow); color:var(--pl-ink); }
.pl-b2b__points h3{ font-size:1.08rem; font-weight:800; margin:.1rem 0 .3rem; color:#fff; }
.pl-b2b__points p{ margin:0; font-size:.94rem; color:var(--pl-muted-on-ink); }

/* ---- Desktop QR dialog ---- */
.pl-appdlg{
  width:min(520px, calc(100vw - 32px)); border:0; border-radius:var(--pl-radius-lg);
  padding:clamp(24px, 4vw, 36px); color:var(--pl-text); background:var(--pl-surface);
  box-shadow:var(--pl-shadow-lg);
}
.pl-appdlg::backdrop{ background:rgba(12,12,13,.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.pl-appdlg[open]{ animation:pl-dlg 320ms var(--pl-ease-out); }
@keyframes pl-dlg{ from{ opacity:0; transform:translateY(16px) scale(.98); } }
.pl-appdlg h2{ font-size:clamp(1.4rem, 1.1rem + 1vw, 1.8rem); font-weight:800; letter-spacing:-.02em; margin:0 0 1.25rem; padding-right:40px; }
.pl-appdlg__x{ position:absolute; top:16px; right:16px; }
.pl-appdlg__body{ display:flex; gap:1.5rem; align-items:center; margin-bottom:1.5rem; }
.pl-appdlg__body .pl-qr{ border:1px solid var(--pl-line); padding:4px; width:176px; height:176px; }
.pl-appdlg__steps{ margin:0; padding-left:1.2rem; display:grid; gap:.6rem; color:var(--pl-muted); }
.pl-appdlg__steps li::marker{ font-weight:800; color:var(--pl-ink); }
.pl-appdlg__alt{ margin:1.25rem 0 0; display:grid; gap:.6rem; line-height:1.4; }
.pl-appdlg__alt br{ display:none; }
.pl-appdlg__alt a:first-child{ color:var(--pl-text); font-weight:600; }
@media (max-width:479.98px){ .pl-appdlg__body{ flex-direction:column; align-items:flex-start; } }

/* ---------- 9. Google Maps consent gate ---------- */
.pl-mapgate{
  position:relative; min-height:360px; height:100%;
  border-radius:var(--pl-radius-lg); overflow:hidden;
  background:
    linear-gradient(rgba(12,12,13,.05) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(12,12,13,.05) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--pl-paper);
  border:1px solid var(--pl-line);
  display:grid; place-items:center; text-align:center;
}
.pl-mapgate__inner{ max-width:380px; padding:24px; }
.pl-mapgate__pin{
  width:64px; height:64px; margin:0 auto 1rem; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg); background:var(--pl-red);
  display:grid; place-items:center; box-shadow:var(--pl-shadow);
  animation:pl-bob 2.4s var(--pl-ease-out) infinite;
}
.pl-mapgate__pin span{ width:22px; height:22px; border-radius:50%; background:#fff; }
.pl-mapgate p{ font-size:.88rem; color:var(--pl-muted); margin:.75rem 0 0; }
.pl-mapgate p a{ color:var(--pl-text); }
.pl-mapgate iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@keyframes pl-bob{ 0%,100%{ transform:rotate(-45deg) translate(0,0); } 50%{ transform:rotate(-45deg) translate(4px,-4px); } }

/* ---------- 10. Mobile sticky CTA bar ---------- */
.pl-mbar{
  position:fixed; left:12px; right:12px; z-index:1020;
  bottom:calc(12px + env(safe-area-inset-bottom));
  display:flex; gap:8px; padding:8px;
  background:rgba(12,12,13,.94); border-radius:999px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:var(--pl-shadow-lg);
  transform:translateY(calc(100% + 24px)); opacity:0;
  transition:transform var(--pl-dur) var(--pl-ease-out), opacity var(--pl-dur) ease;
}
.pl-mbar.is-visible{ transform:none; opacity:1; }
.pl-mbar .pl-btn--primary{ flex:1; }
.pl-mbar__app{
  flex:1; min-width:0; display:flex; align-items:center; gap:.7rem;
  padding:4px 4px 4px 10px; border-radius:999px; color:#fff; text-decoration:none;
}
.pl-mbar__app img{ width:40px; height:auto; flex:0 0 auto; }
.pl-mbar__app > span:not(.pl-mbar__get){ min-width:0; display:grid; line-height:1.2; }
.pl-mbar__app strong{ font-family:var(--pl-font-display); font-size:.98rem; }
.pl-mbar__app small{ font-size:.75rem; color:var(--pl-muted-on-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-mbar__get{
  margin-left:auto; flex:0 0 auto; background:var(--pl-red); color:#fff; border-radius:999px;
  padding:.62rem 1.15rem; font-family:var(--pl-font-display); font-weight:700; font-size:.95rem;
  box-shadow:0 8px 20px -8px rgba(230,0,0,.6);
}
.pl-mbar__app:hover{ color:#fff; }
.pl-mbar .pl-round{ background:transparent; color:#fff; border-color:rgba(255,255,255,.25); }
@media (min-width:992px){ .pl-mbar{ display:none; } }

/* ---------- 11. Footer ---------- */
.pl-footer{ background:var(--pl-ink); color:var(--pl-muted-on-ink); padding-top:clamp(56px, 7vw, 88px); }
.pl-footer a{ color:#fff; text-decoration:none; }
.pl-footer a:hover{ color:var(--pl-yellow); }
.pl-footer__grid{ display:grid; gap:40px 32px; grid-template-columns:1fr 1fr; }
@media (min-width:992px){ .pl-footer__grid{ grid-template-columns:1.5fr 1fr 1fr 1fr 1.4fr; } }
.pl-footer__brand{ grid-column:1 / -1; }
@media (min-width:992px){ .pl-footer__brand{ grid-column:auto; } }
.pl-footer__logo{ height:64px; width:auto; display:block; margin-bottom:1.25rem; }
.pl-footer__lead{ font-size:.96rem; line-height:1.7; margin:0 0 1.25rem; max-width:40ch; }
.pl-footer__lead strong{ color:#fff; font-weight:600; }
.pl-footer__nap{ list-style:none; margin:0 0 1.5rem; padding:0; display:grid; gap:.55rem; font-size:.94rem; }
.pl-footer__nap li{ display:flex; gap:.6rem; align-items:flex-start; }
.pl-footer__nap .pl-ico{ color:var(--pl-yellow); width:18px; height:18px; margin-top:.2em; }
.pl-footer__title{
  font-family:var(--pl-font-display); font-size:.82rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#fff; margin:0 0 1rem;
}
.pl-footer__list{ list-style:none; margin:0; padding:0; display:grid; gap:.15rem; }
.pl-footer__list a{ display:inline-flex; align-items:center; min-height:36px; color:var(--pl-muted-on-ink); font-size:.95rem; }
.pl-footer__list a:hover{ color:var(--pl-yellow); }
.pl-social{ display:flex; gap:.5rem; }
.pl-social a{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--pl-line-ink); color:#fff;
  transition:background-color var(--pl-dur-fast) ease, color var(--pl-dur-fast) ease, transform var(--pl-dur-fast) ease, border-color var(--pl-dur-fast) ease;
}
.pl-social a:hover{ background:var(--pl-yellow); border-color:var(--pl-yellow); color:var(--pl-ink); transform:translateY(-2px); }
.pl-social .pl-ico{ width:20px; height:20px; }

.pl-news p{ font-size:.92rem; margin:0 0 1rem; }
.pl-news .form-label{ color:#fff; font-size:.85rem; font-weight:600; }
.pl-news .form-control{
  min-height:48px; background:var(--pl-ink-2); border:1px solid var(--pl-line-ink); color:#fff; border-radius:12px;
}
.pl-news .form-control::placeholder{ color:#8b8d94; }
.pl-news .form-control:focus{ background:var(--pl-ink-2); color:#fff; border-color:var(--pl-yellow); box-shadow:0 0 0 3px rgba(255,204,0,.25); }
.pl-news .form-check-label{ font-size:.82rem; line-height:1.5; }
.pl-news .form-check-label a{ color:#fff; }
.pl-news .form-check-input{ background-color:var(--pl-ink-2); border-color:#55575e; }
.pl-news .form-check-input:checked{ background-color:var(--pl-yellow); border-color:var(--pl-yellow); }
.pl-news .invalid-feedback{ color:#ff8a8a; }
.pl-news .alert{ font-size:.85rem; }

.pl-footer__bottom{
  margin-top:clamp(48px, 6vw, 72px);
  border-top:1px solid var(--pl-line-ink);
  padding-block:22px calc(22px + env(safe-area-inset-bottom));
  display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; justify-content:space-between; align-items:center;
  font-size:.86rem;
}
.pl-footer__wordmark{
  font-family:var(--pl-font-display); font-weight:900; font-style:italic; letter-spacing:-.02em; color:#fff;
}
.pl-footer__wordmark span{ color:var(--pl-yellow); }
@media (max-width:991.98px){ .pl-footer{ padding-bottom:84px; } }   /* room for the mobile CTA bar */
/* Footer on phones/tablets: no column may force the page wider than the screen */
.pl-footer__grid > *{ min-width:0; }
.pl-footer__list a{ overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto; }
@media (max-width:991.98px){
  .pl-news{ grid-column:1 / -1; max-width:520px; }   /* newsletter form gets the full width */
}
@media (max-width:767.98px){
  .pl-footer{ padding-top:40px; }
  .pl-footer__grid{ gap:28px 20px; }
  .pl-footer__logo{ height:52px; margin-bottom:1rem; }
  .pl-footer__lead, .pl-footer__nap{ font-size:.9rem; }
  .pl-footer__title{ font-size:.72rem; margin-bottom:.6rem; }
  .pl-footer__list{ gap:0; }
  .pl-footer__list a{ min-height:34px; font-size:.88rem; line-height:1.3; }
  .pl-news p{ font-size:.88rem; }
  .pl-footer__bottom{ margin-top:32px; font-size:.8rem; }
}
@media (max-width:359.98px){
  .pl-footer__grid{ grid-template-columns:1fr; }      /* very narrow phones: one column */
}

/* ---------- 12. Legacy / CMS compat ----------
   Classes still used by templates/location.php, kontakt.php and CMS bodies. */
.underline{
  background:linear-gradient(transparent 62%, var(--pl-yellow) 62%, var(--pl-yellow) 92%, transparent 92%);
  padding:0 .05em;
}
.standort-info li{ display:flex; gap:.6rem; align-items:flex-start; }
.standort-info .pl-ico{ color:var(--pl-red); margin-top:.25em; }
.map-embed{ border-radius:var(--pl-radius-lg); overflow:hidden; }


.accordion-button{ font-family:var(--pl-font-display); font-weight:700; }
.accordion-button:not(.collapsed){ background:var(--pl-yellow-soft); color:var(--pl-ink); box-shadow:none; }
.accordion-button:focus{ box-shadow:0 0 0 3px rgba(12,12,13,.25); }
.card.rounded-4,.card.rounded-3{ border-radius:var(--pl-radius-lg) !important; }

/* App promo block still rendered by templates/location.php */
.app-promo__card{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:center;
  background:var(--pl-ink); color:#fff;
  border-radius:var(--pl-radius-lg); padding:clamp(24px, 4vw, 48px);
}
@media (min-width:768px){ .app-promo__card{ grid-template-columns:1fr auto; } }
.app-promo__title{ margin:0; font-weight:800; font-size:clamp(1.4rem, 1rem + 1.5vw, 2.1rem); line-height:1.1; }
.app-promo__title .accent{ color:var(--pl-yellow); }
.app-promo__card p{ color:var(--pl-muted-on-ink); }
.app-promo__card p strong{ color:#fff; }
.qr-and-stores{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap; justify-content:center;
  background:#fff; border-radius:var(--pl-radius); padding:16px;
}
.qr-img{ width:140px; height:140px; object-fit:contain; border-radius:10px; display:block; }
.stores{ display:flex; flex-direction:column; align-items:center; gap:.6rem; }
.store-badge{ display:block; line-height:0; }
.stores .store-badge img{ height:48px !important; width:auto !important; display:block; }

/* Lightbox (gallery + any .js-zoom image) */
.pl-lightbox{
  position:fixed; inset:0; z-index:200000;
  background:rgba(12,12,13,.92);
  display:none; align-items:flex-start; justify-content:center;
  overflow:auto; padding:24px;
}
.pl-lightbox.open{ display:flex; animation:pl-fade var(--pl-dur) ease both; }
.pl-lightbox img{ max-width:100%; height:auto; margin:auto; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.5); animation:pl-zoom var(--pl-dur) var(--pl-ease-out) both; }
.pl-lightbox__close{
  position:fixed; top:14px; right:18px; z-index:200001;
  width:48px; height:48px; border:0; border-radius:50%;
  background:#fff; color:var(--pl-ink); cursor:pointer;
  display:grid; place-items:center; box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.slider-img{ cursor:zoom-in; }

/* Ticker (kept for CMS content that uses it) */
.ticker{ overflow:hidden; white-space:nowrap; font-weight:700; }
.ticker-track{ display:inline-block; padding-left:100%; animation:tickerMove 30s linear infinite; }
@keyframes tickerMove{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }

/* ---------- 12b. Compact phones & foldables ----------
   Phones get a tighter type scale and spacing (boss feedback: "everything looks very big on mobile").
   Body text stays at 16 px for readability; headings, spacing and controls shrink. */
p.pl-eyebrow{ font-size:.8rem; }               /* the small label never inherits paragraph sizes */
@media (max-width:767.98px){
  :root{ --pl-header-h:64px; }
  .pl-brand img{ height:44px; }
  .pl-header.is-scrolled .pl-brand img{ height:40px; }
  .pl-topbar__inner{ min-height:32px; }
  .pl-topbar{ font-size:.76rem; }

  .pl-section{ padding-block:48px; }
  .pl-section--tight{ padding-block:36px; }
  .pl-section--article{ padding-block:24px 44px; }
  .pl-head{ margin-bottom:28px; }

  .pl-eyebrow, p.pl-eyebrow{ font-size:.72rem; letter-spacing:.12em; margin-bottom:.7rem; gap:.5rem; }
  .pl-eyebrow::before{ width:22px; }
  .pl-h2{ font-size:clamp(1.45rem, 1rem + 2.3vw, 1.8rem); margin-bottom:.8rem; }
  .pl-lead, .pl-intro__text p:not(.pl-eyebrow){ font-size:1rem; }

  .pl-hero{ padding-block:24px 40px; }
  .pl-hero h1{ font-size:clamp(1.75rem, 1.05rem + 3.4vw, 2.15rem); margin-bottom:.9rem; }
  .pl-hero__badge{ font-size:.8rem; margin-bottom:.9rem; }
  .pl-hero__sub{ font-size:1rem; margin-bottom:1.4rem; }
  .pl-hero__trust{ margin-top:1.2rem; font-size:.88rem; }
  .pl-hero--page h1{ font-size:clamp(1.65rem, 1.05rem + 3vw, 2rem); }
  .pl-page-hero h1{ font-size:clamp(1.55rem, 1.05rem + 2.4vw, 1.9rem); }
  .pl-apphero h1{ font-size:clamp(1.8rem, 1.05rem + 3.6vw, 2.2rem); }
  .pl-apphero__sub{ font-size:1rem; margin-bottom:1.5rem; }

  .pl-btn{ min-height:46px; padding:.65rem 1.15rem; font-size:.95rem; }
  .pl-btn--lg{ min-height:50px; padding:.75rem 1.3rem; font-size:1rem; }

  .pl-marquee{ padding-block:12px; }
  .pl-marquee__group li{ font-size:1rem; }
  .pl-stat__num{ font-size:clamp(1.55rem, 1.1rem + 2vw, 2rem); }
  .pl-card{ padding:20px; }
  .pl-card h3{ font-size:1.12rem; }
  .pl-card__icon{ width:46px; height:46px; margin-bottom:1rem; }
  .pl-cta h2{ font-size:clamp(1.6rem, 1.1rem + 2.4vw, 2rem); }
  .pl-cta p{ font-size:1rem; }
  .pl-step h3, .pl-tour__step h3{ font-size:1.15rem; }
  .pl-tour__step p{ font-size:1rem; }

  .pl-prose{ font-size:1rem; line-height:1.7; }
  .pl-prose h2{ font-size:1.3rem; margin-top:2.2rem; }
  .pl-prose h3{ font-size:1.1rem; }

  /* bottom app bar: slimmer */
  .pl-mbar{ padding:6px; gap:6px; }
  .pl-mbar__app{ gap:.55rem; padding-left:8px; }
  .pl-mbar__app img{ width:34px; }
  .pl-mbar__app strong{ font-size:.9rem; }
  .pl-mbar__app small{ font-size:.72rem; }
  .pl-mbar__get{ padding:.5rem .95rem; font-size:.88rem; }
  .pl-mbar .pl-round{ width:44px; height:44px; }
}
@media (max-width:767.98px){
  /* articles: the white card loses most of its inner padding, so the text column is wide enough */
  .pl-article{ padding:18px 16px; border-radius:var(--pl-radius); }
  .pl-section--article .pl-wrap{ padding-inline:12px; }
  .pl-prose table{ font-size:.86rem; }
  .pl-prose th, .pl-prose td{ min-width:110px; padding:.55rem .6rem; }
  /* B2B box: points use the full width */
  .pl-b2b{ padding:24px 18px; gap:24px; }
  .pl-b2b__points li{ padding:14px; gap:.8rem; }
  .pl-b2b__ico{ width:38px; height:38px; border-radius:11px; }
  .pl-b2b .pl-actions .pl-btn{ flex:1 1 100%; }
  /* stats tiles: readable units */
  .pl-stat__num small{ font-size:max(.45em, 12.5px); }
  .pl-app{ padding:24px 18px; }
  .pl-cta{ padding:28px 20px; }
}
/* foldables / small tablets in portrait: same layout as phones, but less shouting */
@media (min-width:768px) and (max-width:1099.98px){
  .pl-hero h1{ font-size:clamp(2.2rem, 1rem + 3vw, 2.9rem); }
  .pl-h2{ font-size:clamp(1.8rem, 1rem + 2vw, 2.4rem); }
  .pl-section{ padding-block:clamp(56px, 7vw, 88px); }
}

/* ---------- 13. Motion + reveal ---------- */
@keyframes pl-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes pl-zoom{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:none; } }
@keyframes pl-up{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes pl-ping{ 0%{ transform:scale(.6); opacity:.9; } 100%{ transform:scale(2); opacity:0; } }
@keyframes pl-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@keyframes pl-mark{ from{ background-size:0% 100%; } to{ background-size:100% 100%; } }
@keyframes pl-sun{ from{ transform:translateY(-50%) scale(.6); opacity:0; } to{ transform:translateY(-50%) scale(1); opacity:1; } }
@keyframes pl-media{ from{ opacity:0; transform:rotate(-4deg) translateY(24px); } to{ opacity:1; transform:rotate(-1.5deg); } }

/* Hero entrance — one choreographed moment per view */
.pl-hero [data-enter]{ animation:pl-up var(--pl-dur-slow) var(--pl-ease-out) both; animation-delay:calc(var(--i, 0) * 90ms + 80ms); }
.pl-hero .pl-mark{ animation:pl-mark 700ms var(--pl-ease-out) 650ms both; }
.pl-hero__sun{ animation:pl-sun 900ms var(--pl-ease-spring) 150ms both; }
.pl-hero__media{ animation:pl-media 900ms var(--pl-ease-out) 250ms both; }
.pl-float--pickup{ animation:pl-up var(--pl-dur-slow) var(--pl-ease-out) 700ms both, pl-float 6s ease-in-out 1.4s infinite; }
.pl-float--eco{ animation:pl-up var(--pl-dur-slow) var(--pl-ease-out) 850ms both, pl-float 7s ease-in-out 1.6s infinite; }
.pl-track{ animation:pl-up var(--pl-dur-slow) var(--pl-ease-out) 950ms both; }

/* Scroll reveal: content is only hidden when JS is running (html.js),
   so crawlers and no-JS visitors always see everything. */
html.js [data-reveal]{
  opacity:0; transform:translateY(18px);
  transition:opacity var(--pl-dur-slow) var(--pl-ease-out), transform var(--pl-dur-slow) var(--pl-ease-out);
  transition-delay:calc(var(--i, 0) * 70ms);
}
html.js [data-reveal].is-in{ opacity:1; transform:none; }
html.js [data-reveal="scale"]{ transform:scale(.96); }
html.js [data-reveal="scale"].is-in{ transform:none; }

/* ---------- 14. Reduced motion: final states, no movement ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0ms !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
  }
  html.js [data-reveal]{ opacity:1; transform:none; }
  .pl-marquee__track{ animation:none; }
  .pl-marquee__group[aria-hidden="true"]{ display:none; }
  .pl-marquee__track{ width:auto; flex-wrap:wrap; justify-content:center; padding-inline:var(--pl-gutter); }
  .pl-marquee__group{ flex-wrap:wrap; justify-content:center; row-gap:.5rem; }
  .pl-progress{ display:none; }
}