/* TowTechniks main stylesheet — hand-written, on the design tokens.
   Loaded async after critical.css. Everything below the fold + the
   theme/state overrides live here, all inside @layer components so the
   cascade is deterministic and no !important is needed.

   No framework. Sharp 2px corners by construction (--radius); the only
   circle is the lite-YouTube play button (a deliberate play affordance).
   Transitions use only the --dur-* / --ease-* tokens. */
@layer reset, base, components, utilities;

/* @view-transition is a global at-rule (same-origin nav cross-fades). */
@view-transition{navigation:auto}

@layer components{

  /* ============================================================
     Glass topbar on scroll (JS toggles .is-scrolled on .header)
     ============================================================ */
  .header.is-scrolled .header__topbar{
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    background:color-mix(in srgb,var(--c-bg) 85%,transparent);
    border-bottom:1px solid var(--c-border);
    box-shadow:0 2px 12px rgba(0,0,0,.12);
    transition:background var(--dur-base) var(--ease-out),backdrop-filter var(--dur-base) var(--ease-out);
  }
  .header.is-scrolled .header__topbar .topbar__nav-link,
  .header.is-scrolled .header__topbar .topbar__lang a{color:var(--c-text-muted)}
  .header.is-scrolled .header__topbar .topbar__nav-link:hover,
  .header.is-scrolled .header__topbar .topbar__lang a:hover,
  .header.is-scrolled .header__topbar .topbar__lang a.active{color:var(--c-text)}
  .header.is-scrolled .header__topbar .topbar__lang span{color:var(--c-border)}
  .header.is-scrolled .theme-toggle{color:var(--c-text)}
  .header.is-scrolled .theme-toggle:hover{background:color-mix(in srgb,var(--c-text) 8%,transparent)}
  /* On the home, the dark hero sits under the bar — keep it dark when scrolled. */
  body:not(.page) .header.is-scrolled .header__topbar{
    background:linear-gradient(to bottom,rgba(36,36,36,.92) 0%,rgba(17,17,17,.92) 100%);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:none;
  }
  body:not(.page) .header.is-scrolled .header__topbar .topbar__nav-link,
  body:not(.page) .header.is-scrolled .header__topbar .topbar__lang a{color:rgba(255,255,255,.5)}
  body:not(.page) .header.is-scrolled .header__topbar .topbar__nav-link:hover,
  body:not(.page) .header.is-scrolled .header__topbar .topbar__lang a:hover,
  body:not(.page) .header.is-scrolled .header__topbar .topbar__lang a.active{color:#fff}
  body:not(.page) .header.is-scrolled .header__topbar .topbar__lang span{color:rgba(255,255,255,.3)}
  body:not(.page) .header.is-scrolled .theme-toggle{color:#fff}
  body:not(.page) .header.is-scrolled .theme-toggle:hover{background:color-mix(in srgb,#fff 14%,transparent)}

  /* Hero CTA needs no #fff override on dark — the hero stays dark in both themes. */

  /* ============================================================
     DHV trust strip
     ============================================================ */
  .dhv-bar{background:linear-gradient(to bottom,#242424,#111);padding:clamp(15px,2.2vw,22px) 0;position:relative;z-index:14;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05)}
  .dhv-bar__inner{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,22px);flex-wrap:wrap}
  .dhv-bar__logo{height:30px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.85}
  .dhv-bar__label{color:rgba(255,255,255,.82);font-size:clamp(12px,1.5vw,14px);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
  .dhv-bar__sep{width:1px;height:18px;background:rgba(255,255,255,.18)}
  .dhv-bar__code{color:var(--c-accent-hover);font-size:clamp(12px,1.5vw,14px);font-weight:600;letter-spacing:.04em;font-family:var(--font-mono)}
  @media (max-width:575px){.dhv-bar__sep{display:none}.dhv-bar__inner{gap:8px 14px}.dhv-bar__logo{height:24px}}
  [data-theme="dark"] .dhv-bar{background:var(--c-surface);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border)}
  [data-theme="dark"] .dhv-bar__logo{opacity:.7}

  /* ============================================================
     Shared section heading — left-aligned, normal case
     ============================================================ */
  .specsheet h2,.specsheet .specsheet__title,
  .boxes>.container>h2,
  .videos__inner h2,
  .products h2,
  .features h2,
  .team h2,
  .wherewefly__head h2{
    font-size:clamp(1.5rem,3.2vw,2.1rem);font-weight:700;letter-spacing:-.01em;
    text-transform:none;line-height:1.15;color:var(--c-text);margin:0 0 8px;text-align:left;
  }

  /* ============================================================
     Spec sheet — a clean product spec card
     ============================================================ */
  .specsheet{padding-block:var(--section-pad);background:var(--c-bg);color:var(--c-text)}
  .specsheet__title{margin:0 0 clamp(20px,3vw,28px)}
  .specsheet__grid{margin:0;background:var(--c-surface);border:1px solid var(--c-border);border-left:3px solid var(--c-accent);border-radius:var(--radius);padding:clamp(8px,1.4vw,16px) clamp(16px,2.6vw,30px)}
  .specsheet__row{display:flex;justify-content:space-between;gap:24px;align-items:baseline;padding:14px 0;border-top:1px solid var(--c-border)}
  .specsheet__row:first-child{border-top:0}
  .specsheet__row dt{margin:0;color:var(--c-text-muted);font-size:14.5px;font-weight:600;flex:0 0 auto}
  .specsheet__row dd{margin:0;color:var(--c-text);font-size:14.5px;text-align:right;font-family:var(--font-mono)}
  @media (min-width:768px){
    .specsheet__grid{column-count:2;column-gap:clamp(32px,4.5vw,56px)}
    .specsheet__row{break-inside:avoid}
    .specsheet__row:first-child{border-top:1px solid var(--c-border)}
  }
  @media (max-width:520px){.specsheet__row{flex-direction:column;gap:2px;align-items:flex-start}.specsheet__row dd{text-align:left}}

  /* ============================================================
     "Die T2" — two on-brand spec cards
     ============================================================ */
  .boxes{background:var(--c-bg);padding-block:var(--section-pad)}
  .boxes__intro{color:var(--c-text-muted);max-width:680px;margin:0 0 clamp(24px,4vw,36px);font-size:clamp(1rem,1.5vw,1.1rem);line-height:1.6}
  .boxes__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(18px,2.5vw,28px)}
  .boxes__card{position:relative;margin:0;background:var(--c-surface);border:1px solid var(--c-border);border-left:3px solid var(--c-accent);border-radius:var(--radius);padding:clamp(22px,3vw,34px);transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
  .boxes__card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
  .boxes__index{display:block;color:var(--c-accent);font-size:12px;font-weight:600;letter-spacing:.04em;margin:0 0 12px;font-family:var(--font-mono)}
  .boxes__card h3{margin:0 0 12px;font-size:clamp(1.25rem,2.2vw,1.6rem);font-weight:700;color:var(--c-text);letter-spacing:-.01em;line-height:1.15}
  .boxes__card p{margin:0 0 18px;color:var(--c-text-muted);line-height:1.65}
  .boxes__chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
  .boxes__chips li{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius);font-size:12.5px;color:var(--c-text-muted)}
  .boxes__chips li::before{content:"\25B8";color:var(--c-accent);font-size:10px}
  .boxes__chips .mono{color:var(--c-text);font-weight:600;font-family:var(--font-mono);font-size:12px}

  /* ============================================================
     Features — remote controller + towing feature lists
     ============================================================ */
  .features{padding-block:var(--section-pad);background:var(--c-bg);color:var(--c-text)}
  .features__intro{color:var(--c-text-muted);max-width:680px;margin:0 0 clamp(24px,4vw,36px);font-size:clamp(1rem,1.5vw,1.1rem);line-height:1.6}
  .features__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(18px,2.5vw,28px);align-items:start}
  .features__group{margin:0;background:var(--c-surface);border:1px solid var(--c-border);border-left:3px solid var(--c-accent);border-radius:var(--radius);padding:clamp(22px,3vw,32px)}
  .features__group h3{margin:0 0 16px;font-size:clamp(1.15rem,2vw,1.4rem);font-weight:700;color:var(--c-text);letter-spacing:-.01em;line-height:1.2}
  .features__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
  .features__list li{position:relative;padding-left:22px;color:var(--c-text-muted);line-height:1.55;font-size:15px}
  .features__list li::before{content:"\25B8";position:absolute;left:0;top:.05em;color:var(--c-accent);font-size:12px}
  .features__list .mono{color:var(--c-text);font-weight:600;font-family:var(--font-mono);font-size:.9em}

  /* ============================================================
     Videos — lite-YouTube facade grid
     ============================================================ */
  .videos{padding-block:0;background:var(--c-bg)}
  .videos__inner{padding-block:var(--section-pad);position:relative}
  .videos__desc{color:var(--c-text-muted);max-width:680px;margin:0 0 28px;text-align:left;font-style:normal;line-height:1.6}
  .videos__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(16px,2.5vw,28px)}
  .lite-yt{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;margin:0;padding:0;cursor:pointer;background:#000;border-radius:var(--radius);overflow:hidden;color:#fff}
  .lite-yt__thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-base) var(--ease-out)}
  .lite-yt:hover .lite-yt__thumb{transform:scale(1.04)}
  .lite-yt__play{position:absolute;left:50%;top:50%;width:60px;height:60px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;transition:background var(--dur-fast) var(--ease-out)}
  .lite-yt__play::before{content:"";display:block;width:0;height:0;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;margin-left:4px}
  .lite-yt:hover .lite-yt__play{background:var(--c-accent)}
  .lite-yt__title{position:absolute;left:0;right:0;bottom:0;padding:24px 14px 10px;font-size:13px;font-weight:600;text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff}
  .lite-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .lite-yt.is-loaded .lite-yt__thumb,.lite-yt.is-loaded .lite-yt__play,.lite-yt.is-loaded .lite-yt__title{display:none}
  .lite-yt:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
  .videos__more{margin:clamp(18px,3vw,28px) 0 0;font-size:14px}
  .videos__more a{color:var(--c-accent);text-decoration:none;font-weight:600}
  .videos__more a:hover{text-decoration:underline}

  /* ============================================================
     "Inside the T2" — component photos on dark cards
     ============================================================ */
  .products{padding-block:var(--section-pad);background:var(--c-bg);overflow:visible}
  .products h2{margin:0 0 8px}
  .products__subtitle{color:var(--c-text-muted);max-width:640px;margin:0 0 28px;text-align:left;line-height:1.6}
  .products__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(16px,2.5vw,28px);align-items:start}
  .products__item{margin:0;background:#0d0d0f;border:1px solid var(--c-border);border-radius:var(--radius);overflow:hidden;padding:0;text-align:left;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
  .products__item:hover{transform:translateY(-3px);box-shadow:0 8px 24px color-mix(in srgb,var(--c-accent) 22%,transparent)}
  .products__item picture,.products__item img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center;margin:0}
  .products__item h3{margin:0;padding:13px 16px;font-size:15px;font-weight:600;color:var(--c-text);background:var(--c-surface)}

  /* ============================================================
     Team — static grid of portrait cards (home teaser is .team)
     ============================================================ */
  .team{padding-block:var(--section-pad);background:var(--c-surface);overflow:visible}
  .team h2{color:var(--c-text);margin:0 0 8px}
  .team__desc{color:var(--c-text-muted);max-width:640px;margin:0 0 26px;text-align:left;line-height:1.6}
  .team__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));gap:clamp(16px,2.2vw,24px);list-style:none;margin:0;padding:0}
  .team__card{display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius);padding:20px 14px;overflow:visible;transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
  .team__card:hover{border-color:var(--c-accent);transform:translateY(-2px)}
  .team__card img{width:128px;height:128px;border-radius:var(--radius);object-fit:cover;margin:0 0 14px;border:1px solid var(--c-border)}
  .team__card h3{margin:0 0 2px;font-size:16px;color:var(--c-text);font-weight:600;line-height:1.2}
  .team__role{margin:0 0 10px;font-size:12.5px;font-weight:600;color:var(--c-accent)}
  .team__quote{margin:0;font-size:13px;line-height:1.5;color:var(--c-text-muted)}
  .team__more{margin:clamp(20px,3vw,28px) 0 0;font-size:.9375rem}
  .team__more a{display:inline-flex;align-items:center;gap:8px;color:var(--c-accent);font-weight:600;text-decoration:none}
  .team__more a:hover{text-decoration:underline}

  /* ============================================================
     "Where we fly" — map (left column) + the Official | Community panel (right)
     ============================================================ */
  .wherewefly,.news.wherewefly{padding-block:var(--section-pad);background:var(--c-surface);color:var(--c-text)}
  .wherewefly__head{max-width:680px;margin:0 0 clamp(18px,3vw,24px)}
  .wherewefly__head p{margin:0;color:var(--c-text-muted)}

  /* Official | Community segmented control (above the two-column area) */
  .wherewefly__switch{display:inline-flex;border:1px solid var(--c-border);border-radius:var(--radius);overflow:hidden;margin:0 0 clamp(18px,3vw,24px)}
  .wherewefly__tab{padding:8px 18px;background:var(--c-bg);color:var(--c-text-muted);border:0;font-size:13px;font-weight:600;letter-spacing:.02em;cursor:pointer;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
  .wherewefly__tab+.wherewefly__tab{border-left:1px solid var(--c-border)}
  .wherewefly__tab:not(.is-active):hover{color:var(--c-text);background:var(--c-surface-2)}
  .wherewefly__tab.is-active{background:var(--c-accent);color:#fff}

  /* map left (~half), the toggled panel right; stacks on narrow screens */
  .wherewefly__layout{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,32px);align-items:start}
  @media (min-width:920px){.wherewefly__layout{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
  .wherewefly__map-col,.wherewefly__side{min-width:0}
  .wherewefly__map iframe{width:100%;aspect-ratio:16/10;border:1px solid var(--c-border);border-radius:var(--radius);display:block}
  @media (min-width:920px){.wherewefly__map iframe{aspect-ratio:4/3}}
  .wherewefly__map-link{display:inline-block;margin-top:8px;font-size:13px;color:var(--c-accent);text-decoration:none}
  .wherewefly__map-link:hover{text-decoration:underline}

  /* in-page photo preview — opened when a community photo is clicked */
  .wherewefly__photo{position:relative;margin:clamp(14px,2.5vw,20px) 0 0;border:1px solid var(--c-border);border-radius:var(--radius);background:var(--c-bg);overflow:hidden}
  .wherewefly__photo[hidden]{display:none}
  .wherewefly__photo img{display:block;width:100%;height:auto;max-height:300px;object-fit:cover}
  .wherewefly__photo-cap{padding:12px 14px 2px;font-size:13.5px;font-weight:700;color:var(--c-text)}
  .wherewefly__photo-cap .mono{color:var(--c-accent);font-family:var(--font-mono);font-weight:600;font-size:12px}
  .wherewefly__photo-cap time{color:var(--c-text-muted);font-family:var(--font-mono);font-weight:600;font-size:12px}
  .wherewefly__photo-text{padding:6px 14px 14px;font-size:13.5px;line-height:1.6;color:var(--c-text-muted)}
  .wherewefly__photo-text p{margin:0 0 8px}
  .wherewefly__photo-text p:last-child{margin:0}
  .wherewefly__photo-close{position:absolute;top:8px;right:8px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);background:rgba(8,10,12,.55);color:#fff;font-size:20px;line-height:1;cursor:pointer;border:0;transition:background var(--dur-fast) var(--ease-out)}
  .wherewefly__photo-close:hover{background:rgba(8,10,12,.8)}

  /* the two panes share the side column; only the selected one is visible */
  .wherewefly__pane{margin:0}
  .wherewefly__pane[hidden]{display:none}
  /* country tiles — buttons that swap the embedded map (no leaving the page) */
  .wherewefly__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:0;padding:0;list-style:none}
  .wherewefly__list li{margin:0}
  .wherewefly__country{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:12px 14px;background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius);font-size:14.5px;font-family:inherit;color:var(--c-text);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
  .wherewefly__country:hover{border-color:var(--c-accent);transform:translateY(-1px)}
  .wherewefly__country.is-active{border-color:var(--c-accent);background:color-mix(in srgb,var(--c-accent) 8%,var(--c-bg))}
  .wherewefly__country .mono{color:var(--c-accent);font-size:12.5px;font-weight:600;flex:0 0 auto;min-width:2.1em}

  .wherewefly__cta{margin:clamp(18px,3vw,24px) 0 0}
  .wherewefly__cta a{color:var(--c-accent);font-weight:600;text-decoration:none}
  .wherewefly__cta a:hover{text-decoration:underline}

  /* ============================================================
     Community tiles — the right panel when "Community" is selected.
     A photo tile re-points the map + opens the in-page photo preview.
     ============================================================ */
  .community-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:clamp(12px,2vw,18px);margin:0}
  .community-tile{margin:0;min-width:0}
  .community-tile__photo{display:block;width:100%;padding:0;border:1px solid var(--c-border);border-radius:var(--radius);overflow:hidden;background:var(--c-bg);cursor:pointer;line-height:0;transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
  .community-tile__photo:hover{border-color:var(--c-accent);transform:translateY(-2px)}
  .community-tile__photo:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
  .community-tile__photo img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
  .community-tile__author{margin:8px 0 1px;font-size:13.5px;font-weight:700;color:var(--c-text);line-height:1.2}
  .community-tile__meta{margin:0;font-size:11.5px;color:var(--c-text-muted)}
  .community-tile__meta .mono{color:var(--c-accent);font-family:var(--font-mono);font-weight:600}
  .community-tile__meta time{color:var(--c-text-muted);font-family:var(--font-mono)}
  /* text-only post (no photo) — a small card that spans the row */
  .community-tile--noimg{grid-column:1/-1;background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius);padding:14px 16px}
  .community-tile--noimg .community-tile__author{margin:6px 0 0;font-size:15px}
  .community-tile__loc{display:inline;padding:0;border:0;background:none;font:inherit;cursor:pointer;color:var(--c-accent);font-weight:600;font-family:var(--font-mono);font-size:11.5px;text-decoration:none}
  .community-tile__loc:hover{text-decoration:underline}
  .community-tile__text{margin:6px 0 0;font-size:13px;line-height:1.6;color:var(--c-text-muted)}
  .community-tile__text p{margin:0 0 8px}
  .community-tile__text p:last-child{margin:0}
  .community-empty{margin:0;padding:clamp(24px,4vw,36px);text-align:center;color:var(--c-text-muted);background:var(--c-bg);border:1px dashed var(--c-border);border-radius:var(--radius);font-size:14.5px}

  /* ============================================================
     Footer — always dark, technically refined, AA contrast
     ============================================================ */
  .footer{
    --footer-heading:#a6a6ae;--footer-muted:#aeaeb6;--footer-link:#cacace;--footer-text:#d2d2d8;
    position:relative;z-index:5;background:#0c0c0e;color:var(--footer-text);
    border-top:1px solid var(--c-accent);padding:clamp(48px,7vw,72px) 0 0;font-size:14px;line-height:1.7;
  }
  .footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(24px,4vw,56px);padding-bottom:32px}
  @media (max-width:760px){.footer__grid{grid-template-columns:1fr;gap:28px}}
  .footer__wordmark{margin:0 0 12px;font-family:'Poppins',sans-serif;font-size:1.35rem;font-weight:800;letter-spacing:.04em;color:#fff;text-transform:uppercase}
  .footer__tagline{margin:0;color:var(--footer-muted);font-size:13.5px}
  .footer__heading{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--footer-heading);font-weight:600}
  .footer__address{font-style:normal;margin:0;color:var(--footer-text)}
  .footer p{margin:0 0 6px;color:var(--footer-text);font-size:14px;font-weight:400}
  .footer a{color:var(--footer-link);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
  .footer a:hover{color:#fff;text-decoration:underline}
  .footer__links a{color:var(--footer-link)}
  .footer__bar{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:center;padding:16px 0;border-top:1px solid rgba(255,255,255,.09);color:var(--footer-muted);font-size:13px}
  .footer__bar a{color:var(--footer-link)}
  .footer__legal a:hover{color:#fff}

  /* ============================================================
     Legal pages (.legal) — a measured prose column
     ============================================================ */
  /* .legal is the .header+* element on legal pages, so it inherits the 128px
     logo-clearance top padding from critical.css — only add the bottom here. */
  .legal{padding-bottom:clamp(72px,10vw,120px);background:var(--c-bg);color:var(--c-text)}
  .legal__inner{max-width:760px;margin:0 auto}
  .legal h1{font-size:clamp(1.9rem,4.2vw,2.6rem);font-weight:700;letter-spacing:-.01em;margin:0 0 clamp(24px,4vw,36px);color:var(--c-text)}
  .legal h2{font-size:clamp(1.2rem,2.4vw,1.5rem);font-weight:700;margin:clamp(28px,4vw,40px) 0 10px;color:var(--c-text)}
  .legal h3{font-size:1.1rem;font-weight:600;margin:24px 0 8px;color:var(--c-text)}
  .legal p{margin:0 0 14px;color:var(--c-text);font-size:15.5px;line-height:1.7}
  .legal ul,.legal ol{margin:0 0 14px;padding-left:20px;list-style:revert}
  .legal li{margin:0 0 6px;line-height:1.7}
  .legal a{color:var(--c-accent);text-decoration:underline;text-underline-offset:2px}
  .legal a:hover{color:var(--c-accent-hover)}

  /* ============================================================
     Share-your-flight-story form (teilen.html / en/share.html)
     ============================================================ */
  .share{padding-block:var(--section-pad);background:var(--c-bg);color:var(--c-text)}
  .share__head{max-width:720px;margin:0 0 clamp(28px,4vw,40px)}
  .share__eyebrow{margin:0 0 14px;color:var(--c-accent);font-size:13px;letter-spacing:.04em}
  .share__head h1{margin:0 0 12px;font-size:clamp(1.9rem,4.5vw,2.8rem);font-weight:700;letter-spacing:-.01em;line-height:1.1;color:var(--c-text)}
  .share__intro{margin:0;color:var(--c-text-muted);font-size:clamp(1rem,1.5vw,1.1rem);line-height:1.6}
  .share__intro a{color:var(--c-accent);text-decoration:none}
  .share__intro a:hover{text-decoration:underline}
  .share-form{max-width:640px;display:flex;flex-direction:column;gap:18px}
  .share-form__row{display:flex;flex-direction:column;gap:6px}
  .share-form label,.share-form legend{font-size:13px;font-weight:600;color:var(--c-text);letter-spacing:.01em}
  .share-form__req{color:var(--c-accent)}
  .share-form input,.share-form select,.share-form textarea{font:inherit;font-size:15px;color:var(--c-text);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:10px 12px;width:100%;transition:border-color var(--dur-fast) var(--ease-out)}
  .share-form input:focus,.share-form select:focus,.share-form textarea:focus{outline:none;border-color:var(--c-accent)}
  .share-form textarea{resize:vertical;min-height:120px;line-height:1.55}
  .share-form input[type="file"]{padding:8px 12px;background:var(--c-surface);cursor:pointer}
  .share-form__coords{border:1px solid var(--c-border);border-radius:var(--radius);padding:14px 14px 16px;margin:0}
  .share-form__coords legend{padding:0 6px;font-weight:600}
  .share-form__coords-inputs{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;align-items:end;margin-top:8px}
  .share-form__hint{margin:0;font-size:12.5px;color:var(--c-text-muted);line-height:1.5}
  .share-form__submit{align-self:flex-start;margin-top:4px;display:inline-flex;align-items:center;gap:.5em;padding:14px 26px;border-radius:var(--radius);font-size:15px;font-weight:600;line-height:1;min-height:44px;text-decoration:none;border:1px solid transparent;background:var(--c-accent);color:#fff;cursor:pointer;transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
  .share-form__submit:hover{background:var(--c-accent-hover);transform:translateY(-1px)}
  .share-form__sent{margin:0;padding:12px 14px;border-radius:var(--radius);background:color-mix(in srgb,var(--c-accent) 10%,var(--c-bg));border:1px solid var(--c-accent);color:var(--c-text);font-size:14px}
  .share-form__note{margin:0;font-size:12.5px;color:var(--c-text-muted);line-height:1.55}

  /* (blog list + article pages are styled by css/blog.css, on the shared tokens.) */

  /* ============================================================
     Section reveal on scroll — progressive enhancement, motion-safe
     ============================================================ */
  .hero--text h1{view-transition-name:page-title}
  @supports (animation-timeline: view()){
    @media (prefers-reduced-motion: no-preference){
      .specsheet,.boxes,.features,.videos,.products,.team,.wherewefly,.news.wherewefly,
      .gallery-section,.gallery-page,.blog-list,.share,.story,.team-back,.reveal{
        animation:reveal-up linear both;animation-timeline:view();animation-range:entry 0% cover 22%;
      }
    }
  }
  @keyframes reveal-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

  /* ============================================================
     Cookie banner (TTDSG §25 / DSGVO opt-in)
     ============================================================ */
  .cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:9000;display:flex;justify-content:center;pointer-events:none}
  .cookie-banner[hidden]{display:none}
  .cookie-banner__inner{pointer-events:auto;max-width:680px;width:100%;background:var(--c-bg);color:var(--c-text);border:1px solid var(--c-border);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:18px 20px;display:flex;flex-direction:column;gap:12px}
  .cookie-banner__title{margin:0;font-size:16px;font-weight:700;line-height:1.3}
  .cookie-banner__body{margin:0;font-size:14px;line-height:1.55;color:var(--c-text-muted)}
  .cookie-banner__body a{color:var(--c-accent);text-decoration:underline}
  .cookie-banner__body a:hover{color:var(--c-accent-hover)}
  .cookie-banner__actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
  .cookie-banner__btn{font:inherit;font-size:14px;font-weight:600;line-height:1;min-height:40px;padding:10px 18px;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
  .cookie-banner__btn--accept{background:var(--c-accent);color:#fff}
  .cookie-banner__btn--accept:hover{background:var(--c-accent-hover);transform:translateY(-1px)}
  .cookie-banner__btn--reject{background:transparent;color:var(--c-text);border-color:var(--c-border)}
  .cookie-banner__btn--reject:hover{background:var(--c-surface)}
  @media (max-width:520px){
    .cookie-banner{left:8px;right:8px;bottom:8px}
    .cookie-banner__inner{padding:14px 16px}
    .cookie-banner__actions{justify-content:stretch}
    .cookie-banner__btn{flex:1 1 0}
  }

  /* ============================================================
     OSM map placeholder (consent-gated)
     ============================================================ */
  .wherewefly__map{position:relative}
  .map-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;background:var(--c-surface);border-radius:var(--radius);z-index:2}
  .map-placeholder[hidden]{display:none}
  .map-placeholder__text{margin:0;font-size:14px;color:var(--c-text-muted);line-height:1.55;max-width:42ch}
  .map-placeholder__text strong{color:var(--c-text);font-weight:600}
  .map-placeholder__btn{font:inherit;font-size:14px;font-weight:600;line-height:1;min-height:40px;padding:10px 18px;border-radius:var(--radius);border:1px solid transparent;background:var(--c-accent);color:#fff;cursor:pointer;transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
  .map-placeholder__btn:hover{background:var(--c-accent-hover);transform:translateY(-1px)}

}/* end @layer components */