/* ==========================================================
     SELBST-GEHOSTETE SCHRIFTEN (Variable Fonts, WOFF2)
     Werden vom eigenen Server geladen — kein externer Request,
     kein Consent nötig, keine IP-Übertragung an Dritte.
     ========================================================== */
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/Inter-Variable.woff2') format('woff2-variations'),
         url('/assets/fonts/Inter-Variable.woff2') format('woff2');
  }
  @font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('/assets/fonts/JetBrainsMono-Variable.woff2') format('woff2-variations'),
         url('/assets/fonts/JetBrainsMono-Variable.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Satoshi';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/Satoshi-Variable.woff2') format('woff2-variations'),
         url('/assets/fonts/Satoshi-Variable.woff2') format('woff2');
  }

  /* ==========================================================
     TOKENS  (identical to CD_TankPuls.html)
     ========================================================== */
  :root{
    --ink:#0E1C2C;
    --mint:#14D8C0;
    --mint-deep:#0FB3A0;
    --mint-soft:rgba(20,216,192,.12);

    --n-950:#0E1C2C;
    --n-900:#1A2938;
    --n-800:#2A3B4D;
    --n-700:#3E5062;
    --n-600:#5A6B7C;
    --n-500:#7A8A99;
    --n-400:#9CA8B4;
    --n-300:#C4CDD5;
    --n-200:#E4E9EE;
    --n-100:#F1F4F7;
    --n-50:#F8FAFB;
    --paper:#FFFFFF;

    --p-low:#14D8C0;
    --p-avg:#7A8A99;
    --p-high:#E4A33A;
    --p-xhigh:#E06B4A;

    --r-xs:4px;
    --r-sm:8px;
    --r-md:12px;
    --r-lg:16px;
    --r-xl:24px;

    --s-1: 0 1px 2px rgba(14,28,44,.04), 0 1px 1px rgba(14,28,44,.02);
    --s-2: 0 2px 8px rgba(14,28,44,.06), 0 1px 3px rgba(14,28,44,.04);
    --s-3: 0 12px 32px rgba(14,28,44,.10), 0 2px 8px rgba(14,28,44,.06);

    --f-display: 'Satoshi','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    --f-body:    'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    --f-mono:    'JetBrains Mono','SF Mono',Consolas,monospace;

    --container: 1240px;
    --pad-x: clamp(20px, 5vw, 56px);
  }

  /* ==========================================================
     RESET
     ========================================================== */
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--f-body);
    font-size:16px;
    line-height:1.55;
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    font-feature-settings:"ss01","cv11";
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  img,svg{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
  :focus-visible{outline:2px solid var(--mint);outline-offset:2px;border-radius:3px;}

  .wrap{
    max-width:var(--container);
    margin:0 auto;
    padding-left:var(--pad-x);
    padding-right:var(--pad-x);
  }

  /* ==========================================================
     NAV
     ========================================================== */
  .nav{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255,255,255,.82);
    backdrop-filter:saturate(1.6) blur(12px);
    -webkit-backdrop-filter:saturate(1.6) blur(12px);
    border-bottom:1px solid var(--n-200);
  }
  .nav-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:32px;
    height:76px;
  }
  .brand{
    font-family:var(--f-display);
    font-weight:700;
    font-size:20px;
    letter-spacing:-.02em;
    color:var(--ink);
    display:inline-flex;
    align-items:center;
    gap:10px;
    line-height:1;
  }
  .brand .mark{
    width:52px;height:52px;
    display:block;
    border-radius:6px;
    flex-shrink:0;
  }
  .brand .wm{display:inline-block;}
  .brand .dot{color:var(--mint);}
  .nav-links{
    display:flex;
    gap:28px;
    justify-content:center;
    font-size:14px;
    font-weight:450;
    color:var(--n-700);
  }
  .nav-links a{transition:color 160ms;}
  .nav-links a:hover{color:var(--ink);}
  .nav-cta{
    display:flex;gap:12px;align-items:center;
  }
  .nav-status{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:var(--f-mono);
    font-size:11px;
    color:var(--n-600);
    text-transform:uppercase;
    letter-spacing:.1em;
  }
  .nav-status .live-dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--mint);
    box-shadow:0 0 0 0 rgba(20,216,192,.6);
    animation:pulse 2.4s cubic-bezier(.4,0,.2,1) infinite;
  }
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(20,216,192,.55);}
    70%{box-shadow:0 0 0 10px rgba(20,216,192,0);}
    100%{box-shadow:0 0 0 0 rgba(20,216,192,0);}
  }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    font-family:var(--f-display);
    font-size:14px;
    font-weight:500;
    letter-spacing:-.005em;
    border-radius:var(--r-sm);
    transition:all 160ms ease-out;
    border:1px solid transparent;
    white-space:nowrap;
  }
  .btn:hover{transform:translateY(-1px);}
  .btn-primary{background:var(--ink);color:var(--paper);}
  .btn-primary:hover{background:var(--n-800);box-shadow:var(--s-2);}
  .btn-secondary{background:var(--paper);color:var(--ink);border-color:var(--n-300);}
  .btn-secondary:hover{border-color:var(--ink);}
  .btn-mint{background:var(--mint);color:var(--ink);}
  .btn-mint:hover{background:var(--mint-deep);color:var(--paper);}
  .btn-ghost-dark{color:var(--paper);border:1px solid rgba(255,255,255,.2);padding:10px 18px;font-size:14px;border-radius:var(--r-sm);font-family:var(--f-display);font-weight:500;}
  .btn-ghost-dark:hover{border-color:var(--mint);color:var(--mint);}
  .btn-lg{padding:14px 24px;font-size:15px;}

  /* ==========================================================
     HERO
     ========================================================== */
  .hero{
    position:relative;
    background:#0B2440;
    color:var(--paper);
    overflow:hidden;
    isolation:isolate;
  }
  .hero::before{display:none;}
  /* Blueprint grid overlay — only visible in the dark text area on the left */
  .hero::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background-image:
      linear-gradient(rgba(160,210,255,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(160,210,255,.05) 1px, transparent 1px);
    background-size:140px 140px;
    -webkit-mask-image:linear-gradient(95deg, #000 0%, #000 50%, transparent 72%);
    mask-image:linear-gradient(95deg, #000 0%, #000 50%, transparent 72%);
  }

  /* Map: nur ≥1040px sichtbar — auf Mobile komplett ausgeblendet,
     dort zeigt sich nur der blaue Hero-Hintergrund mit Blueprint-Grid. */
  .hero-map{
    position:absolute;
    inset:0;
    z-index:0;
    background:#0B2440;
    display:none;
  }
  .hero-map .leaflet-tile-pane{
    filter:hue-rotate(-8deg) saturate(1.35) brightness(.95);
  }
  @media (min-width:1040px){
    .hero-map{
      display:block;
      left:auto;
      right:0;
      width:44%;
      -webkit-mask-image:linear-gradient(to right,
        transparent 0%,
        rgba(0,0,0,.15) 8%,
        rgba(0,0,0,.45) 18%,
        rgba(0,0,0,.8) 28%,
        #000 36%,
        #000 100%);
      mask-image:linear-gradient(to right,
        transparent 0%,
        rgba(0,0,0,.15) 8%,
        rgba(0,0,0,.45) 18%,
        rgba(0,0,0,.8) 28%,
        #000 36%,
        #000 100%);
    }
  }
  /* Auf Mobile/Tablet: Hero-Hintergrund blau + Grid voll breit */
  @media (max-width:1039px){
    .hero{
      background:#0B2440;
    }
    .hero::after{
      /* Grid über die ganze Fläche statt nur links */
      background-image:
        linear-gradient(rgba(160,210,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(160,210,255,.08) 1px, transparent 1px);
      background-size:80px 80px;
      -webkit-mask-image:linear-gradient(180deg,
        rgba(0,0,0,.95) 0%,
        rgba(0,0,0,.7) 70%,
        transparent 100%);
      mask-image:linear-gradient(180deg,
        rgba(0,0,0,.95) 0%,
        rgba(0,0,0,.7) 70%,
        transparent 100%);
    }
  }
  .hero-map.is-locked .leaflet-grab,
  .hero-map.is-locked .leaflet-grab.leaflet-dragging,
  .hero-map.is-locked .leaflet-container{
    cursor:default;
  }
  .hero-inner{
    position:relative;
    z-index:3;
    padding-top:96px;
    padding-bottom:112px;
    display:grid;
    grid-template-columns:1fr;
    gap:48px;
    align-items:center;
    min-height:580px;
    pointer-events:none;
  }
  .hero-copy{
    max-width:640px;
    pointer-events:auto;
  }

  /* Legacy slots, hidden since map became the background */
  .hero-visual,
  .hero-pin,
  .hero-ticker,
  .hero-pump,
  .hero-map__locate{display:none !important;}

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:6px 12px 6px 10px;
    border-radius:999px;
    background:rgba(20,216,192,.08);
    border:1px solid rgba(20,216,192,.2);
    color:var(--mint);
    font-family:var(--f-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.1em;
    margin-bottom:28px;
  }
  .eyebrow .dotled{width:6px;height:6px;border-radius:50%;background:var(--mint);}

  .hero h1{
    font-family:var(--f-display);
    font-weight:500;
    font-size:clamp(44px, 6.6vw, 88px);
    letter-spacing:-.035em;
    line-height:1.05;
    margin-bottom:44px;
    text-wrap:balance;
  }
  .hero h1 em{font-style:normal;color:var(--mint);}

  .hero-lede{
    font-size:18px;
    line-height:1.5;
    color:var(--n-300);
    max-width:520px;
    margin-bottom:40px;
  }

  .hero-cta{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:40px;
  }

  .hero-trust{
    display:flex;
    gap:28px;
    padding-top:28px;
    border-top:1px solid rgba(255,255,255,.08);
    font-family:var(--f-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--n-400);
    flex-wrap:wrap;
  }
  .hero-trust span{display:flex;align-items:center;gap:8px;}
  .hero-trust svg{width:12px;height:12px;color:var(--mint);}

  /* Hero visual — pump + live price card */
  .hero-visual{
    position:relative;
    aspect-ratio:1/1.05;
    max-width:520px;
    justify-self:end;
    width:100%;
  }
  .hero-pump{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
  }
  .hero-pump svg, .hero-pump img{
    width:72%;
    height:auto;
    filter:drop-shadow(0 24px 48px rgba(0,0,0,.3));
    animation:floaty 8s ease-in-out infinite;
  }
  .hero-pump svg path[fill="#0E1C2C"]{fill:#E4E9EE;}
  .hero-pump svg path[fill="#14D8C0"]{fill:var(--mint);}
  @keyframes floaty{
    0%,100%{transform:translateY(0) rotate(0deg);}
    50%{transform:translateY(-8px) rotate(-.4deg);}
  }

  .hero-ticker{
    position:absolute;
    left:-4%;
    bottom:4%;
    z-index:402;
    background:var(--paper);
    color:var(--ink);
    border-radius:var(--r-md);
    padding:18px 20px;
    box-shadow:var(--s-3);
    width:280px;
  }
  .hero-ticker .row{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:baseline;
  }
  .hero-ticker .label{
    font-family:var(--f-mono);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--n-500);
    margin-bottom:4px;
  }
  .hero-ticker .station{
    font-family:var(--f-display);
    font-size:15px;
    font-weight:500;
    color:var(--ink);
  }
  .hero-ticker .meta{
    font-family:var(--f-mono);
    font-size:11px;
    color:var(--n-500);
    margin-top:2px;
  }
  .hero-ticker .price{
    font-family:var(--f-display);
    font-size:32px;
    font-weight:500;
    letter-spacing:-.025em;
    color:var(--mint-deep);
    font-variant-numeric:tabular-nums;
    line-height:1;
  }
  .hero-ticker .price .unit{
    font-size:12px;
    color:var(--n-500);
    font-weight:400;
    margin-left:3px;
  }
  .hero-ticker .delta{
    margin-top:14px;
    padding-top:12px;
    border-top:1px dashed var(--n-200);
    display:flex;
    justify-content:space-between;
    font-family:var(--f-mono);
    font-size:11px;
    color:var(--n-600);
  }
  .hero-ticker .delta b{color:var(--mint-deep);font-weight:500;}

  .hero-pin{
    position:absolute;
    top:8%;
    right:-2%;
    z-index:402;
    background:var(--paper);
    border-radius:var(--r-md);
    padding:14px 16px;
    box-shadow:var(--s-3);
    width:200px;
  }
  .hero-pin .label{
    font-family:var(--f-mono);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--n-500);
    margin-bottom:10px;
  }
  .hero-pin .bar-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
  }
  .hero-pin .bar-row:last-child{margin-bottom:0;}
  .hero-pin .bar-row .tag{
    font-family:var(--f-mono);
    font-size:10px;
    color:var(--n-600);
    width:18px;
  }
  .hero-pin .bar-row .bar{
    flex:1;
    height:6px;
    border-radius:3px;
    background:var(--n-100);
    overflow:hidden;
    position:relative;
  }
  .hero-pin .bar-row .fill{
    position:absolute;
    inset:0 auto 0 0;
    background:var(--mint);
    border-radius:3px;
  }
  .hero-pin .bar-row .val{
    font-family:var(--f-mono);
    font-size:10px;
    color:var(--ink);
    font-variant-numeric:tabular-nums;
    width:42px;
    text-align:right;
  }

  /* Leaflet overrides for the hero map */
  .hero-map .leaflet-control-attribution{
    background:rgba(14,28,44,.7);
    color:var(--n-400);
    font-family:var(--f-mono);
    font-size:9px;
    padding:3px 8px;
  }
  .hero-map .leaflet-control-zoom{
    margin:18px 18px 0 0;
    border:0;
    box-shadow:0 6px 16px rgba(0,0,0,.4);
    border-radius:10px;
    overflow:hidden;
  }
  .hero-map .leaflet-control-zoom a{
    background:rgba(14,28,44,.82);
    color:var(--paper);
    border:1px solid rgba(255,255,255,.1);
    border-bottom-width:0;
    backdrop-filter:saturate(1.4) blur(10px);
    -webkit-backdrop-filter:saturate(1.4) blur(10px);
    width:34px;
    height:34px;
    line-height:32px;
    font-size:18px;
    font-weight:400;
    transition:background .15s ease, color .15s ease;
  }
  .hero-map .leaflet-control-zoom a:first-child{
    border-top-left-radius:10px;
    border-top-right-radius:10px;
  }
  .hero-map .leaflet-control-zoom a:last-child{
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    border-bottom-width:1px;
  }
  .hero-map .leaflet-control-zoom a:hover{
    background:rgba(20,216,192,.18);
    color:var(--mint);
  }
  .hero-map .leaflet-control-zoom a.leaflet-disabled{
    color:var(--n-600);
    cursor:default;
  }
  /* Stacked custom controls (interaction toggle, locate) below the zoom box */
  .hero-map .leaflet-bar.hero-map-ctl{
    margin:8px 18px 0 0;
    border:0;
    box-shadow:none;
    border-radius:0;
    background:transparent;
  }
  .hero-map .hero-map-ctl a{
    background:rgba(14,28,44,.82);
    color:var(--paper);
    border:1px solid rgba(255,255,255,.1);
    -webkit-backdrop-filter:saturate(1.4) blur(10px);
    backdrop-filter:saturate(1.4) blur(10px);
    box-shadow:0 6px 16px rgba(0,0,0,.4);
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-top-left-radius:10px !important;
    border-top-right-radius:10px !important;
    border-bottom-left-radius:10px !important;
    border-bottom-right-radius:10px !important;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
  }
  .hero-map .hero-map-ctl a:hover{
    background:rgba(20,216,192,.18);
    color:var(--mint);
    border-color:rgba(20,216,192,.5);
  }
  .hero-map .hero-map-ctl a.is-active{
    background:var(--mint);
    color:var(--ink);
    border-color:var(--mint);
  }
  .hero-map .hero-map-ctl svg{width:16px;height:16px;display:block;}

  /* User-location pulsing dot */
  .tp-here-wrap{
    background:transparent !important;
    border:0 !important;
  }
  .tp-here{
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--mint);
    border:3px solid var(--paper);
    box-shadow:0 0 0 0 rgba(20,216,192,.85);
    animation:tp-here-pulse 2s ease-out infinite;
  }
  @keyframes tp-here-pulse{
    0%{box-shadow:0 0 0 0 rgba(20,216,192,.65);}
    70%{box-shadow:0 0 0 14px rgba(20,216,192,0);}
    100%{box-shadow:0 0 0 0 rgba(20,216,192,0);}
  }
  .hero-map .leaflet-control-attribution a{color:var(--n-300);}
  .hero-map .leaflet-control-attribution a:hover{color:var(--mint);}
  .hero-map .leaflet-popup-content-wrapper{
    background:var(--paper);
    color:var(--ink);
    border-radius:var(--r-sm);
    box-shadow:var(--s-3);
    padding:2px;
  }
  .hero-map .leaflet-popup-content{
    margin:10px 14px;
    font-family:var(--f-body);
    font-size:12px;
    line-height:1.45;
  }
  .hero-map .leaflet-popup-content b{font-weight:600;}
  .hero-map .leaflet-popup-tip{background:var(--paper);}

  /* Station marker — single pill: logo (max 25×25, contain) + price */
  .tp-pin-wrap{
    background:transparent !important;
    border:0 !important;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .tp-pin{
    display:inline-flex;
    flex-direction:row;
    align-items:stretch;
    height:28px;
    background:var(--paper);
    border:1.5px solid rgba(255,255,255,.95);
    border-radius:999px;
    box-shadow:0 3px 10px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.25);
    overflow:hidden;
    transition:transform .14s ease;
    pointer-events:auto;
    line-height:1;
  }
  .tp-pin:hover{transform:scale(1.12);z-index:500;}
  .tp-pin__logo{
    flex:0 0 25px;
    width:25px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--paper);
  }
  .tp-pin__logo img{
    display:block;
    width:18px;
    height:18px;
    object-fit:contain;
    object-position:center;
    pointer-events:none;
  }
  .tp-pin__logo--generic{color:var(--n-500);}
  .tp-pin__logo--generic svg{width:16px;height:16px;}
  .tp-pin__price{
    flex:0 0 58px;
    width:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--f-mono);
    font-variant-numeric:tabular-nums;
    font-size:11px;
    font-weight:700;
    color:var(--ink);
    background:var(--n-200);
    white-space:nowrap;
  }
  .tp-pin--low .tp-pin__price{background:var(--p-low);color:var(--ink);}
  .tp-pin--avg .tp-pin__price{background:var(--n-200);color:var(--ink);}
  .tp-pin--high .tp-pin__price{background:var(--p-high);color:var(--paper);}
  .tp-pin--xhigh .tp-pin__price{background:var(--p-xhigh);color:var(--paper);}

  /* Cluster — cheapest price + station count */
  .tp-cluster-wrap{
    background:transparent !important;
    border:0 !important;
  }
  .tp-cluster{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:3px 4px 3px 9px;
    background:rgba(14,28,44,.9);
    color:var(--paper);
    border:1.5px solid rgba(255,255,255,.7);
    border-radius:999px;
    box-shadow:0 3px 10px rgba(0,0,0,.5);
    font-family:var(--f-mono);
    font-variant-numeric:tabular-nums;
    line-height:1;
    white-space:nowrap;
  }
  .tp-cluster__price{
    font-size:11px;
    font-weight:600;
  }
  .tp-cluster__count{
    background:rgba(255,255,255,.16);
    font-size:10px;
    font-weight:500;
    padding:3px 7px;
    border-radius:999px;
    min-width:22px;
    text-align:center;
  }
  .tp-cluster--low{background:var(--p-low);color:var(--ink);border-color:var(--paper);}
  .tp-cluster--low .tp-cluster__count{background:rgba(14,28,44,.16);}
  .tp-cluster--high{background:var(--p-high);}
  .tp-cluster--xhigh{background:var(--p-xhigh);}

  /* Disable default markercluster CSS that conflicts with our pill style */
  .marker-cluster{background-color:transparent;}
  .marker-cluster div{background-color:transparent;}

  /* User-location marker — pulsing mint dot */
  .tp-here{
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--mint);
    border:3px solid var(--paper);
    box-shadow:0 0 0 0 rgba(20,216,192,.85);
    animation:tp-here-pulse 2s ease-out infinite;
  }
  @keyframes tp-here-pulse{
    0%{box-shadow:0 0 0 0 rgba(20,216,192,.65);}
    70%{box-shadow:0 0 0 14px rgba(20,216,192,0);}
    100%{box-shadow:0 0 0 0 rgba(20,216,192,0);}
  }

  /* Skeleton loader for live hero data */
  @keyframes hero-skeleton-shimmer{
    0%{background-position:-200% 0;}
    100%{background-position:200% 0;}
  }
  .hero-pin.is-loading .label,
  .hero-pin.is-loading .bar-row .tag,
  .hero-pin.is-loading .bar-row .val,
  .hero-ticker.is-loading .label,
  .hero-ticker.is-loading .station,
  .hero-ticker.is-loading .meta,
  .hero-ticker.is-loading .price,
  .hero-ticker.is-loading .delta span,
  .hero-ticker.is-loading .delta b{
    color:transparent !important;
    background:linear-gradient(90deg,var(--n-100) 0%,var(--n-200) 50%,var(--n-100) 100%);
    background-size:200% 100%;
    animation:hero-skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius:4px;
    display:block;
    user-select:none;
    overflow:hidden;
    text-indent:-9999px;
    white-space:nowrap;
  }
  /* Fixed dimensions so skeleton doesn't reflow with text content */
  .hero-pin.is-loading .label{ width:108px; height:12px; margin-bottom:14px; }
  .hero-pin.is-loading .bar-row{ margin-bottom:14px; }
  .hero-pin.is-loading .bar-row .tag{ width:18px; height:10px; }
  .hero-pin.is-loading .bar-row .val{ width:42px; height:10px; border-radius:3px; }
  .hero-pin.is-loading .bar-row .fill{
    background:linear-gradient(90deg,var(--n-100) 0%,var(--n-200) 50%,var(--n-100) 100%) !important;
    background-size:200% 100% !important;
    animation:hero-skeleton-shimmer 1.4s ease-in-out infinite;
    width:60% !important;
  }
  .hero-ticker.is-loading .label{ width:130px; height:11px; margin-bottom:10px; }
  .hero-ticker.is-loading .station{ width:120px; height:16px; margin-bottom:8px; }
  .hero-ticker.is-loading .meta{ width:160px; height:12px; margin-top:0; }
  .hero-ticker.is-loading .price{
    width:88px; height:32px; min-width:0;
  }
  .hero-ticker.is-loading .price .unit{ display:none; }
  .hero-ticker.is-loading .delta span{ width:130px; height:12px; border-radius:3px; }
  .hero-ticker.is-loading .delta b{ width:50px; height:12px; border-radius:3px; }

  /* ==========================================================
     PROMISE MARQUEE
     ========================================================== */
  .promise{
    background:var(--mint);
    color:var(--ink);
    padding:20px 0;
    overflow:hidden;
    border-bottom:1px solid var(--mint-deep);
  }
  .promise-track{
    /* Zwei identische .promise-group nebeneinander ergeben eine endlose
       Schleife: animieren von 0 bis -100% der Gruppen-Breite (= -50% des Tracks). */
    display:flex;
    width:max-content;
    animation:marquee 70s linear infinite;
    will-change:transform;
  }
  .promise-group{
    display:flex;
    gap:56px;
    padding-right:56px; /* gap zwischen erster und zweiter Gruppe */
    white-space:nowrap;
    flex-shrink:0;
  }
  .promise-group span{
    font-family:var(--f-display);
    font-size:22px;
    font-weight:500;
    letter-spacing:-.015em;
    display:inline-flex;
    align-items:center;
    gap:56px;
  }
  .promise-group span::after{
    content:"";
    display:inline-block;
    width:6px;height:6px;
    background:var(--ink);
    border-radius:50%;
    flex-shrink:0;
    opacity:.7;
  }
  @keyframes marquee{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }

  /* ==========================================================
     SECTION STRUCTURE
     ========================================================== */
  section{
    padding-top:clamp(80px, 10vw, 140px);
    padding-bottom:clamp(80px, 10vw, 140px);
  }
  .section-head{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:24px;
    align-items:baseline;
    font-family:var(--f-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--n-500);
    padding-bottom:20px;
    border-bottom:1px solid var(--n-200);
    margin-bottom:56px;
  }
  .section-head .n{color:var(--ink);font-weight:500;}
  .section-head .l{color:var(--n-700);}
  .section-head .r{color:var(--n-400);}

  .section-title{
    font-family:var(--f-display);
    font-size:clamp(36px, 5vw, 56px);
    font-weight:500;
    letter-spacing:-.03em;
    line-height:1.02;
    margin-bottom:24px;
    color:var(--ink);
    max-width:800px;
    text-wrap:balance;
  }
  .section-title em{font-style:normal;color:var(--mint-deep);}

  .section-lede{
    font-size:18px;
    line-height:1.5;
    color:var(--n-700);
    max-width:620px;
    margin-bottom:64px;
  }

  /* ==========================================================
     LIVE PREVIEW  (station cards with price pins)
     ========================================================== */
  .live-search{
    margin:32px 0 24px;
  }
  .live-search{position:relative;}
  .live-search__autocomplete{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;
    margin:0;
    padding:6px;
    background:var(--paper);
    border:1px solid var(--n-200);
    border-radius:var(--r-md);
    box-shadow:0 16px 40px rgba(14,28,44,.14);
    list-style:none;
    z-index:30;
    max-height:320px;
    overflow-y:auto;
    display:none;
  }
  .live-search__autocomplete.is-open{display:block;}
  .live-search__autocomplete li{
    padding:10px 14px;
    border-radius:6px;
    cursor:pointer;
    display:flex;
    align-items:baseline;
    gap:10px;
    color:var(--ink);
    font-size:14px;
  }
  .live-search__autocomplete li:hover,
  .live-search__autocomplete li.is-active{background:var(--n-100);}
  .live-search__autocomplete .ac-type{
    font-family:var(--f-mono);
    font-size:10px;
    text-transform:uppercase;
    color:var(--n-500);
    letter-spacing:.1em;
    flex-shrink:0;
    min-width:64px;
  }
  .live-search__autocomplete .ac-label{
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .live-search__autocomplete .ac-info{
    padding:14px;
    color:var(--n-500);
    font-size:13px;
    text-align:center;
    font-family:var(--f-mono);
  }

  .live-search__bar{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:stretch;
    background:var(--paper);
    border:1px solid var(--ink);
    border-radius:var(--r-md);
    box-shadow:0 1px 0 rgba(14,28,44,.04), 0 20px 40px -24px rgba(14,28,44,.18);
    overflow:hidden;
  }
  .live-search__tag{
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 20px;
    background:var(--ink);
    color:var(--paper);
    font-family:var(--f-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.12em;
    white-space:nowrap;
  }
  .live-search__tag-dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--mint);
    box-shadow:0 0 0 3px rgba(20,216,192,.25);
    animation:pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{opacity:1;}
    50%{opacity:.5;}
  }
  .live-search__field{
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 16px 0 20px;
    min-width:0;
  }
  .live-search__glass{
    color:var(--n-500);
    flex-shrink:0;
    transition:color .15s ease;
  }
  .live-search__field:focus-within .live-search__glass{color:var(--ink);}
  .live-search__field input{
    flex:1;
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    font:500 18px/1.2 var(--f-display);
    color:var(--ink);
    letter-spacing:-.015em;
    padding:18px 0;
  }
  .live-search__field input::placeholder{
    color:var(--n-500);
    font-weight:400;
  }
  .live-search__locate{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 12px;
    margin-right:-4px;
    background:var(--n-50);
    border:1px solid var(--n-200);
    border-radius:999px;
    color:var(--n-700);
    font:500 12px/1 var(--f-mono);
    text-transform:uppercase;
    letter-spacing:.08em;
    cursor:pointer;
    transition:all .15s ease;
    white-space:nowrap;
    flex-shrink:0;
  }
  .live-search__locate:hover{
    background:var(--paper);
    border-color:var(--ink);
    color:var(--ink);
  }
  .live-search__submit{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:0 28px;
    background:var(--mint);
    color:var(--ink);
    border:0;
    font:500 14px/1 var(--f-display);
    letter-spacing:-.005em;
    cursor:pointer;
    transition:background .15s ease;
    white-space:nowrap;
  }
  .live-search__submit:hover{background:var(--mint-deep);color:var(--paper);}
  .live-search__submit svg{transition:transform .15s ease;}
  .live-search__submit:hover svg{transform:translateX(2px);}

  .live-search__meta{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
    padding-left:4px;
    flex-wrap:wrap;
    font-family:var(--f-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.1em;
  }
  .live-search__meta > span{
    color:var(--n-500);
    margin-right:2px;
  }
  .live-search__sugg{
    padding:6px 12px;
    background:transparent;
    border:1px solid var(--n-200);
    border-radius:999px;
    font-family:var(--f-mono);
    font-size:11px;
    color:var(--n-700);
    text-transform:none;
    letter-spacing:0;
    cursor:pointer;
    transition:all .15s ease;
  }
  .live-search__sugg:hover{
    border-color:var(--ink);
    background:var(--ink);
    color:var(--paper);
  }

  @media (max-width:820px){
    .live-search__bar{
      grid-template-columns:1fr;
    }
    .live-search__tag{
      padding:10px 20px;
      justify-content:flex-start;
    }
    .live-search__field{
      padding:4px 16px 4px 20px;
      border-top:1px solid var(--n-200);
    }
    .live-search__field input{font-size:16px;padding:14px 0;}
    .live-search__locate span{display:none;}
    .live-search__locate{gap:0;padding:8px;}
    .live-search__submit{
      padding:14px 20px;
      justify-content:center;
      border-top:1px solid rgba(14,28,44,.1);
    }
  }

  .live-controls__toggle{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 14px 8px 16px;
    background:transparent;
    border:1px solid var(--n-200);
    border-radius:999px;
    font-family:var(--f-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--n-700);
    cursor:pointer;
    margin-bottom:24px;
    transition:all .15s ease;
  }
  .live-controls__toggle:hover{
    border-color:var(--ink);
    color:var(--ink);
  }
  .live-controls__toggle svg{
    transition:transform .2s ease;
    flex-shrink:0;
  }
  .live-controls__toggle[aria-expanded="true"]{
    border-color:var(--ink);
    color:var(--ink);
  }
  .live-controls__toggle[aria-expanded="true"] svg{
    transform:rotate(180deg);
  }
  .live-controls__summary{
    color:var(--n-500);
    text-transform:none;
    letter-spacing:0;
    font-size:11px;
    padding-left:8px;
    margin-left:2px;
    border-left:1px solid var(--n-200);
  }
  .live-controls__summary:empty{display:none;}
  .live-controls{
    margin-bottom:24px;
  }
  .live-controls[hidden]{display:none;}

  .live-filters,
  .live-sort{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
  }
  .live-filters{margin-bottom:12px;}
  .live-filters .label,
  .live-sort .label{
    font-family:var(--f-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--n-500);
    margin-right:8px;
  }
  .chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    font-family:var(--f-mono);
    font-size:11px;
    font-weight:500;
    letter-spacing:.02em;
    border-radius:999px;
    background:var(--n-100);
    color:var(--n-700);
    border:1px solid transparent;
    cursor:pointer;
    transition:all 160ms;
  }
  .chip:hover{background:var(--n-200);}
  .chip.is-on{background:var(--ink);color:var(--paper);}
  .chip.is-on:hover{background:var(--n-800);}
  .chip .chip-dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
  .chip .chip-arrow{margin-left:-3px;font-size:11px;line-height:1;opacity:.85;min-width:8px;display:inline-block;text-align:center;}
  .chip .chip-arrow:empty{display:none;}

  .stations{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
  }
  .station-card{
    padding:24px;
    background:var(--paper);
    border:1px solid var(--n-200);
    border-radius:var(--r-md);
    transition:border-color 200ms, transform 200ms, box-shadow 200ms;
    display:flex;
    flex-direction:column;
  }
  .station-card:hover{
    border-color:var(--n-300);
    transform:translateY(-2px);
    box-shadow:var(--s-2);
  }
  .station-card.is-low{border-color:var(--mint);}
  .station-card.is-low:hover{box-shadow:0 12px 32px rgba(20,216,192,.18), 0 2px 8px rgba(14,28,44,.06);}

  .sc-head{
    display:grid;
    grid-template-columns:1fr auto;
    gap:12px;
    align-items:baseline;
    margin-bottom:4px;
  }
  .sc-brand{
    font-family:var(--f-display);
    font-size:17px;
    font-weight:500;
    letter-spacing:-.005em;
    color:var(--ink);
  }
  .sc-dist{
    font-family:var(--f-mono);
    font-size:12px;
    font-variant-numeric:tabular-nums;
    color:var(--n-500);
  }
  .sc-addr{
    font-size:13px;
    color:var(--n-600);
    margin-bottom:20px;
  }
  .sc-prices{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:12px;
    padding:16px 0;
    border-top:1px solid var(--n-200);
    border-bottom:1px solid var(--n-200);
    margin-bottom:16px;
  }
  .sc-fuel{display:flex;flex-direction:column;gap:4px;}
  .sc-fuel .kind{
    font-family:var(--f-mono);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--n-500);
  }
  .sc-fuel .price{
    font-family:var(--f-display);
    font-size:22px;
    font-weight:500;
    letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;
    color:var(--ink);
    line-height:1;
  }
  .sc-fuel .price .unit{font-size:12px;color:var(--n-500);font-weight:400;margin-left:2px;}
  .sc-fuel .price.low{color:var(--mint-deep);}
  .sc-foot{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-family:var(--f-mono);
    font-size:10px;
    color:var(--n-500);
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-top:auto;
  }
  .sc-signal{
    display:inline-flex;align-items:center;gap:6px;
    padding:3px 10px;
    border-radius:999px;
    background:var(--n-100);
    color:var(--n-700);
    font-weight:500;
  }
  .sc-signal .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
  .sc-signal.low{background:var(--mint-soft);color:var(--mint-deep);}
  .sc-signal.avg{background:var(--n-100);color:var(--n-600);}
  .sc-signal.high{background:rgba(228,163,58,.12);color:#B87A1E;}
  .sc-signal.xhigh{background:rgba(224,107,74,.12);color:#C24A2C;}

  /* Station card skeleton + empty state */
  .station-card.is-loading{pointer-events:none;}
  .station-card.is-loading .sc-brand,
  .station-card.is-loading .sc-dist,
  .station-card.is-loading .sc-addr,
  .station-card.is-loading .sc-fuel .kind,
  .station-card.is-loading .sc-fuel .price,
  .station-card.is-loading .sc-signal,
  .station-card.is-loading .sc-foot > span:last-child{
    color:transparent !important;
    background:linear-gradient(90deg,var(--n-100) 0%,var(--n-200) 50%,var(--n-100) 100%);
    background-size:200% 100%;
    animation:hero-skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius:4px;
    display:block;
    overflow:hidden;
    text-indent:-9999px;
    white-space:nowrap;
    user-select:none;
  }
  .station-card.is-loading .sc-brand{width:160px;height:18px;}
  .station-card.is-loading .sc-dist{width:50px;height:11px;border-radius:3px;}
  .station-card.is-loading .sc-addr{width:220px;height:12px;border-radius:3px;}
  .station-card.is-loading .sc-fuel .kind{width:28px;height:10px;border-radius:3px;}
  .station-card.is-loading .sc-fuel .price{width:64px;height:20px;}
  .station-card.is-loading .sc-signal{width:110px;height:18px;border-radius:999px;}
  .station-card.is-loading .sc-foot > span:last-child{width:40px;height:11px;border-radius:3px;}
  .stations-empty{
    grid-column:1 / -1;
    padding:40px 24px;
    text-align:center;
    color:var(--n-500);
    border:1px dashed var(--n-200);
    border-radius:var(--r-md);
    font-size:14px;
  }

  .live-footnote{
    margin-top:32px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-family:var(--f-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--n-500);
    flex-wrap:wrap;
    gap:16px;
  }
  .live-footnote a{color:var(--ink);border-bottom:1px dotted var(--n-400);padding-bottom:1px;}
  .live-footnote a:hover{border-bottom-color:var(--mint);color:var(--mint-deep);}

  /* ==========================================================
     PRINCIPLES
     ========================================================== */
  .bg-soft{background:var(--n-50);}

  .principles-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
  }
  .principle{
    background:var(--paper);
    border:1px solid var(--n-200);
    border-radius:var(--r-md);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:border-color 200ms, transform 200ms, box-shadow 200ms;
  }
  .principle:hover{
    border-color:var(--n-300);
    transform:translateY(-2px);
    box-shadow:var(--s-2);
  }
  .principle .p-visual{
    aspect-ratio:240/140;
    background:var(--n-50);
    border-bottom:1px solid var(--n-200);
    overflow:hidden;
  }
  .principle .p-visual svg{
    display:block;
    width:100%;
    height:100%;
  }
  .principle .p-body{
    padding:22px 22px 24px;
    display:flex;
    flex-direction:column;
    gap:8px;
    flex:1;
  }
  .principle .p-num{
    font-family:var(--f-mono);
    font-size:10px;
    color:var(--mint-deep);
    font-weight:500;
    letter-spacing:.12em;
    text-transform:uppercase;
  }
  .principle h4{
    font-family:var(--f-display);
    font-size:18px;
    font-weight:500;
    letter-spacing:-.01em;
    color:var(--ink);
    text-wrap:balance;
    line-height:1.2;
    margin:0;
  }
  .principle p{
    font-size:13px;
    line-height:1.55;
    color:var(--n-600);
    text-wrap:pretty;
    margin:4px 0 0;
  }

  /* ==========================================================
     TRANSPARENZ  (MTS-K + sparkline)
     ========================================================== */
  .transparenz{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
    align-items:center;
  }
  .trans-copy h3{
    font-family:var(--f-display);
    font-size:22px;
    font-weight:500;
    letter-spacing:-.01em;
    margin:0 0 16px;
    color:var(--ink);
  }
  .trans-copy h3::before{
    content:"";
    display:inline-block;
    width:16px;height:1px;
    background:var(--mint);
    vertical-align:middle;
    margin-right:12px;
    transform:translateY(-3px);
  }
  .trans-copy p{
    font-size:15px;
    line-height:1.55;
    color:var(--n-700);
    margin-bottom:16px;
    max-width:480px;
  }
  .trans-copy .source-link{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    margin-top:8px;
    background:var(--paper);
    border:1px solid var(--n-200);
    border-radius:var(--r-sm);
    font-family:var(--f-mono);
    font-size:12px;
    color:var(--ink);
    transition:all 160ms;
  }
  .trans-copy .source-link:hover{border-color:var(--ink);}
  .trans-copy .source-link .arrow{color:var(--mint-deep);}

  .chart{
    background:var(--paper);
    border:1px solid var(--n-200);
    border-radius:var(--r-md);
    padding:28px;
    box-shadow:var(--s-1);
  }
  .chart-head{
    display:grid;
    grid-template-columns:1fr auto;
    gap:16px;
    align-items:baseline;
    padding-bottom:16px;
    border-bottom:1px solid var(--n-200);
    margin-bottom:20px;
  }
  .chart-head .title{
    font-family:var(--f-display);
    font-size:15px;
    font-weight:500;
    color:var(--ink);
  }
  .chart-head .meta{
    font-family:var(--f-mono);
    font-size:11px;
    color:var(--n-500);
    text-transform:uppercase;
    letter-spacing:.08em;
  }
  .chart-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-bottom:20px;
  }
  .chart-stat .k{
    font-family:var(--f-mono);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--n-500);
    margin-bottom:4px;
  }
  .chart-stat .v{
    font-family:var(--f-display);
    font-size:22px;
    font-weight:500;
    letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;
    color:var(--ink);
  }
  .chart-stat .v.low{color:var(--mint-deep);}
  .chart-stat .v .unit{font-size:12px;color:var(--n-500);font-weight:400;margin-left:2px;}
  .chart-svg{width:100%;height:160px;display:block;}
  .chart-legend{
    display:flex;
    justify-content:space-between;
    margin-top:8px;
    font-family:var(--f-mono);
    font-size:10px;
    color:var(--n-500);
    text-transform:uppercase;
    letter-spacing:.08em;
  }

  /* ==========================================================
     STATS BAND
     ========================================================== */
  .stats{
    background:var(--ink);
    color:var(--paper);
    position:relative;
    overflow:hidden;
  }
  .stats::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(700px 400px at 90% 50%, rgba(20,216,192,.1), transparent 60%);
    pointer-events:none;
  }
  .stats-inner{
    position:relative;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:48px;
    padding-top:80px;
    padding-bottom:80px;
  }
  .stat{
    padding:0 8px;
  }
  .stat .n{
    font-family:var(--f-display);
    font-size:clamp(48px, 6vw, 80px);
    font-weight:500;
    letter-spacing:-.035em;
    line-height:1;
    color:var(--paper);
    font-variant-numeric:tabular-nums;
    margin-bottom:12px;
  }
  .stat .n em{font-style:normal;color:var(--mint);}
  .stat .l{
    font-family:var(--f-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--n-400);
    margin-bottom:10px;
  }
  .stat .d{
    font-size:14px;
    line-height:1.55;
    color:var(--n-300);
    max-width:260px;
  }

  /* ==========================================================
     FAQ
     ========================================================== */
  .faq-grid{
    display:grid;
    grid-template-columns:1fr 1.4fr;
    gap:72px;
    align-items:start;
  }
  .faq-aside h3{
    font-family:var(--f-display);
    font-size:28px;
    font-weight:500;
    letter-spacing:-.02em;
    line-height:1.1;
    color:var(--ink);
    margin-bottom:16px;
  }
  .faq-aside p{
    font-size:14px;
    color:var(--n-700);
    line-height:1.55;
    margin-bottom:24px;
  }
  .faq-aside .contact{
    font-family:var(--f-mono);
    font-size:12px;
    color:var(--n-600);
    line-height:1.8;
  }
  .faq-aside .contact b{color:var(--ink);font-weight:500;}

  .faq-list{
    border-top:1px solid var(--n-200);
  }
  details.faq{
    border-bottom:1px solid var(--n-200);
  }
  details.faq summary{
    list-style:none;
    cursor:pointer;
    padding:24px 0;
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:20px;
    align-items:center;
    transition:color 160ms;
  }
  details.faq summary::-webkit-details-marker{display:none;}
  details.faq summary:hover .q{color:var(--mint-deep);}
  details.faq summary .num{
    font-family:var(--f-mono);
    font-size:11px;
    color:var(--n-400);
    font-weight:500;
  }
  details.faq summary .q{
    font-family:var(--f-display);
    font-size:18px;
    font-weight:500;
    letter-spacing:-.01em;
    color:var(--ink);
    transition:color 160ms;
    text-wrap:balance;
  }
  details.faq summary .plus{
    width:22px;height:22px;
    position:relative;
    color:var(--n-600);
    transition:transform 260ms ease;
  }
  details.faq summary .plus::before,
  details.faq summary .plus::after{
    content:"";
    position:absolute;
    top:50%;left:50%;
    background:currentColor;
  }
  details.faq summary .plus::before{
    width:12px;height:1.5px;
    transform:translate(-50%,-50%);
  }
  details.faq summary .plus::after{
    width:1.5px;height:12px;
    transform:translate(-50%,-50%);
    transition:transform 260ms ease;
  }
  details.faq[open] summary .plus::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
  details.faq[open] summary .plus{color:var(--mint-deep);}
  details.faq[open] summary .q{color:var(--ink);}
  details.faq .ans{
    padding:0 0 28px 54px;
    max-width:640px;
    color:var(--n-700);
    font-size:15px;
    line-height:1.6;
  }
  details.faq .ans p + p{margin-top:12px;}

  /* ==========================================================
     DOWNLOAD CTA
     ========================================================== */
  .download{
    position:relative;
    background:var(--n-50);
    overflow:hidden;
  }
  .download-inner{
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:64px;
    align-items:center;
  }
  .download h2{
    font-family:var(--f-display);
    font-size:clamp(36px, 5vw, 56px);
    font-weight:500;
    letter-spacing:-.03em;
    line-height:1.02;
    margin-bottom:24px;
    color:var(--ink);
    text-wrap:balance;
  }
  .download h2 em{font-style:normal;color:var(--mint-deep);}
  .download p{
    font-size:17px;
    line-height:1.5;
    color:var(--n-700);
    max-width:480px;
    margin-bottom:32px;
  }
  .store-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px;}
  .store-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:12px 20px 12px 16px;
    background:var(--ink);
    color:var(--paper);
    border-radius:var(--r-sm);
    transition:all 160ms;
  }
  .store-btn:hover{background:var(--n-800);transform:translateY(-1px);}
  .store-btn .icon{width:22px;height:22px;}
  .store-btn .lbl{display:flex;flex-direction:column;line-height:1.2;}
  .store-btn .lbl .s{
    font-family:var(--f-mono);
    font-size:9px;
    letter-spacing:.1em;
    text-transform:uppercase;
    opacity:.7;
  }
  .store-btn .lbl .b{
    font-family:var(--f-display);
    font-size:15px;
    font-weight:500;
    letter-spacing:-.005em;
  }
  .download .fine{
    font-family:var(--f-mono);
    font-size:11px;
    color:var(--n-500);
    text-transform:uppercase;
    letter-spacing:.08em;
  }
  .download-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 12px 6px 10px;
    border-radius:999px;
    background:rgba(20,216,192,.12);
    border:1px solid rgba(20,216,192,.3);
    color:var(--mint-deep);
    font-family:var(--f-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.1em;
    margin-bottom:24px;
  }
  .download-eyebrow .dot{
    width:6px;height:6px;border-radius:50%;background:var(--mint);
  }

  /* Platform support row — iPhone · Apple Watch · CarPlay */
  .dl-platforms{
    display:flex;
    flex-wrap:wrap;
    gap:28px 36px;
    margin-top:32px;
    padding-top:28px;
    margin-bottom:20px;
    border-top:1px solid var(--n-200);
  }
  .dl-platform{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .dl-platform svg{
    width:28px;
    height:28px;
    color:var(--ink);
    flex-shrink:0;
  }
  .dl-platform__name{
    font-family:var(--f-display);
    font-weight:500;
    font-size:15px;
    color:var(--ink);
    line-height:1.2;
  }
  .dl-platform__meta{
    font-family:var(--f-mono);
    font-size:10px;
    color:var(--n-500);
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-top:3px;
  }

  /* Download features grid */
  .download-features{
    margin-top:96px;
    padding-top:72px;
    border-top:1px solid var(--n-200);
  }
  .dl-feat-head{
    text-align:center;
    margin-bottom:56px;
  }
  .dl-feat-head .eyebrow{
    display:inline-block;
    font-family:var(--f-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--n-500);
    margin-bottom:16px;
  }
  .dl-feat-head h3{
    font-family:var(--f-display);
    font-weight:500;
    font-size:clamp(28px, 4vw, 44px);
    letter-spacing:-.025em;
    line-height:1.05;
    color:var(--ink);
    margin:0 auto 20px;
    text-wrap:balance;
  }
  .dl-feat-head h3 em{font-style:normal;color:var(--mint-deep);}
  .dl-feat-head p{
    max-width:560px;
    margin:0 auto;
    font-size:16px;
    line-height:1.5;
    color:var(--n-700);
  }

  .dl-feat-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
  }
  .dl-feat{
    background:var(--paper);
    border:1px solid var(--n-200);
    border-radius:var(--r-md);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:border-color 200ms, transform 200ms, box-shadow 200ms;
  }
  .dl-feat:hover{
    border-color:var(--n-300);
    transform:translateY(-2px);
    box-shadow:var(--s-2);
  }
  .dl-feat__visual{
    aspect-ratio:240 / 140;
    background:var(--n-50);
    border-bottom:1px solid var(--n-200);
    overflow:hidden;
  }
  .dl-feat__visual svg{display:block;width:100%;height:100%;}
  .dl-feat__visual--carplay{background:#0E1C2C;}
  .dl-feat__eyebrow{
    font-family:var(--f-mono);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--mint-deep);
    padding:24px 24px 0;
  }
  .dl-feat h4{
    font-family:var(--f-display);
    font-size:20px;
    font-weight:500;
    letter-spacing:-.015em;
    color:var(--ink);
    line-height:1.2;
    margin:8px 24px 12px;
  }
  .dl-feat p{
    font-size:14px;
    line-height:1.55;
    color:var(--n-600);
    margin:0 24px 24px;
    max-width:none;
  }

  .dl-final-cta{
    margin-top:64px;
    padding:32px 40px;
    background:var(--ink);
    color:var(--paper);
    border-radius:var(--r-md);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
  }
  .dl-final-cta p{
    margin:0;
    font-family:var(--f-display);
    font-size:18px;
    font-weight:500;
    color:var(--paper);
    max-width:none;
  }
  .dl-final-cta .store-btn{
    background:var(--paper);
    color:var(--ink);
  }
  .dl-final-cta .store-btn:hover{background:var(--n-100);}

  @media (max-width: 980px){
    .dl-feat-grid{grid-template-columns:repeat(2, 1fr);}
  }
  @media (max-width: 640px){
    .dl-feat-grid{grid-template-columns:1fr;}
    .download-features{margin-top:64px;padding-top:48px;}
    .dl-final-cta{flex-direction:column;text-align:center;}
  }

  /* Phone mock (from CD) */
  .phone{
    background:var(--n-900);
    border-radius:40px;
    padding:18px 14px;
    box-shadow:var(--s-3);
    aspect-ratio:9/19;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    position:relative;
    max-width:320px;
    margin:0 auto;
  }
  .phone::before{
    content:"";
    position:absolute;
    top:10px;left:50%;transform:translateX(-50%);
    width:96px;height:24px;
    background:var(--ink);
    border-radius:999px;
    z-index:2;
  }
  .phone-screen{
    flex:1;
    background:var(--n-50);
    border-radius:26px;
    padding:60px 18px 18px;
    display:flex;
    flex-direction:column;
    gap:12px;
    overflow:hidden;
  }
  .phone-topline{
    display:flex;
    justify-content:space-between;
    font-family:var(--f-mono);
    font-size:9px;
    color:var(--n-500);
    text-transform:uppercase;
    letter-spacing:.08em;
  }
  .phone-screen--image{
    padding:0;
    position:relative;
  }
  .phone-screen--image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    display:block;
    border-radius:inherit;
  }
  /* Fullscreen app screenshot variant — image fills phone edge-to-edge (under notch) */
  .phone--fullscreen{padding:0;}
  .phone--fullscreen .phone-screen{
    border-radius:inherit;
    padding:0;
    background:var(--ink);
  }
  .phone--fullscreen .phone-screen--image img{
    border-radius:inherit;
    object-position:center center;
  }

  /* ==========================================================
     APP STAGE — Karte + fliegende Preis-Pins um das Phone
     ========================================================== */
  .app-stage{
    position:relative;
    width:100%;
    aspect-ratio:1 / 1.3;
    display:flex;
    align-items:center;
    justify-content:center;
    isolation:isolate;
    box-sizing:border-box;
  }
  .app-stage__map{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
    border-radius:var(--r-md);
    overflow:hidden;
    opacity:.92;
    pointer-events:none;
  }
  .app-stage .phone{
    position:relative;
    z-index:2;
    max-width:56%;
    width:56%;
    height:auto;
    box-shadow:0 32px 80px -24px rgba(14,28,44,.32), 0 4px 12px rgba(14,28,44,.08);
  }
  .app-stage__pins{
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
  }
  .float-pin{
    position:absolute;
    display:inline-flex;
    align-items:baseline;
    padding:8px 14px;
    background:var(--paper);
    color:var(--ink);
    border:1px solid rgba(14,28,44,.08);
    border-radius:999px;
    font-family:var(--f-display);
    font-size:14px;
    font-weight:500;
    font-variant-numeric:tabular-nums;
    letter-spacing:-.01em;
    box-shadow:0 8px 22px -8px rgba(14,28,44,.18), 0 2px 6px rgba(14,28,44,.06);
    white-space:nowrap;
    will-change:transform;
    animation:float-pin 7s ease-in-out infinite;
  }
  .float-pin sup{
    font-size:.65em;
    margin-left:0;
    color:var(--n-500);
    font-weight:400;
    line-height:1;
  }
  .float-pin--low{
    color:var(--mint-deep);
    background:#F0FCF8;
    border-color:rgba(20,216,192,.32);
    box-shadow:0 8px 22px -8px rgba(20,216,192,.4), 0 2px 6px rgba(14,28,44,.06);
  }
  .float-pin--low sup{color:var(--mint-deep);opacity:.6;}

  /* Pin-Positionen (links/rechts/oben/unten verteilt um das Phone) */
  .pin-a{ top:6%;  left:0%;  animation-delay:0s; }
  .pin-b{ top:12%; right:0%; animation-delay:-1.4s; }
  .pin-c{ top:36%; left:-3%; animation-delay:-2.8s; }
  .pin-d{ top:46%; right:-4%; animation-delay:-3.6s; }
  .pin-e{ bottom:30%; left:-1%; animation-delay:-1s; }
  .pin-f{ bottom:14%; right:1%; animation-delay:-4s; }
  .pin-g{ bottom:4%; left:36%; animation-delay:-5.2s; }

  @keyframes float-pin{
    0%,100%{ transform:translateY(0); }
    50%   { transform:translateY(-10px); }
  }
  @media (prefers-reduced-motion: reduce){
    .float-pin{animation:none;}
  }
  @media (max-width: 880px){
    .app-stage{aspect-ratio:1/1.25;}
    .app-stage .phone{max-width:55%; width:55%;}
    .float-pin{font-size:12px; padding:6px 10px;}
  }
  .phone-head{
    font-family:var(--f-display);
    font-size:26px;
    font-weight:700;
    letter-spacing:-.025em;
    color:var(--ink);
    line-height:1;
  }
  .phone-head span{color:var(--mint-deep);}
  .phone-sub{
    font-size:11px;
    color:var(--n-600);
    margin-top:2px;
  }
  .phone-filters{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px;}
  .mini-chip{
    font-family:var(--f-mono);
    font-size:9px;
    font-weight:500;
    padding:4px 9px;
    border-radius:999px;
    background:var(--paper);
    border:1px solid var(--n-200);
    color:var(--n-600);
  }
  .mini-chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink);}
  .phone-list{display:flex;flex-direction:column;gap:6px;margin-top:2px;flex:1;}
  .phone-station{
    background:var(--paper);
    border-radius:10px;
    padding:10px 12px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    align-items:center;
  }
  .phone-station.low{border:1px solid var(--mint);}
  .phone-station .name{
    font-family:var(--f-display);
    font-size:11px;
    font-weight:500;
    color:var(--ink);
  }
  .phone-station .dist{
    font-family:var(--f-mono);
    font-size:9px;
    color:var(--n-500);
  }
  .phone-station .pricebox{
    font-family:var(--f-display);
    font-size:15px;
    font-weight:500;
    letter-spacing:-.015em;
    font-variant-numeric:tabular-nums;
    color:var(--ink);
    text-align:right;
    line-height:1;
  }
  .phone-station .pricebox.low{color:var(--mint-deep);}
  .phone-station .pricebox .unit{
    font-size:8px;
    color:var(--n-500);
    font-weight:400;
    display:block;
    margin-top:2px;
    letter-spacing:.02em;
  }

  /* ==========================================================
     FOOTER
     ========================================================== */
  footer.site{
    background:var(--ink);
    color:var(--n-400);
    padding:80px 0 32px;
  }
  .foot-grid{
    display:grid;
    grid-template-columns:1.4fr repeat(3, 1fr);
    gap:48px;
    padding-bottom:48px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .foot-brand .brand{color:var(--paper);font-size:24px;gap:12px;}
  .foot-brand .brand .mark{width:52px;height:52px;border-radius:6px;}
  .foot-brand p{
    font-size:14px;
    line-height:1.55;
    color:var(--n-400);
    margin-top:16px;
    max-width:320px;
  }
  .foot-col h2{
    font-family:var(--f-mono);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--paper);
    font-weight:500;
    margin-bottom:18px;
  }
  .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
  .foot-col a{
    font-size:14px;
    color:var(--n-400);
    transition:color 160ms;
  }
  .foot-col a:hover{color:var(--mint);}
  .foot-col .addr{
    font-family:var(--f-mono);
    font-size:12px;
    line-height:1.8;
    color:var(--n-400);
  }
  .foot-col .addr b{color:var(--paper);font-weight:500;}

  .foot-bottom{
    padding-top:32px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:24px;
    align-items:center;
    font-family:var(--f-mono);
    font-size:11px;
    color:var(--n-500);
    text-transform:uppercase;
    letter-spacing:.08em;
  }
  .foot-bottom .right{text-align:right;}
  .foot-bottom .center{color:var(--mint);}

  /* ==========================================================
     RESPONSIVE
     ========================================================== */
  @media (max-width: 1040px){
    .hero-inner{grid-template-columns:1fr;gap:56px;padding-top:64px;padding-bottom:80px;}
    .hero-visual{max-width:440px;margin:0 auto;justify-self:center;}
    .stations{grid-template-columns:repeat(2,1fr);}
    .transparenz{grid-template-columns:1fr;gap:48px;}
    .principles-grid{grid-template-columns:repeat(2,1fr);}
    .faq-grid{grid-template-columns:1fr;gap:40px;}
    .download-inner{grid-template-columns:1fr;gap:48px;}
    .foot-grid{grid-template-columns:1fr 1fr;gap:32px;}
  }
  @media (max-width: 680px){
    .nav-links{display:none;}
    .nav-status{display:none;}
    .stations{grid-template-columns:1fr;}
    .stats-inner{grid-template-columns:1fr;gap:48px;padding-top:64px;padding-bottom:64px;}
    .principles-grid{grid-template-columns:1fr;}
    .hero-ticker{position:relative;left:auto;bottom:auto;margin:-80px auto 0;}
    .hero-pin{display:none;}
    .foot-grid{grid-template-columns:1fr;}
    .foot-bottom{grid-template-columns:1fr;text-align:center;}
    .foot-bottom .right{text-align:center;}
    .section-head .r{display:none;}
    details.faq summary .num{display:none;}
    details.faq .ans{padding-left:0;}
    .promise-group span{font-size:18px;gap:40px;}
    .promise-group{gap:40px;padding-right:40px;}
  }

  /* ============================================================
     Testimonials section
     ============================================================ */
  .testimonials{
    padding:clamp(72px, 9vw, 120px) 0;
    background:var(--n-50);
    border-top:1px solid var(--n-200);
    border-bottom:1px solid var(--n-200);
  }
  .testimonials__title{
    font-family:var(--f-display);
    font-size:clamp(34px, 4.5vw, 56px);
    font-weight:500;
    letter-spacing:-.03em;
    line-height:1.05;
    color:var(--ink);
    margin:24px 0 18px;
    max-width:720px;
    text-wrap:balance;
  }
  .testimonials__title em{font-style:normal;color:var(--mint-deep);}
  .testimonials__lede{
    font-size:17px;
    line-height:1.55;
    color:var(--n-700);
    max-width:580px;
    margin-bottom:48px;
  }

  .testimonial-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    gap:20px;
  }
  .testimonial{
    position:relative;
    background:var(--paper);
    border:1px solid var(--n-200);
    border-radius:var(--r-md);
    padding:28px 28px 24px;
    display:flex;
    flex-direction:column;
    gap:18px;
    transition:transform 220ms cubic-bezier(.4,1.4,.6,1), border-color 200ms, box-shadow 200ms;
  }
  .testimonial:hover{
    border-color:var(--mint);
    transform:translateY(-3px);
    box-shadow:0 12px 28px -16px rgba(20,216,192,.35);
  }
  .testimonial__mark{
    width:28px;
    height:21px;
    color:var(--mint-deep);
    opacity:.55;
    flex-shrink:0;
  }
  .testimonial__quote{
    font-family:var(--f-display);
    font-size:16.5px;
    line-height:1.55;
    color:var(--ink);
    margin:0;
    flex:1;
    text-wrap:pretty;
    font-weight:400;
  }
  .testimonial__author{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding-top:18px;
    border-top:1px solid var(--n-200);
    font-size:13px;
    line-height:1.35;
  }
  .testimonial__author b{
    font-family:var(--f-display);
    font-weight:500;
    color:var(--ink);
    font-size:14.5px;
  }
  .testimonial__author span{
    font-family:var(--f-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--n-500);
  }

  /* Subtle accent variant — first card per row gets a mint left edge */
  .testimonial:nth-child(3n+1){
    border-left:3px solid var(--mint);
    padding-left:25px;
  }

  @media (max-width:640px){
    .testimonial-grid{grid-template-columns:1fr;gap:14px;}
    .testimonial{padding:24px 22px 20px;}
    .testimonial:nth-child(3n+1){padding-left:19px;}
    .testimonial__quote{font-size:15.5px;}
  }
  @media (prefers-reduced-motion:reduce){
    .testimonial:hover{transform:none;}
  }

  /* Reveal */
  .reveal{opacity:0;transform:translateY(16px);transition:opacity 700ms ease-out, transform 700ms ease-out;}
  .reveal.is-in{opacity:1;transform:none;}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1;transform:none;transition:none;}
    .promise-track{animation:none;}
    .hero-pump svg{animation:none;}
  }

  /* Cities strip — internal link section on homepage */
  .cities-strip{
    padding:clamp(72px, 9vw, 120px) 0 clamp(72px, 9vw, 120px);
    background:var(--paper);
    border-top:1px solid var(--n-200);
  }
  .cities-strip__title{
    font-family:var(--f-display);
    font-size:clamp(34px, 4.5vw, 56px);
    font-weight:500;
    letter-spacing:-.03em;
    line-height:1.05;
    color:var(--ink);
    margin:24px 0 18px;
    max-width:760px;
    text-wrap:balance;
  }
  .cities-strip__title em{font-style:normal;color:var(--mint-deep);}
  .cities-strip__lede{
    font-size:17px;line-height:1.55;color:var(--n-700);
    max-width:580px;margin-bottom:36px;
  }
  /* Cities-Strip: Karte + verstreute Wolke */
  .cities-strip__count{
    font-variant-numeric:tabular-nums;
    font-weight:600;
    color:var(--ink);
  }

  /* Toggle + Suche */
  .cities-view-tools{
    display:flex;
    gap:14px;
    align-items:center;
    flex-wrap:wrap;
    margin:28px 0 20px;
  }
  .cities-view-toggle{
    display:inline-flex;
    background:var(--n-100);
    border:1px solid var(--n-200);
    border-radius:999px;
    padding:3px;
    gap:2px;
  }
  .cities-view-toggle button{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 16px;
    border:0;
    background:transparent;
    color:var(--n-600);
    font-family:var(--f-display);
    font-weight:500;
    font-size:13.5px;
    border-radius:999px;
    cursor:pointer;
    transition:all 180ms;
    white-space:nowrap;
  }
  .cities-view-toggle button:hover{color:var(--ink);}
  .cities-view-toggle button.is-active{
    background:var(--ink);
    color:var(--paper);
    box-shadow:0 2px 8px -2px rgba(12,24,34,.3);
  }
  .cities-view-toggle button svg{flex-shrink:0;}

  .cities-cloud-tools{
    display:flex;
    gap:12px;
    align-items:center;
    flex-wrap:wrap;
    margin:28px 0 20px;
  }
  .cities-cloud-search-wrap{
    flex:1;
    min-width:240px;
    max-width:380px;
    position:relative;
    display:flex;
    align-items:center;
    background:var(--paper);
    border:1px solid var(--n-300);
    border-radius:999px;
    padding:0 18px;
    transition:border-color 160ms, box-shadow 160ms;
  }
  .cities-cloud-search-wrap:focus-within{
    border-color:var(--mint-deep);
    box-shadow:0 0 0 4px var(--mint-soft);
  }
  .cities-cloud-search-wrap svg{
    color:var(--n-500);
    flex-shrink:0;
    margin-right:10px;
  }
  .cities-cloud-search-wrap input{
    flex:1;
    border:0;
    background:transparent;
    padding:12px 0;
    font-family:var(--f-display);
    font-size:14.5px;
    color:var(--ink);
    outline:none;
    width:100%;
  }
  .cities-cloud-search-wrap input::placeholder{color:var(--n-500);}
  .cities-cloud-search-wrap input::-webkit-search-cancel-button{
    -webkit-appearance:none;
    appearance:none;
    width:14px;height:14px;
    background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-width="2.5" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>') center/contain no-repeat;
    cursor:pointer;
  }
  .cities-cloud-shuffle{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:11px 18px;
    border:1px solid var(--n-300);
    border-radius:999px;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--f-display);
    font-weight:500;
    font-size:14px;
    cursor:pointer;
    transition:all 160ms;
    white-space:nowrap;
  }
  .cities-cloud-shuffle:hover{
    border-color:var(--mint-deep);
    color:var(--mint-deep);
    background:var(--mint-soft);
  }
  .cities-cloud-shuffle:active{transform:scale(.98);}
  .cities-cloud-shuffle svg{transition:transform 400ms cubic-bezier(.4,1.4,.6,1);}
  .cities-cloud-shuffle.is-spinning svg{transform:rotate(360deg);}

  /* Die Wolke selbst */
  /* (View-Stack/Karten/Toggle wurden entfernt — nur die Wolke bleibt) */

  /* === KARTEN-ANSICHT === */
  .cities-map{
    position:relative;
    height:clamp(420px, 60vh, 620px);
    background:#0c1822;
    border:1px solid var(--n-200);
    border-radius:var(--r-lg);
    overflow:hidden;
    z-index:0;
  }
  .cities-map__loading{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    color:rgba(255,255,255,.5);
    font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;
    text-transform:uppercase;
    pointer-events:none;
  }
  .cities-map.is-ready .cities-map__loading{display:none;}
  .cities-map .leaflet-tile-pane{
    filter:hue-rotate(-8deg) saturate(1.35) brightness(.95);
  }
  .cities-map .leaflet-control-attribution{
    background:rgba(0,0,0,.4);
    color:rgba(255,255,255,.5);
    font-size:10px;
  }
  .cities-map .leaflet-control-attribution a{color:rgba(255,255,255,.7);}
  .cities-map .leaflet-control-zoom a{
    background:rgba(12,24,34,.88) !important;
    color:var(--paper) !important;
    border:1px solid rgba(255,255,255,.12) !important;
  }
  .cities-map .leaflet-control-zoom a:hover{
    background:rgba(20,216,192,.18) !important;
    color:var(--mint) !important;
  }

  /* Stadt-Marker auf der Karte */
  .city-dot-wrap{background:transparent !important;border:0 !important;}
  .city-dot{
    position:relative;
    border-radius:999px;
    background:var(--mint);
    border:2px solid rgba(12,24,34,.6);
    cursor:pointer;
    transition:transform 200ms cubic-bezier(.4,1.4,.6,1), box-shadow 200ms;
    box-shadow:0 0 0 0 rgba(20,216,192,0);
    will-change:transform, box-shadow;
  }
  .city-dot:hover{
    transform:scale(1.6);
    box-shadow:0 0 0 6px rgba(20,216,192,.18), 0 4px 14px -2px rgba(20,216,192,.6);
    z-index:1000;
  }
  .city-dot--xl{width:14px;height:14px;background:var(--mint);box-shadow:0 0 0 0 rgba(20,216,192,0), 0 0 14px 2px rgba(20,216,192,.35);}
  .city-dot--lg{width:11px;height:11px;background:var(--mint);}
  .city-dot--md{width:8px;height:8px;background:rgba(20,216,192,.85);}
  .city-dot--sm{width:6px;height:6px;background:rgba(20,216,192,.7);border-width:1.5px;}
  .city-dot--xs{width:4px;height:4px;background:rgba(20,216,192,.55);border-width:1px;}

  /* Pulsieren für die größten Städte */
  .city-dot--xl::after{
    content:"";position:absolute;inset:-4px;
    border-radius:999px;border:2px solid var(--mint);
    opacity:0;
    animation:cityPulse 2.4s cubic-bezier(.4,.8,.4,1) infinite;
  }
  @keyframes cityPulse{
    0%{transform:scale(.9);opacity:.6;}
    100%{transform:scale(1.8);opacity:0;}
  }

  /* Custom-Tooltip beim Hover */
  .city-tooltip{
    background:rgba(12,24,34,.95) !important;
    color:var(--paper) !important;
    border:1px solid rgba(20,216,192,.3) !important;
    border-radius:8px !important;
    padding:6px 12px !important;
    font-family:var(--f-display) !important;
    font-weight:500 !important;
    font-size:13px !important;
    box-shadow:0 4px 16px -4px rgba(0,0,0,.5);
  }
  .city-tooltip::before{display:none !important;}
  .city-tooltip .tt-name{display:block;}
  .city-tooltip .tt-meta{
    display:block;
    font-family:var(--f-mono);
    font-size:10px;
    color:rgba(255,255,255,.55);
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-top:2px;
  }

  /* Highlight beim Search-Match */
  .city-dot.is-match{
    transform:scale(1.8);
    box-shadow:0 0 0 8px rgba(20,216,192,.25), 0 4px 14px -2px rgba(20,216,192,.7);
    z-index:1001;
  }
  .city-dot.is-dimmed{opacity:.2;}

  /* Karten-Legende */
  .cities-map__legend{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:18px 24px;
    margin-top:18px;
    font-family:var(--f-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--n-500);
  }
  .cities-map__legend span{display:inline-flex;align-items:center;gap:8px;}
  .cities-map__legend .dot{
    display:inline-block;
    border-radius:999px;
    background:var(--mint);
  }
  .cities-map__legend .dot--xl{width:12px;height:12px;}
  .cities-map__legend .dot--lg{width:10px;height:10px;background:var(--mint);}
  .cities-map__legend .dot--md{width:7px;height:7px;background:rgba(20,216,192,.85);}
  .cities-map__legend .dot--sm{width:5px;height:5px;background:rgba(20,216,192,.7);}

  /* === WOLKE — voll breit, ohne Box, frei verstreut === */
  .cities-cloud--free{
    display:flex;
    flex-wrap:wrap;
    gap:14px 22px;
    justify-content:center;
    align-items:center;
    line-height:1.3;
    padding:64px clamp(20px, 4vw, 80px);
    margin:32px 0 16px;
    min-height:560px;
    text-align:center;
    width:100%;
    max-width:none;
    position:relative;
    /* keine Box, kein Background, keine Border — bewusst frei */
  }

  .cloud-city{
    position:relative;
    display:inline-flex;
    align-items:center;
    padding:6px 14px;
    border-radius:999px;
    background:transparent;
    color:var(--n-700);
    border:1px solid var(--n-200);
    font-family:var(--f-display);
    font-weight:500;
    font-size:14px;
    line-height:1.3;
    transition:transform 220ms cubic-bezier(.4,1.4,.6,1), background 200ms, color 200ms, border-color 200ms, box-shadow 220ms;
    will-change:transform;
    /* Basis-Transform: zufällige Rotation + Offset, plus magnetische Verschiebung durch JS */
    transform:
      translate(var(--mx, 0px), var(--my, 0px))
      rotate(var(--rot, 0deg))
      translate(var(--tx, 0px), var(--ty, 0px));
  }
  /* Hit-Area-Erweiterung: ein unsichtbares Pseudo-Element ragt um den Button heraus,
     damit knapp-am-Rand-Hover nicht zum Flicker führt. Erweitert die hover-Region um 6px. */
  .cloud-city::before{
    content:"";
    position:absolute;
    inset:-6px -8px;
    border-radius:999px;
    z-index:-1;
  }
  /* Magnetic Effekt: schnelleres Transition wenn JS gerade --mx/--my setzt */
  .cities-cloud--free.is-magnetic .cloud-city{
    transition:transform 140ms cubic-bezier(.3, 1, .3, 1), background 200ms, color 200ms, border-color 200ms, box-shadow 220ms;
  }
  .cloud-city:hover{
    background:var(--mint);
    color:var(--ink);
    border-color:var(--mint-deep);
    /* WICHTIG: Magnetic-Offset (--mx/--my) bleibt erhalten, Tag springt nicht auf Home-Pos.
       Nur Rotation wird neutralisiert, Scale + Lift kommen oben drauf. */
    transform:
      translate(var(--mx, 0px), var(--my, 0px))
      rotate(0deg)
      translate(var(--tx, 0px), var(--ty, 0px))
      scale(1.1)
      translateY(-3px);
    z-index:5;
    box-shadow:0 10px 24px -10px rgba(20,216,192,.6);
  }
  .cloud-city:focus-visible{
    outline:none;
    border-color:var(--mint-deep);
    box-shadow:0 0 0 3px var(--mint-soft);
  }

  /* Sizing nach Einwohnerzahl */
  .cloud-city[data-size="xs"]{font-size:13px;padding:5px 12px;opacity:.55;color:var(--n-500);}
  .cloud-city[data-size="sm"]{font-size:15px;padding:6px 13px;opacity:.78;}
  .cloud-city[data-size="md"]{font-size:18px;padding:7px 15px;color:var(--ink);}
  .cloud-city[data-size="lg"]{
    font-size:24px;padding:8px 19px;
    color:var(--ink);
    border-color:var(--n-300);
    font-weight:600;
  }
  .cloud-city[data-size="xl"]{
    font-size:32px;padding:10px 24px;
    color:var(--mint-deep);
    border-color:rgba(20,216,192,.5);
    background:rgba(20,216,192,.06);
    letter-spacing:-.02em;
    font-weight:600;
  }
  .cloud-city[data-size="xl"]:hover{
    background:var(--mint);
    color:var(--ink);
  }

  /* Erscheinungs-Animation beim Shuffle — gestaffelt */
  .cities-cloud--free.is-shuffling .cloud-city{
    animation:cloudPop 540ms cubic-bezier(.4,1.4,.6,1) backwards;
  }
  @keyframes cloudPop{
    from{
      opacity:0;
      transform:
        translate(var(--mx, 0px), calc(var(--my, 0px) + 18px))
        rotate(var(--rot, 0deg))
        translate(var(--tx, 0px), var(--ty, 0px))
        scale(.78);
    }
    to{
      opacity:1;
      transform:
        translate(var(--mx, 0px), var(--my, 0px))
        rotate(var(--rot, 0deg))
        translate(var(--tx, 0px), var(--ty, 0px));
    }
  }

  /* Bottom-Actions: Shuffle + Alle ansehen */
  .cities-strip__bottom{
    display:flex;
    gap:12px;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    margin-top:24px;
  }
  .cities-strip__bottom .btn-ghost{
    display:inline-flex;align-items:center;gap:8px;
    padding:11px 20px;
    border:1px solid var(--n-300);
    color:var(--ink);
    font-family:var(--f-display);font-weight:500;font-size:14px;
    border-radius:999px;
    transition:all 160ms;
  }
  .cities-strip__bottom .btn-ghost:hover{
    border-color:var(--mint-deep);
    color:var(--mint-deep);
    background:var(--mint-soft);
  }

  @media (max-width:640px){
    .cities-cloud--free{padding:40px 16px;gap:10px 14px;min-height:420px;}
    .cloud-city[data-size="xl"]{font-size:24px;padding:8px 18px;}
    .cloud-city[data-size="lg"]{font-size:19px;padding:7px 15px;}
    .cloud-city[data-size="md"]{font-size:16px;}
    .cloud-city[data-size="sm"]{font-size:14px;}
    .cloud-city[data-size="xs"]{font-size:12.5px;}
  }
  @media (prefers-reduced-motion:reduce){
    .cities-cloud--free.is-shuffling .cloud-city{animation:none;}
    .cloud-city{transform:rotate(var(--rot,0deg)) translate(var(--tx,0px), var(--ty,0px)) !important;}
    .cloud-city:hover{transform:rotate(0deg) translateY(-2px) !important;}
  }
  .cities-strip__more .btn-ghost{
    display:inline-flex;align-items:center;gap:8px;
    padding:12px 20px;
    border:1px solid var(--n-300);
    color:var(--ink);
    font-family:var(--f-display);font-weight:500;font-size:14px;
    border-radius:var(--r-sm);
    transition:all 160ms;
  }
  .cities-strip__more .btn-ghost:hover{
    border-color:var(--mint-deep);
    color:var(--mint-deep);
    background:var(--mint-soft);
  }