/* power2goo — gemeinsames Stylesheet für index / partner / events.
   Aus dem Einzeldatei-Build herausgelöst, damit eine Änderung nicht
   dreimal gepflegt werden muss. */


  :root {
    /* ── Umschaltbare Ebene ──────────────────────────────────────
       --ink      Text und Rahmen, als RGB-Triplett für rgba()
       --fg       Volltonfarbe für Text
       --surf     Flächenfarbe
       Eine Sektion mit class="band" kippt genau diese vier Werte
       und färbt damit ihren ganzen Inhalt um. Alles andere im
       Stylesheet greift auf sie zu und muss nichts wissen.        */
    --ink: 17, 20, 26;
    --fg: #0D1017;
    --surf: #FFFFFF;
    --surf-rgb: 255, 255, 255;

    /* ── Marke ───────────────────────────────────────────────────
       Blau und Grün tragen, Pink akzentuiert.
       Historische Namen: --blue ist das Produkt-Grün, --orange das
       Maskottchen-Blau. Umbenennen hieße 200 Fundstellen anfassen. */
    --green: #00D26A;
    --brand-blue: #1E9CE4;
    --pink: #FF0080;
    --blue: #00D26A;
    --blue-dim: rgba(0,210,106,0.1);
    --blue-border: rgba(0,210,106,0.22);
    --orange: #1E9CE4;
    --orange-dim: rgba(30,156,228,0.1);
    --orange-border: rgba(30,156,228,0.25);
    --bg: var(--surf);
    --bg-card: rgba(var(--ink), 0.04);
    --bg-card-hover: rgba(var(--ink), 0.07);
    --muted: rgba(var(--ink), 0.68);
    --border: rgba(var(--ink), 0.08);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--surf);
    color: var(--fg);
    overflow-x: hidden;
  }

  @keyframes fade-in  { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
  @keyframes fade-up  { from { opacity:0; transform:translateY(36px); } to { opacity:1; transform:translateY(0); } }
  @keyframes pulse    { 0%,100%{opacity:1} 50%{opacity:0.3} }
  @keyframes pulse-glow { 0%,100%{opacity:0.6;transform:translateX(-50%) scaleX(1)} 50%{opacity:1;transform:translateX(-50%) scaleX(1.1)} }

  /* ── NAV ── */
  nav {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 48px; height: 66px;
    background: rgba(var(--surf-rgb), 0.75);
    backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(var(--ink), 0.06);
  }
  .nav-logo { font-size: 20px; font-weight: 900; letter-spacing: -0.5px; }
  .nav-logo span { color: var(--blue-text); }
  .nav-slogan {
    font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
    color: rgba(var(--ink), 0.65);
    padding-left: 14px;
    border-left: 1px solid rgba(var(--ink), 0.1);
    margin-left: 14px;
    white-space: nowrap;
    line-height: 1.3;
  }
  .nav-slogan em { color:var(--blue-text); font-style: normal; font-weight: 700; }
  .nav-slogan em.blue { color:var(--green-text); }

  /* ── HERO ── */
  .hero-section {
    position: relative; width: 100%;
    min-height: calc(100vh - 66px);
    overflow: hidden; background: transparent;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
  }
  .hero-grid {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 1;
    height: 300px;
    background-image:
      linear-gradient(to right, rgba(0,210,106,0.12) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(0,210,106,0.12) 1px, transparent 1px);
    background-size: 56px 38px;
    transform: perspective(380px) rotateX(56deg);
    transform-origin: bottom center;
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
    mask-image: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
    pointer-events: none;
  }
  .hero-glow-blob {
    position: absolute; bottom: 8%; left: 50%;
    transform: translateX(-50%);
    width: 560px; height: 200px; border-radius: 50%;
    background: radial-gradient(ellipse, rgba(30,156,228,0.15) 0%, rgba(0,210,106,0.08) 55%, transparent 70%);
    filter: blur(28px); z-index: 2; pointer-events: none;
    animation: pulse-glow 5s ease-in-out infinite;
  }
  .hero-radial {
    position: absolute; left: 50%; bottom: -80px;
    width: 140%; height: 500px; transform: translateX(-50%);
    border-radius: 100%;
    background: radial-gradient(closest-side, var(--surf) 80%, rgba(0,210,106,0.1));
    border: 1px solid rgba(0,210,106,0.08);
    animation: fade-up 1s 0.5s both; pointer-events: none; z-index: 3;
  }
  .hero-inner {
    position: relative; z-index: 10;
    width: 100%; max-width: 720px; margin: 0 auto;
    padding: 100px 32px 40px;
    display: flex; flex-direction: column; align-items: center;
  }
  .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(var(--ink), 0.76);
    background: linear-gradient(135deg, rgba(var(--ink), 0.04), rgba(30,156,228,0.06));
    border: 1px solid rgba(30,156,228,0.25);
    padding: 7px 18px 7px 14px; border-radius: 99px;
    margin-bottom: 34px; text-decoration: none; transition: border-color .25s;
    animation: fade-in 0.7s 0s both;
  }
  .hero-eyebrow:hover { border-color: rgba(30,156,228,0.45); }
  .hero-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); animation: pulse 2s infinite; }
  /* ── Gleiche Hero-Hoehe auf allen drei Seiten ──────────────────────
     Die Hoehe des Hero haengt an der Zeilenzahl von Ueberschrift und
     Unterzeile, und die ist je Seite verschieden: Partner braucht drei
     Ueberschriftszeilen ("Kostenlose Powerbank-Station."), die Startseite
     drei Zeilen in der Unterzeile. Dadurch begann das Laufband auf jeder
     Seite woanders – bei 1280px 88px auseinander.

     Beide Felder reservieren deshalb fest drei Zeilen. Die Einheit lh
     ist genau eine Zeilenhoehe DIESES Elements, also passt sich der Wert
     von selbst an, wenn die Schrift ueber clamp() mit der Fensterbreite
     mitwaechst – anders als eine Pixelangabe, die nur bei einer Breite
     stimmen wuerde. justify-content zentriert den Text im reservierten
     Feld, damit die freie Zeile nicht als Loch unter der Schrift haengt,
     sondern sich auf beide Seiten verteilt.

     Aeltere Browser ohne lh ignorieren die drei Zeilen und zeigen wie
     bisher unterschiedlich hohe Heros – kein Bruch, nur kein Ausgleich. */
  .hero-h1 {
    animation: fade-in 0.8s 0.1s both;
    font-size: clamp(46px, 7.5vw, 82px);
    font-weight: 900; line-height: 1.03; letter-spacing: -3.5px;
    color: var(--fg);
    padding-bottom: 8px;
    /* content-box: sonst zaehlt border-box das padding-bottom in die
       3lh hinein, und die Seite mit drei echten Zeilen bliebe 8px
       hoeher als die anderen. Reserviert werden drei Zeilen TEXT. */
    box-sizing: content-box;
    min-height: 3lh;
    display: flex; flex-direction: column; justify-content: center;
  }
  .hero-sub {
    animation: fade-in 0.8s 0.25s both;
    font-size: 17px; color: rgba(var(--ink), 0.7); line-height: 1.7;
    max-width: 440px; margin-top: 28px; margin-bottom: 38px; letter-spacing: -0.1px;
    min-height: 3lh;
    display: flex; flex-direction: column; justify-content: center;
  }
  .hero-cta-row {
    animation: fade-in 0.8s 0.38s both;
    display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap;
  }
  .btn-primary {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--orange); color: var(--fg);
    font-family: inherit; font-size: 15px; font-weight: 800;
    padding: 14px 28px; border-radius: 10px; border: none;
    cursor: pointer; text-decoration: none; letter-spacing: -0.2px;
    transition: background .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 0 0 0 rgba(30,156,228,0);
  }
  .btn-primary:hover { background: #1682C4; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(30,156,228,0.3); }
  .btn-primary.blue { background: var(--blue); box-shadow: 0 0 0 0 rgba(0,210,106,0); }
  .btn-primary.blue:hover { background: #00A854; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,210,106,0.3); }
  .btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(var(--ink), 0.07); color: rgba(var(--ink), 0.86);
    font-family: inherit; font-size: 15px; font-weight: 600;
    padding: 14px 22px; border-radius: 10px;
    border: 1px solid rgba(var(--ink), 0.12);
    cursor: pointer; text-decoration: none; transition: background .2s, border-color .2s, transform .15s;
  }
  .btn-ghost:hover { background: rgba(var(--ink), 0.12); border-color: rgba(var(--ink), 0.25); transform: translateY(-2px); }
  .trust-row {
    animation: fade-in 0.8s 0.5s both;
    display: flex; gap: 28px; margin-top: 44px; flex-wrap: wrap; justify-content: center;
  }
  .trust-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(var(--ink), 0.76); font-weight: 500; }
  .trust-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }

  /* Station vis */
  .station-wrap {
    position: relative; z-index: 10;
    display: flex; justify-content: center; align-items: flex-end;
    gap: 12px; padding: 56px 32px 0; width: 100%;
    animation: fade-up 1s 0.7s both, float-slow 7s ease-in-out 1.5s infinite;
  }
  .s-card {
    border-radius: 14px;
    border: 1px solid rgba(0,210,106,0.2);
    background: rgba(0,210,106,0.05);
    display: flex; flex-direction: column; align-items: center; padding: 18px 14px 0;
  }
  .s-card.main { width: 150px; }
  .s-card.side { width: 100px; opacity: 0.45; }
  .s-screen {
    width: 100%; background: rgba(0,210,106,0.1);
    border: 1px solid rgba(0,210,106,0.25);
    border-radius: 7px; padding: 9px 12px; margin-bottom: 14px;
  }
  .s-label { font-size: 9px; color:var(--blue-text); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
  .s-val   { font-size: 14px; font-weight: 900; color: var(--fg); margin-top: 2px; }
  .s-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; width: 100%; }
  .slot    { height: 22px; border-radius: 4px; background: rgba(var(--ink), 0.04); border: 1px solid rgba(var(--ink), 0.07); }
  .slot.on { background: rgba(30,156,228,0.18); border-color: rgba(30,156,228,0.35); }
  .s-name  { font-size: 9px; color: rgba(var(--ink), 0.6); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; padding: 12px 0 14px; }
  .hero-bottom-fade {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 11;
    width: 100%; height: 200px;
    background: linear-gradient(to top, var(--surf) 45%, rgba(var(--surf-rgb), 0.6) 72%, transparent 100%);
    pointer-events: none;
  }


  /* ── SECTIONS SHARED ── */
  section { padding: 96px 48px; }
  .section-tag   { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color:var(--blue-text); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
  .section-tag::before { content:''; display:block; width:24px; height:2px; background:var(--blue); border-radius:2px; }
  .section-title { font-size: clamp(30px, 4vw, 50px); font-weight: 900; letter-spacing: -2px; line-height: 1.08; }
  .section-title em { color:var(--blue-text); font-style: normal; }
  .section-title .blue { color:var(--green-text); font-style: normal; }
  .section-sub   { font-size: 15px; color: var(--muted); line-height: 1.7; max-width: 480px; margin-top: 16px; }

  /* ── MODE SELECTOR (Kunden / Partner toggle) ── */
  .mode-bar {
    background: rgba(var(--ink), 0.02);
    border-bottom: 1px solid var(--border);
    padding: 20px 48px;
    display: flex; gap: 8px; align-items: center;
  }
  .mode-chip {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 700; padding: 8px 20px; border-radius: 99px;
    border: 1px solid var(--border); cursor: pointer; transition: all .2s;
    text-decoration: none; font-family: inherit;
    color: var(--muted); background: transparent;
  }
  .mode-chip:hover { border-color: rgba(var(--ink), 0.2); color: var(--fg); }
  .mode-chip.active { background: var(--blue); border-color:var(--green-text); color: var(--fg); }
  .mode-chip.active.orange-chip { background: var(--orange); border-color:var(--blue-text); }
  .mode-chip-icon { font-size: 15px; }

  /* ── HOW IT WORKS (Kunden) ── */
  .how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
  .how-steps { margin-top: 44px; }
  .how-step {
    display: flex; gap: 24px; padding: 28px 0;
    border-bottom: 1px solid var(--border);
  }
  .how-step:first-child { border-top: 1px solid var(--border); }
  .step-num { font-size: 10px; font-weight: 800; color:var(--blue-text); letter-spacing: .06em; padding-top: 3px; min-width: 28px; }
  .step-title { font-size: 17px; font-weight: 800; letter-spacing: -.3px; margin-bottom: 6px; }
  .step-desc  { font-size: 13px; color: var(--muted); line-height: 1.65; }
  .how-visual { display: flex; flex-direction: column; gap: 10px; }
  .how-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 14px; padding: 22px 24px; transition: border-color .25s;
  }
  .how-card:hover { border-color: var(--blue-border); }
  .how-card.featured { border-color: var(--orange-border); background: var(--orange-dim); }
  .how-card-title { font-size: 15px; font-weight: 800; margin-bottom: 6px; }
  .how-card-desc  { font-size: 13px; color: var(--muted); line-height: 1.55; }

  /* ── LOCATION PILLS ── */
  .loc-pills {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 48px;
  }
  .loc-pill {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 600; color: rgba(var(--ink), 0.76);
    background: var(--bg-card); border: 1px solid var(--border);
    padding: 9px 18px; border-radius: 99px; transition: all .2s; cursor: default;
  }
  .loc-pill:hover { border-color: var(--blue-border); color: var(--fg); }
  .loc-pill-icon { font-size: 16px; }

  /* ── FEATURES TABLE ── */
  .feat-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 52px; }
  .feat-right { font-size: 14px; color: var(--muted); max-width: 240px; text-align: right; line-height: 1.55; }
  .feat-row {
    display: grid; grid-template-columns: 52px 1fr 1fr;
    gap: 28px; align-items: start; padding: 28px 0;
    border-top: 1px solid var(--border);
  }
  .feat-row:last-child { border-bottom: 1px solid var(--border); }
  .feat-num  { font-size: 10px; font-weight: 800; color: rgba(var(--ink), 0.62); letter-spacing: .06em; padding-top: 3px; }
  .feat-name { font-size: 18px; font-weight: 900; letter-spacing: -.4px; }
  .feat-desc { font-size: 13px; color: var(--muted); line-height: 1.65; }

  /* ── PRICING ── */
  .price-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    border: 1px solid var(--border); border-radius: 20px;
    overflow: hidden; margin-top: 52px;
  }
  .price-left { padding: 52px 48px; border-right: 1px solid var(--border); }
  .price-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color:var(--blue-text); margin-bottom: 22px; }
  .price-big { font-size: 76px; font-weight: 900; letter-spacing: -4px; line-height: 1; }
  .price-big sub { font-size: 20px; font-weight: 500; letter-spacing: 0; color: var(--muted); vertical-align: baseline; }
  .price-note { font-size: 14px; color: var(--muted); margin-top: 20px; line-height: 1.65; }
  .price-right { padding: 52px 48px; display: flex; flex-direction: column; justify-content: center; }
  .price-line { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--border); }
  .price-line:first-child { border-top: 1px solid var(--border); }
  .price-line-label { font-size: 14px; color: var(--muted); }
  .price-line-val   { font-size: 14px; font-weight: 800; }
  .clr-orange { color:var(--blue-text); }
  .clr-blue   { color:var(--green-text); }

  /* ── LOCATIONS GRID ── */
  .loc-grid {
    display: grid; grid-template-columns: repeat(3,1fr);
    gap: 14px; margin-top: 44px;
  }
  .loc-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 14px; padding: 24px;
    display: flex; flex-direction: column; gap: 10px;
    transition: border-color .25s, background .25s;
  }
  .loc-card:hover { border-color: var(--orange-border); background: var(--orange-dim); }
  .loc-icon { width: 38px; height: 38px; border-radius: 9px; background: var(--orange-dim); border: 1px solid var(--orange-border); display: flex; align-items: center; justify-content: center; font-size: 17px; }
  .loc-name { font-size: 15px; font-weight: 800; }
  .loc-type { font-size: 12px; color: var(--muted); }
  .loc-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; width: fit-content; background: rgba(var(--ink), 0.05); color: rgba(var(--ink), 0.65); border: 1px solid var(--border); }
  .loc-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

  /* ── CABLES SECTION ── */
  .cable-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
  .cable-card {
    border-radius: 18px; border: 1px solid var(--border);
    background: var(--bg-card);
    padding: 32px 28px;
    transition: border-color .25s, background .25s;
    position: relative; overflow: hidden;
  }
  .cable-card:hover { border-color: var(--orange-border); background: var(--bg-card-hover); }
  .cable-card.featured { border-color: var(--orange-border); background: rgba(30,156,228,0.05); }
  .cable-icon { font-size: 36px; margin-bottom: 18px; }
  .cable-name { font-size: 22px; font-weight: 900; letter-spacing: -0.8px; margin-bottom: 6px; }
  .cable-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 99px; margin-bottom: 14px;
  }
  .cable-badge.new { background: var(--orange-dim); border: 1px solid var(--orange-border); color:var(--blue-text); }
  .cable-badge.standard { background: var(--blue-dim); border: 1px solid var(--blue-border); color:var(--green-text); }
  .cable-badge.legacy { background: rgba(var(--ink), 0.05); border: 1px solid var(--border); color: var(--muted); }
  .cable-desc { font-size: 13px; color: rgba(var(--ink), 0.76); line-height: 1.65; }
  .cable-devices { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
  .cable-tag {
    font-size: 11px; font-weight: 600;
    background: rgba(var(--ink), 0.06); border: 1px solid rgba(var(--ink), 0.1);
    border-radius: 6px; padding: 3px 9px; color: rgba(var(--ink), 0.76);
  }

  /* ── DEVICES SECTION ── */
  .devices-wrap { margin-top: 48px; }
  .devices-intro { font-size: 17px; color: rgba(var(--ink), 0.76); line-height: 1.65; max-width: 560px; margin-bottom: 36px; }
  .devices-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .device-card {
    border-radius: 14px; border: 1px solid var(--border);
    background: var(--bg-card);
    padding: 22px 18px;
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 10px;
    transition: border-color .25s;
  }
  .device-card:hover { border-color: var(--blue-border); }
  .device-emoji { font-size: 28px; }
  .device-name { font-size: 14px; font-weight: 800; }
  .device-sub  { font-size: 12px; color: var(--muted); line-height: 1.5; }

  /* ── PARTNER SECTION ── */
  .partner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
  .partner-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 40px; }
  .p-stat {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 14px; padding: 24px 22px;
  }
  .p-stat.featured { border-color: var(--blue-border); background: var(--blue-dim); grid-column: 1/-1; }
  .p-stat-num   { font-size: 36px; font-weight: 900; letter-spacing: -1.5px; color:var(--green-text); line-height: 1; margin-bottom: 6px; }
  .p-stat-num.orange { color:var(--blue-text); }
  .p-stat-label { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
  .p-stat-desc  { font-size: 12px; color: var(--muted); line-height: 1.5; }
  .partner-steps { display: flex; flex-direction: column; gap: 0; margin-top: 44px; }
  .p-step {
    display: flex; gap: 20px; padding: 24px 0;
    border-bottom: 1px solid var(--border);
  }
  .p-step:first-child { border-top: 1px solid var(--border); }
  .p-step-num {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--blue); color: var(--fg);
    font-size: 13px; font-weight: 800; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .p-step-title { font-size: 16px; font-weight: 800; margin-bottom: 5px; }
  .p-step-desc  { font-size: 13px; color: var(--muted); line-height: 1.6; }

  /* Benefit cards for partner */
  .benefit-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 40px; }
  .b-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; padding: 20px;
    transition: border-color .2s;
  }
  .b-card:hover { border-color: var(--blue-border); }
  .b-card-title { font-size: 14px; font-weight: 800; margin-bottom: 5px; }
  .b-card-desc  { font-size: 12px; color: var(--muted); line-height: 1.55; }
  .b-card-icon  { font-size: 22px; margin-bottom: 12px; }

  /* Market context strip */
  .market-strip {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 0; border: 1px solid var(--border); border-radius: 16px;
    overflow: hidden; margin-top: 56px;
  }
  .market-col { padding: 32px 28px; border-right: 1px solid var(--border); }
  .market-col:last-child { border-right: none; }
  .market-label { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color:var(--blue-text); margin-bottom: 14px; }
  .market-text { font-size: 14px; color: rgba(var(--ink), 0.76); line-height: 1.65; }
  .market-text strong { color: var(--fg); }


  /* ── PARTNER CTA ── */
  .cta-strip {
    margin: 0 48px 80px;
    border: 1px solid var(--orange-border); border-radius: 20px;
    padding: 52px 56px; background: rgba(30,156,228,0.04);
    display: flex; align-items: center; justify-content: space-between; gap: 40px;
  }
  .cta-strip-text { font-size: clamp(22px,3vw,34px); font-weight: 900; letter-spacing: -1px; line-height: 1.25; }
  .cta-strip-text span { color:var(--blue-text); }
  .cta-strip-sub { font-size: 14px; color: var(--muted); margin-top: 8px; }
  .cta-strip-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; flex-shrink: 0; }
  .cta-note { font-size: 12px; color: rgba(var(--ink), 0.6); }

  /* ── FORM SECTION ── */
  .form-section { background: #060606; border-top: 1px solid var(--border); }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
  .form-perks { margin-top: 36px; display: flex; flex-direction: column; gap: 0; }
  .form-perk { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: rgba(var(--ink), 0.86); }
  .form-perk:first-child { border-top: 1px solid var(--border); }
  .form-perk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }
  .form-fields { display: flex; flex-direction: column; gap: 14px; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .form-group { display: flex; flex-direction: column; gap: 6px; }
  .form-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(var(--ink), 0.65); }
  .form-input, .form-select, .form-textarea {
    background: rgba(var(--ink), 0.05); border: 1px solid var(--border);
    border-radius: 9px; padding: 12px 16px; color: var(--fg);
    font-family: inherit; font-size: 14px; transition: border-color .2s;
    outline: none; width: 100%;
  }
  .form-input::placeholder, .form-textarea::placeholder { color: rgba(var(--ink), 0.6); }
  .form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--green-text); }
  .events-input:focus { border-color: rgba(30,156,228,0.7) !important; }
  .form-select { appearance: none; cursor: pointer; color: rgba(var(--ink), 0.76); }
  .form-select option { background: #1a1a1a; }
  .form-textarea { resize: vertical; min-height: 100px; }
  .form-checkbox { display: flex; align-items: flex-start; gap: 12px; }
  .form-checkbox input { width: 16px; height: 16px; margin-top: 2px; accent-color:var(--green-text); flex-shrink: 0; }
  .form-checkbox span { font-size: 12px; color: var(--muted); line-height: 1.55; }
  .form-submit {
    background: var(--blue); color: var(--fg); font-family: inherit;
    font-size: 15px; font-weight: 800; padding: 16px 32px;
    border-radius: 10px; border: none; cursor: pointer;
    transition: background .2s, transform .15s; width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 9px;
  }
  .form-submit:hover { background: #00A854; transform: translateY(-1px); }

  /* ── FOOTER ── */
  footer { background: rgba(var(--ink), 0.025); border-top: 1px solid var(--border); padding: 48px 48px 32px; }
  .footer-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; }
  .footer-logo { font-size: 18px; font-weight: 900; letter-spacing: -.5px; }
  .footer-logo span { color: var(--blue-text); }
  .footer-tagline { font-size: 13px; color: rgba(var(--ink), 0.6); margin-top: 6px; }
  .footer-links { display: flex; gap: 52px; }
  .footer-col-title { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--ink), 0.65); margin-bottom: 14px; }
  .footer-col a { display: block; font-size: 14px; color: rgba(var(--ink), 0.76); text-decoration: none; margin-bottom: 10px; transition: color .2s; }
  .footer-col a:hover { color: var(--fg); }
  .footer-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); padding-top: 24px; }
  .footer-copy { font-size: 12px; color: rgba(var(--ink), 0.62); }
  .footer-legal { display: flex; gap: 20px; }
  .footer-legal a { font-size: 12px; color: rgba(var(--ink), 0.62); text-decoration: none; transition: color .2s; }
  .footer-legal a:hover { color: rgba(var(--ink), 0.76); }

  /* ── Legal Modals ── */
  .legal-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 9999; width: calc(100% - 48px); max-width: 640px;
    max-height: 80vh; overflow-y: auto;
    background: #0d0f18; border: 1px solid rgba(var(--ink), 0.1);
    border-radius: 22px; padding: 40px 40px 36px;
    box-shadow: 0 32px 100px rgba(0,0,0,0.7);
    scrollbar-width: thin; scrollbar-color: rgba(var(--ink), 0.1) transparent;
  }
  .legal-modal h2 { color: var(--fg); }
  .legal-section { margin-bottom: 24px; }
  .legal-section h3 {
    font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: rgba(var(--ink), 0.7); margin-bottom: 10px;
  }
  .legal-section p { font-size: 14px; color: rgba(var(--ink), 0.76); line-height: 1.75; }
  .legal-section a { color:var(--blue-text); text-decoration: none; }
  .legal-section a:hover { text-decoration: underline; }
  .legal-section strong { color: rgba(var(--ink), 0.86); }
  /* Trennlinien zwischen den Themenbloecken der Rechtstexte. */
  .legal-modal hr { border: none; border-top: 1px solid rgba(var(--ink), 0.09); margin: 8px 0 28px; }
  /* Der globale Reset nimmt Listen Einzug und Aufzaehlungszeichen – hier zurueckholen. */
  .legal-section ul { margin: 10px 0 0 20px; }
  .legal-section li { font-size: 14px; color: rgba(var(--ink), 0.76); line-height: 1.75; }
  .legal-section code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
    background: rgba(var(--ink), 0.07); padding: 1px 5px; border-radius: 4px;
  }

  /* ── Cookie banner hidden by default ── */
  #cookie-banner { display: none; }

  /* Page tabs */
  .page { display: none; }
  .page.active { display: block; }

  /* ══ UPGRADES ══ */

  /* Give bigger font more horizontal room */
  .hero-inner { max-width: min(72vw, 820px) !important; }

  /* Bigger, more dramatic hero headline */
  .hero-h1 {
    font-size: clamp(56px, 8.5vw, 92px) !important;
    letter-spacing: -4px !important;
    line-height: 1.08 !important;
    padding-bottom: 28px !important;
    margin-bottom: -12px !important;
  }

  /* Stronger hero glow */
  .hero-glow-blob {
    width: 900px !important;
    height: 320px !important;
    background: radial-gradient(ellipse,
      rgba(30,156,228,0.22) 0%,
      rgba(0,210,106,0.13) 50%,
      transparent 70%) !important;
    filter: blur(36px) !important;
  }

  /* Button: shimmer gradient + glow on hover */
  .btn-primary {
    background-image: linear-gradient(90deg, #e06010 0%, #1E9CE4 40%, #7CC9F2 70%, #1E9CE4 100%);
    background-size: 250% 100%;
    transition: background-position .5s ease, box-shadow .2s, transform .15s !important;
  }
  .btn-primary:hover {
    background-position: 100% 0 !important;
    box-shadow: 0 0 32px rgba(30,156,228,0.4), 0 4px 20px rgba(30,156,228,0.22) !important;
    transform: translateY(-2px) !important;
  }
  .btn-primary.blue {
    background-image: linear-gradient(90deg, #00A854 0%, #00D26A 40%, #6AFFC2 70%, #00D26A 100%);
  }
  .btn-primary.blue:hover {
    box-shadow: 0 0 32px rgba(0,210,106,0.4), 0 4px 20px rgba(0,210,106,0.22) !important;
  }

  /* Card lift + shadow on hover */
  .how-card, .loc-card, .cable-card, .device-card, .b-card, .p-stat {
    transition: border-color .25s, background .25s, transform .22s, box-shadow .22s !important;
  }
  .how-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(0,210,106,0.12) !important;
  }
  .how-card.featured {
    box-shadow: 0 6px 28px rgba(30,156,228,0.12);
  }
  .how-card.featured:hover {
    box-shadow: 0 12px 40px rgba(30,156,228,0.18) !important;
    transform: translateY(-4px) !important;
  }
  .loc-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 36px rgba(30,156,228,0.12) !important;
  }
  .cable-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 36px rgba(30,156,228,0.12) !important;
  }
  .device-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 28px rgba(0,210,106,0.13) !important;
  }
  .b-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 28px rgba(0,210,106,0.11) !important;
  }
  .p-stat:hover {
    border-color: var(--blue-border) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0,210,106,0.1) !important;
  }
  .p-stat.featured {
    box-shadow: 0 4px 32px rgba(0,210,106,0.13);
  }

  /* Section title bigger */
  .section-title { font-size: clamp(36px, 5vw, 62px) !important; letter-spacing: -2.5px !important; }

  /* Step number: pill-shaped, more dramatic */
  .p-step-num {
    width: 36px !important; height: 36px !important;
    box-shadow: 0 0 18px rgba(0,210,106,0.4);
  }

  /* Station slots: staggered pulse */
  @keyframes slot-pulse {
    0%, 100% { opacity: 1;   background: rgba(30,156,228,0.18); }
    50%       { opacity: 0.35; background: rgba(30,156,228,0.07); }
  }
  .slot.on { animation: slot-pulse 2.4s ease-in-out infinite; }
  .s-card.main .slot.on:nth-child(2) { animation-delay: .5s; }
  .s-card.main .slot.on:nth-child(4) { animation-delay: 1s; }
  .s-card.main .slot.on:nth-child(5) { animation-delay: .25s; }
  .s-card.main .slot.on:nth-child(6) { animation-delay: .75s; }
  .s-card.main .slot.on:nth-child(7) { animation-delay: 1.2s; }
  .s-card.main .slot.on:nth-child(8) { animation-delay: .6s; }
  .s-card.side .slot.on:nth-child(2) { animation-delay: .4s; }
  .s-card.side .slot.on:nth-child(3) { animation-delay: .9s; }

  /* CTA strip: pulsing border + glow */
  @keyframes cta-pulse {
    0%,100% { border-color: rgba(30,156,228,0.25); box-shadow: 0 0 40px rgba(30,156,228,0.05); }
    50%      { border-color: rgba(30,156,228,0.55); box-shadow: 0 0 64px rgba(30,156,228,0.12); }
  }
  .cta-strip { animation: cta-pulse 4s ease-in-out infinite; }

  /* Float animation for decorative elements */
  @keyframes float {
    0%,100% { transform: translateY(0px); }
    50%      { transform: translateY(-10px); }
  }
  @keyframes float-slow {
    0%,100% { transform: translateY(0px) rotate(0deg); }
    50%      { transform: translateY(-14px) rotate(1deg); }
  }



  /* ── Product Showcase (after hero) ── */
  .product-showcase {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 24px 32px 72px; position: relative; overflow: visible;
  }
  .product-showcase-img {
    max-height: 520px; width: auto; max-width: 88vw;
    display: block;
    animation: fade-in 0.9s 0.2s both, float-slow 8s ease-in-out 1s infinite;
  }
  .product-showcase-img.glow-green {
    filter: drop-shadow(0 40px 100px rgba(0,210,106,0.55));
  }
  .product-showcase-img.glow-pink {
    filter: drop-shadow(0 40px 100px rgba(30,156,228,0.5));
  }
  @media (max-width: 768px) {
    .product-showcase-img { max-height: 320px; }
    .product-showcase { padding: 16px 20px 48px; }
  }

  /* ── Hero floating product images ── */
  @keyframes slide-from-left {
    from { transform: rotate(-6deg) translateX(-280px); opacity: 0; }
    to   { transform: rotate(-6deg) translateX(0);      opacity: 1; }
  }
  @keyframes slide-from-right {
    from { transform: rotate(5deg) translateX(280px); opacity: 0; }
    to   { transform: rotate(5deg) translateX(0);     opacity: 1; }
  }
  .hero-product-left, .hero-product-right {
    position: absolute; z-index: 8;
    pointer-events: none; top: 50%;
  }
  .hero-product-left {
    left: 3%;
    margin-top: -180px;
    animation: slide-from-left 1s 0.5s cubic-bezier(.22,1,.36,1) both;
  }
  .hero-product-right {
    right: 2%;
    margin-top: -185px;
    animation: slide-from-right 1s 0.75s cubic-bezier(.22,1,.36,1) both;
  }
  /* Kein drop-shadow auf den Produktbildern: der Schatten nimmt die Form
     des Produkts an, und beide Produkte sind rechteckig – auf dem hellen
     Grund wird daraus ein graues Kaestchen. Siehe die Notiz weiter unten. */
  .hero-product-left img {
    height: clamp(240px, 26vw, 380px); width: auto;
    display: block;
  }
  .hero-product-right img {
    height: clamp(270px, 29vw, 430px); width: auto;
    display: block;
  }
  @media (max-width: 1100px) {
    .hero-product-left, .hero-product-right { display: none; }
  }

  /* Shimmer gradient on text */
  @keyframes shimmer-text {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  /* Glow pulse on blue */
  @keyframes glow-blue {
    0%,100% { box-shadow: 0 0 0 0 rgba(0,210,106,0); }
    50%      { box-shadow: 0 0 32px 8px rgba(0,210,106,0.15); }
  }

  /* Scenario card shake-in */
  @keyframes slide-in-up {
    from { opacity:0; transform:translateY(28px); }
    to   { opacity:1; transform:translateY(0); }
  }
  @keyframes badge-pop {
    0%   { transform:scale(0.7); opacity:0; }
    70%  { transform:scale(1.08); }
    100% { transform:scale(1); opacity:1; }
  }

  /* Scenario section */
  .scenario-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:52px;
  }
  .scenario-problem {
    display:flex; flex-direction:column; gap:14px;
  }
  .scenario-card {
    background:rgba(239,68,68,0.06); border:1px solid rgba(239,68,68,0.2);
    border-radius:16px; padding:22px 24px; position:relative; overflow:hidden;
    transition:border-color .3s, transform .3s;
  }
  .scenario-card::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg, rgba(239,68,68,0.04) 0%, transparent 60%);
    pointer-events:none;
  }
  .scenario-card:hover { border-color:rgba(239,68,68,0.45); transform:translateY(-2px); }
  .scenario-card-tag {
    display:inline-flex; align-items:center; gap:6px;
    font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
    color:rgba(239,68,68,0.8); margin-bottom:12px;
  }
  .scenario-card-tag-dot {
    width:6px; height:6px; border-radius:50%; background:rgba(239,68,68,0.8);
    animation:slot-pulse 1.8s ease-in-out infinite;
  }
  .scenario-card-title {
    font-size:15px; font-weight:700; color:rgba(var(--ink), 0.86); margin-bottom:6px; line-height:1.4;
  }
  .scenario-card-desc {
    font-size:13px; color:rgba(var(--ink), 0.7); line-height:1.6;
  }
  .scenario-solution {
    background:rgba(0,210,106,0.06); border:1px solid rgba(0,210,106,0.18);
    border-radius:20px; padding:40px 36px; display:flex; flex-direction:column;
    justify-content:center; position:relative; overflow:hidden;
    animation:glow-blue 4s ease-in-out infinite;
  }
  .scenario-solution::before {
    content:''; position:absolute; top:-40px; right:-40px;
    width:180px; height:180px; border-radius:50%;
    background:radial-gradient(circle, rgba(0,210,106,0.12) 0%, transparent 70%);
    pointer-events:none;
  }
  .scenario-solution-label {
    font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
    color:var(--green-text); margin-bottom:18px;
  }
  .scenario-solution-title {
    font-size:26px; font-weight:900; line-height:1.25; color:var(--fg); margin-bottom:16px;
  }
  .scenario-solution-item {
    display:flex; align-items:flex-start; gap:12px; padding:12px 0;
    border-bottom:1px solid rgba(0,210,106,0.08); font-size:13.5px; color:rgba(var(--ink), 0.86); line-height:1.5;
  }
  .scenario-solution-item:last-child { border-bottom:none; padding-bottom:0; }
  .scenario-solution-icon {
    width:22px; height:22px; border-radius:50%; background:rgba(0,210,106,0.12);
    display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;
  }

  /* Marquee ticker */
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .ticker-wrap {
    overflow: hidden;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: rgba(var(--ink), 0.018);
    padding: 13px 0;
  }
  /* Die Dauer gilt fuer EINEN Durchlauf – unabhaengig davon, wie lang
     das Band ist. Ein laengeres Band muss deshalb laenger brauchen,
     sonst steigt das Tempo mit jedem zusaetzlichen Begriff. Der
     Grundwert ergibt auf der Startseite rund 88 px/s; abweichende
     Baender setzen --ticker-dauer entsprechend (siehe unten). */
  .ticker-track {
    display: flex; white-space: nowrap;
    animation: marquee var(--ticker-dauer, 26s) linear infinite;
    width: max-content;
  }
  /* Gemessene Haelften: Startseite 2276px, Events 2678px (laengere
     Begriffe), Partner 6623px (32 Standort-Arten). Durch 88 px/s
     geteilt ergibt das die Dauer, damit alle drei gleich schnell
     laufen. Ohne das liefe das Partner-Band mit 255 px/s vorbei. */
  #page-events  .ticker-track { --ticker-dauer: 30s; }
  #page-partner .ticker-track { --ticker-dauer: 76s; }
  .ticker-item {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: rgba(var(--ink), 0.65); padding: 0 32px;
  }
  .ticker-item svg { opacity: .6; flex-shrink: 0; }
  .ticker-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }
  .ticker-item:hover { color: rgba(var(--ink), 0.76); }

  /* Scroll-reveal */
  @keyframes reveal-up {
    from { opacity: 0; transform: translateY(52px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes reveal-left {
    from { opacity: 0; transform: translateX(-52px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes reveal-right {
    from { opacity: 0; transform: translateX(52px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes reveal-pop-up {
    0%   { opacity: 0; transform: scale(0.82) translateY(28px); }
    65%  { opacity: 1; transform: scale(1.04) translateY(-4px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
  }
  .reveal         { opacity: 0; }
  .reveal-left    { opacity: 0; }
  .reveal-right   { opacity: 0; }
  .reveal-pop     { opacity: 0; }
  .reveal.visible      { animation: reveal-up    0.9s cubic-bezier(.22,1,.36,1) forwards; }
  .reveal-left.visible { animation: reveal-left  0.9s cubic-bezier(.22,1,.36,1) forwards; }
  .reveal-right.visible{ animation: reveal-right 0.9s cubic-bezier(.22,1,.36,1) forwards; }
  .reveal-pop.visible  { animation: reveal-pop-up 0.85s cubic-bezier(.22,1,.36,1) forwards; }
  /* stagger siblings */
  .stagger > *:nth-child(1) { --stagger-i:0; }
  .stagger > *:nth-child(2) { --stagger-i:1; }
  .stagger > *:nth-child(3) { --stagger-i:2; }
  .stagger > *:nth-child(4) { --stagger-i:3; }
  .stagger > *:nth-child(5) { --stagger-i:4; }
  .stagger > *:nth-child(6) { --stagger-i:5; }
  .stagger > *.visible { animation-delay: calc(var(--stagger-i, 0) * 0.1s) !important; }

  /* Card hover lift + glow */
  .b-card {
    transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s ease, box-shadow .35s ease;
    position: relative; overflow: hidden;
  }
  .b-card::after {
    content: ''; position: absolute; inset: 0; opacity: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(0,210,106,0.07) 0%, transparent 70%);
    transition: opacity .35s ease; pointer-events: none;
  }
  .b-card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,210,106,0.22); border-color: rgba(0,210,106,0.3); }
  .b-card:hover::after { opacity: 1; }

  .feat-card {
    transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s ease, box-shadow .35s ease;
    position: relative; overflow: hidden;
  }
  .feat-card::after {
    content: ''; position: absolute; inset: 0; opacity: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(30,156,228,0.06) 0%, transparent 70%);
    transition: opacity .35s ease; pointer-events: none;
  }
  .feat-card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(30,156,228,0.18); border-color: rgba(30,156,228,0.22); }
  .feat-card:hover::after { opacity: 1; }

  /* Scenario card glow on hover already in .scenario-card */
  .scenario-solution { transition: box-shadow .35s ease, transform .35s cubic-bezier(.22,1,.36,1); }
  .scenario-solution:hover { transform: translateY(-4px); }

  /* Ghost button glow on hover */
  .btn-ghost:hover {
    background: rgba(var(--ink), 0.12) !important;
    box-shadow: 0 0 20px rgba(var(--ink), 0.06);
  }

  /* How-step number: slightly bigger */
  .step-num {
    font-size: 11px !important;
    min-width: 32px !important;
    color:var(--blue-text) !important;
  }

  /* Partner stat num glow */
  .p-stat-num { text-shadow: 0 0 24px rgba(0,210,106,0.35); }
  .p-stat-num.orange { text-shadow: 0 0 24px rgba(30,156,228,0.35); }


  /* Live badge for station */
  @keyframes live-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.7)} }
  .live-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--green-text); background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.25);
    padding: 3px 8px; border-radius: 99px; margin-bottom: 8px;
  }
  .live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green-lg); animation: live-dot 1.5s ease-in-out infinite; }


  /* ── MASCOT ── */
  @keyframes mascot-float {
    0%,100% { transform: translateY(0px) rotate(-2deg); }
    50%      { transform: translateY(-18px) rotate(2deg); }
  }
  @keyframes mascot-shadow {
    0%,100% { transform: translateX(-50%) scaleX(1); opacity: 0.35; }
    50%      { transform: translateX(-50%) scaleX(0.72); opacity: 0.18; }
  }

  .hero-split {
    position: relative; z-index: 10;
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; max-width: 1240px; margin: 0 auto;
    padding: 80px 48px 40px; gap: 60px;
    text-align: left;
  }
  .hero-split-text { flex: 1 1 0; min-width: 0; }
  .hero-split-text .hero-h1 { text-align: left; }
  .hero-split-text .hero-sub { text-align: left; }
  .hero-split-text .hero-cta-row { justify-content: flex-start; }
  .hero-split-text .trust-row    { justify-content: flex-start; }
  .hero-split-img {
    flex-shrink: 0;
    width: clamp(280px, 36vw, 500px);
    display: flex; align-items: center; justify-content: center;
    animation: fade-up 1s 0.5s both, float-slow 7s ease-in-out 1.5s infinite;
  }
  .hero-split-img img { width: 100%; height: auto; }
  @media (max-width: 900px) {
    .hero-split { flex-direction: column; text-align: center; padding: 48px 20px 20px; gap: 32px; }
    .hero-split-text .hero-h1, .hero-split-text .hero-sub { text-align: center; }
    .hero-split-text .hero-cta-row { justify-content: center; }
    .hero-split-text .trust-row { justify-content: center; }
    .hero-split-img { width: clamp(200px, 60vw, 320px); }
  }

  .hero-mascot-wrap {
    flex-shrink: 0; position: relative;
    width: 340px; display: flex; flex-direction: column; align-items: center;
    animation: fade-up 1s 0.5s both;
  }
  .hero-mascot-img {
    width: 320px; height: auto;
    animation: mascot-float 4.5s ease-in-out infinite;
    filter: drop-shadow(0 24px 48px rgba(0,210,106,0.2));
    position: relative; z-index: 2;
  }
  .hero-mascot-shadow {
    width: 160px; height: 24px; border-radius: 50%;
    background: rgba(0,210,106,0.22);
    filter: blur(10px);
    position: absolute; bottom: -8px; left: 50%;
    animation: mascot-shadow 4.5s ease-in-out infinite;
  }

  /* Mascot speech bubble */
  .mascot-bubble {
    position: absolute; top: 12px; left: -60px;
    background: rgba(var(--ink), 0.07);
    border: 1px solid rgba(var(--ink), 0.14);
    backdrop-filter: blur(12px);
    border-radius: 14px; padding: 10px 14px;
    font-size: 13px; font-weight: 700; color: var(--fg);
    white-space: nowrap; z-index: 10;
    animation: fade-in 0.8s 1.2s both;
  }
  .mascot-bubble::after {
    content: '';
    position: absolute; bottom: -8px; right: 24px;
    width: 16px; height: 8px;
    background: rgba(var(--ink), 0.07);
    border: 1px solid rgba(var(--ink), 0.14);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    backdrop-filter: blur(12px);
  }
  .mascot-bubble-dot { color:var(--blue-text); }

  /* Mascot in nav – update to use SVG */
  .nav-mascot { height: 36px; width: auto; filter:; }

  /* Partner mascot strip */
  .mascot-strip {
    display: flex; align-items: center; gap: 28px;
    background: var(--blue-dim); border: 1px solid var(--blue-border);
    border-radius: 16px; padding: 22px 28px; margin: 0 48px 0;
  }
  .mascot-strip-img { width: 80px; height: auto; flex-shrink: 0; }
  .mascot-strip-text { font-size: 15px; color: rgba(var(--ink), 0.86); line-height: 1.6; }
  .mascot-strip-text strong { color: var(--fg); }


  /* ── HOW-STEPS full width ── */
  .how-steps {
    margin-top: 44px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
  .how-step {
    display: flex; flex-direction: column; gap: 12px;
    padding: 32px 32px 32px 0;
    border-bottom: none;
    border-right: 1px solid var(--border);
    padding-right: 40px;
  }
  .how-step:last-child { border-right: none; padding-right: 0; padding-left: 40px; }
  .how-step:nth-child(2) { padding-left: 40px; }
  .how-step:first-child { border-top: none; }
  .step-num {
    font-size: 11px !important; font-weight: 800;
    color:var(--blue-text) !important;
    letter-spacing: 0.08em;
  }
  .step-title { font-size: 20px; font-weight: 900; letter-spacing: -0.5px; margin-bottom: 0; }
  .step-desc  { font-size: 14px; color: var(--muted); line-height: 1.65; }

  /* ── FEAT GRID (4-card USP section) ── */
  .feat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 48px;
  }
  .feat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 28px 24px;
    display: flex; flex-direction: column; gap: 14px;
    transition: border-color .25s, background .25s, transform .22s, box-shadow .22s;
  }
  .feat-card:hover {
    border-color: var(--blue-border);
    background: var(--bg-card-hover);
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0,210,106,0.1);
  }
  .feat-card-icon { color:var(--green-text); }
  .feat-card-title { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; }
  .feat-card-desc  { font-size: 13px; color: var(--muted); line-height: 1.65; }




  /* System steps */

  /* Vision section */

  /* Automat showcase */

/* ══════════════════════════════════════════
   MOBILE RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; width: 100%; }
  .page { overflow-x: hidden; }

  /* NAV */
  nav { padding: 0 10px; height: 52px; }
  .nav-slogan { display: none; }
  .nav-mascot { height: 26px !important; }
  .nav-logo { font-size: 15px !important; }
  .lang-switch { padding: 2px !important; flex-shrink: 0; margin-left: 4px; }
  .lang-btn { font-size: 10px !important; padding: 3px 6px !important; }

  /* HERO */
  .hero-section { min-height: auto; }
  .hero-inner { padding: 56px 20px 36px; }
  .hero-h1 { font-size: clamp(34px, 10vw, 56px) !important; letter-spacing: 0.5px !important; line-height: 1.15 !important; }
  .hero-sub { font-size: 14px; margin-bottom: 28px; }
  .hero-cta-row { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
  .hero-cta-row .btn-primary,
  .hero-cta-row .btn-ghost { width: 100%; justify-content: center; }
  .trust-row { gap: 10px; flex-wrap: wrap; justify-content: center; }
  .hero-mascot-wrap { display: none; }
  .hero-eyebrow { font-size: 9px; padding: 6px 12px; text-align: center; }

  /* SECTIONS */
  section { padding: 56px 20px !important; }
  .section-inner { padding: 48px 20px !important; }
  .section-title { font-size: clamp(26px, 8vw, 42px) !important; }
  .section-sub { font-size: 14px; }

  /* FORCE ALL INLINE-STYLE GRIDS TO SINGLE COLUMN */
  [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(2"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(2"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr 1fr !important; }
  [style*="grid-template-columns:repeat(4"] { grid-template-columns: 1fr 1fr !important; }

  /* CSS CLASS GRIDS — müssen separat überschrieben werden */
  .feat-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .cable-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .devices-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .partner-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .how-grid { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* HOW IT WORKS STEPS */
  .how-steps { grid-template-columns: 1fr !important; gap: 0 !important; }
  .how-step { border-right: none !important; border-bottom: 1px solid var(--border); padding: 24px 0 !important; }
  .how-step:last-child { border-bottom: none; }
  .how-step:nth-child(2) { padding-left: 0 !important; }

  /* SCENARIO GRID */
  .scenario-grid { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* BENEFIT CARDS */
  .benefit-cards { display: flex !important; flex-direction: column !important; gap: 12px !important; }

  /* PARTNER STATS */
  .p-stats { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .partner-stats { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .p-stat { padding: 20px 16px !important; }

  /* WAITLIST FORMS — stack Vorname/Stadt vertically */
  #waitlist-fs-form [style*="display:flex"],
  #waitlist-fs-form [style*="display: flex"],
  #waitlist-fs-form-2 [style*="display:flex"],
  #waitlist-fs-form-2 [style*="display: flex"] { flex-direction: column !important; }

  /* LOC GRID */
  .loc-grid { grid-template-columns: 1fr 1fr !important; }

  /* FORM LAYOUT */
  .form-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .form-row { grid-template-columns: 1fr !important; }

  /* CTA STRIP */
  .cta-strip { flex-direction: column !important; gap: 20px; text-align: center; padding: 36px 20px !important; margin: 0 !important; }
  .cta-strip-text { font-size: 22px !important; }
  .cta-strip-actions { align-items: stretch !important; width: 100%; }
  .cta-strip-actions .btn-primary,
  .cta-strip-actions .btn-ghost { width: 100%; justify-content: center; }

  /* COOKIE BANNER */
  #cookie-banner { bottom: 12px; width: calc(100% - 24px); padding: 16px 18px; border-radius: 14px; gap: 12px; }

  /* FOOTER MOBILE */
  footer { padding: 40px 24px 28px; text-align: center; }
  footer > div:first-child {
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px;
  }
  footer > div:first-child > div:last-child {
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100%;
  }
  footer > div:first-child > div:last-child > span { display: none !important; }
  footer > div:first-child > div:last-child a[href^="mailto"] {
    padding: 12px 0;
    border-top: 1px solid rgba(var(--ink), 0.08);
    border-bottom: 1px solid rgba(var(--ink), 0.08);
    width: 100%;
    display: block !important;
    text-align: center;
    margin: 2px 0;
  }
  footer > div:last-child { text-align: center; }

  /* HERO MOBILE – kein riesiger Leerraum */
  .hero-section { min-height: auto !important; padding-bottom: 72px; }

  /* MODALS */
  .legal-modal { padding: 24px 18px !important; border-radius: 16px; max-height: 88vh; left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; }
  #modal-overlay { padding: 0; }

  /* TICKER – etwas ruhiger auf schmalen Fenstern.
     Ueber die Variable, nicht ueber animation-duration: sonst wuerde
     diese Regel die laengenabhaengige Dauer der Partner-Seite ueber-
     schreiben und das 32-teilige Band wieder rasen lassen. */
  .ticker-track { --ticker-dauer: 28s; }

  /* PARTNER SECTIONS with large gaps */
  [style*="gap:56px"] { gap: 32px !important; }
  [style*="gap: 56px"] { gap: 32px !important; }
  [style*="gap:80px"] { gap: 32px !important; }
  [style*="gap: 80px"] { gap: 32px !important; }
}

@media (max-width: 480px) {
  .hero-h1 { font-size: clamp(28px, 11vw, 40px) !important; letter-spacing: 0.5px !important; line-height: 1.18 !important; }
  .p-stats { grid-template-columns: 1fr 1fr !important; }
  .loc-grid { grid-template-columns: 1fr !important; }
  nav { padding: 0 12px; }
  .section-inner { padding: 40px 16px !important; }
  section { padding: 48px 16px !important; }
}


  /* ═══════════════════════════════════════════════════════════════════
     RUHIGER-PASS
     Behält Layout, Farben und Copy. Nimmt nur die Effekte raus, die
     unaufgefordert und dauerhaft in Bewegung sind oder aus jeder
     KI-Vorlage stammen. Steht absichtlich am Ende: überschreibt oben.
     ═══════════════════════════════════════════════════════════════════ */

  /* 1 — perspektivisches Neon-Gitter im Hero: der 80s-Synthwave-Look */
  .hero-grid { display: none; }

  /* 2 — Glow-Blob: bleibt als leiser Lichtschein, hört auf zu atmen */
  .hero-glow-blob {
    animation: none;
    width: 480px; height: 170px;
    background: radial-gradient(ellipse, rgba(30,156,228,0.07) 0%, rgba(0,210,106,0.04) 55%, transparent 72%);
    filter: blur(34px);
  }

  /* 3 — Laufband: bleibt ein Laufband.
        Im Ruhiger-Durchgang stand es hier still und umbrach in zwei Zeilen.
        Auf Wunsch laeuft es wieder von rechts nach links durch. Die Bewegung
        selbst steht in der Grundregel weiter oben; hier nur der Nachtrag,
        dass sie nicht mehr abgeschaltet wird. */

  /* 4 — Dauerbewegung aus: nichts schwebt, pumpt oder glüht von selbst.
         Einblend-Animationen beim Laden bleiben, die laufen einmal. */
  .station-wrap        { animation: fade-up 1s 0.7s both; }
  .product-showcase-img{ animation: fade-in 0.9s 0.2s both; }
  .hero-mascot-img     { animation: none; }
  .hero-mascot-shadow  { animation: none; }
  .cta-strip           { animation: none; }
  .scenario-solution   { animation: none; }
  .slot.on             { animation: none; }
  .scenario-card-tag-dot { animation: none; }
  .hero-eyebrow-dot    { animation: none; }
  /* der Live-Punkt darf blinken – er zeigt echten Zustand an */

  /* 5 — Reveal ohne Überschwingen: 1.04 Scale ist der klassische Bounce-Tell */
  @keyframes reveal-pop-up {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* 6 — Neon-Halo unter den Buttons wird ein normaler Schatten */
  .btn-primary:hover      { box-shadow: 0 6px 20px rgba(0,0,0,0.45); }
  .btn-primary.blue:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.45); }

  /* 7 — Systemeinstellung respektieren */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    .reveal, .reveal-left, .reveal-right, .reveal-pop { opacity: 1 !important; }
    /* Die 0.01ms oben wuerden das Laufband sofort auf -50 % schieben und
       dort einfrieren. Lieber sauber am Anfang stehen lassen. */
    .ticker-track { animation: none !important; transform: none !important; }
  }

  /* ── RUHIGER-PASS, TEIL 2 ────────────────────────────────────────
     Der UPGRADES-Block oben arbeitet mit !important, also hier auch.
     Die farbigen Karten-Schatten bleiben — die machen den Charakter.
     Raus kommt nur, was leuchtet oder von selbst wandert.            */

  /* Shimmer-Button: einfarbig statt 4-stufigem Verlauf, der beim
     Hovern durchs Bild fährt. Das ist der lauteste KI-Tell hier. */
  .btn-primary {
    background-image: none !important;
    background-color:var(--blue-text) !important;
    background-size: auto !important;
    transition: background-color .2s, box-shadow .2s, transform .15s !important;
  }
  .btn-primary:hover {
    background-color: #1682C4 !important;
    background-position: 0 0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
  }
  .btn-primary.blue { background-color:var(--green-text) !important; }
  .btn-primary.blue:hover {
    background-color: #00A854 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
  }

  /* Hero-Glow war auf 900x320px mit doppelter Deckkraft hochgezogen */
  .hero-glow-blob {
    width: 620px !important;
    height: 220px !important;
    background: radial-gradient(ellipse,
      rgba(30,156,228,0.10) 0%,
      rgba(0,210,106,0.06) 50%,
      transparent 72%) !important;
    filter: blur(40px) !important;
    animation: none !important;
  }

  /* Neonring um die Schrittzahlen wird dezent */
  .p-step-num { box-shadow: 0 0 12px rgba(0,210,106,0.16) !important; }

  /* Slot-Pulsieren im Automaten: die Slots leuchten konstant,
     statt im Sekundentakt an- und abzuschwellen */
  .slot.on { animation: none !important; }

  /* Die dunkle Ellipse war der Horizont für das Neon-Gitter. Ohne Gitter
     bleibt nur ein nackter Bogen quer durchs Bild übrig. */
  .hero-radial { display: none !important; }


  /* Nav lief auf schmalen Telefonen 2px über den Rand hinaus – der
     Sprachumschalter klebte an der Kante. */
  @media (max-width: 420px) {
    nav { padding: 0 10px !important; }
    .nav-logo { font-size: 16px; }
    .lang-btn { padding: 3px 5px !important; font-size: 9px !important; }
  }

  /* ── FARBE: BLAU + GRÜN TRAGEN, PINK AKZENTUIERT ──────────────────
     Blau ist aus dem Maskottchen gesampelt (#1E9CE4), Grün ist die
     Powerbank. Beide sind Nachbarn auf dem Farbkreis, der Verlauf
     dazwischen läuft durch Türkis statt durch Grau – deshalb
     funktioniert er ohne weißen Zwischenstop. Deckend bis zum Ende,
     kein Ausfaden: das war der eigentliche KI-Tell, nicht die Farbe. */
  .page .hero-h1 {
    background-image: linear-gradient(100deg, #1E9CE4 0%, #12C08A 55%, #00D26A 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    padding-bottom: 0.12em;
  }

  /* Pink hat genau eine Aufgabe: es markiert Events. Damit ist es ein
     Akzent mit Funktion und keine Dekoration. */
  #page-events .btn-primary {
    background-color:var(--pink-text) !important;
  }
  #page-events .btn-primary:hover {
    background-color: #DD006B !important;
  }
  #page-events .hero-eyebrow {
    border-color: rgba(255,0,128,0.28);
    background: linear-gradient(135deg, rgba(var(--ink), 0.04), rgba(255,0,128,0.07));
  }
  #page-events .hero-eyebrow-dot,
  #page-events .trust-dot,
  #page-events .ticker-dot { background: var(--pink); }
  #page-events .section-label,
  #page-events .section-title em { color:var(--pink-text); }


  /* ═══════════════════════════════════════════════════════════════════
     HELL — mit dunklen Bändern
     Die Seite ist weiß. Einzelne Sektionen bekommen class="band" und
     kippen damit --ink/--fg/--surf; ihr gesamter Inhalt färbt sich um,
     ohne dass eine einzige Komponente davon wissen muss.
     ═══════════════════════════════════════════════════════════════════ */

  html, body { background: var(--surf); color: var(--fg); }

  .band, section.band[style] {
    --ink: 255, 255, 255;
    --fg: #FFFFFF;
    --surf: #0D1017;
    --surf-rgb: 13, 16, 23;
    background: var(--surf) !important;
    /* color muss hier neu gesetzt werden: geerbtes color trägt den beim
       Elternteil BERECHNETEN Wert, es wertet var(--fg) nicht neu aus. */
    color: var(--fg);

    /* Und dasselbe für jede abgeleitete Variable: eine auf :root
       deklarierte Variable, die var(--ink) enthält, löst diese Referenz
       bereits bei :root auf. Der helle Wert wäre sonst eingebacken. */
    --bg: var(--surf);
    --bg-card: rgba(var(--ink), 0.05);
    --bg-card-hover: rgba(var(--ink), 0.09);
    --muted: rgba(var(--ink), 0.60);
    --border: rgba(var(--ink), 0.12);
  }
  /* Ein dunkles Band braucht mehr Luft, sonst klebt es an den Nachbarn */
  section.band { padding-top: clamp(64px, 8vw, 108px); padding-bottom: clamp(64px, 8vw, 108px); }

  /* ── Kontrast: Grün ist auf Weiß zu hell für Text ──
     Auf dunklem Grund darf es wieder das kräftige Produktgrün sein. */
  /* Jede Markenfarbe braucht zwei Fassungen: die kräftige für Flächen und
     große Schrift, eine dunklere für Text und für Flächen, die weißen Text
     tragen. Die Werte sind gerechnet, nicht geschätzt – alle drei liegen
     bei 4,5:1 gegen Weiß, damit sie beides können.
       Grün #00D26A → #008845 · Blau #1E9CE4 → #187DB6 · Pink #FF0080 → #E70074
     Große Displaytexte ab 24px dürfen die 3:1-Fassung nehmen. */
  :root {
    --green-text: #008845;  --green-lg: #00AB56;
    --blue-text:  #187DB6;  --blue-lg:  #1E9CE4;
    --pink-text:  #E70074;
  }
  /* Auf dunklem Grund gilt das Gegenteil: dort trägt die kräftige Fassung. */
  .band {
    --green-text: #2BE68F;  --green-lg: #00D26A;
    --blue-text:  #6CC4F2;  --blue-lg:  #1E9CE4;
    --pink-text:  #FF4D9E;
  }

  /* Kleine Auszeichnungen: dunklere Fassung */
  .section-label, .section-tag, .step-num, .scenario-card-tag,
  .p-stat-label, .footer-col-title { color: var(--blue-text) !important; }
  #page-events .section-label, #page-events .section-tag,
  #page-events .step-num, #page-events .scenario-card-tag { color: var(--pink-text) !important; }

  /* Große Displaytexte: 3:1 genügt, hier darf es kräftig bleiben */
  .section-title em, .blue, em.blue, .p-stat-num, .hero-h1 em {
    color: var(--green-lg);
  }
  #page-partner .section-title em, #page-partner .blue { color: var(--blue-lg); }

  /* Flächen, die weißen Text tragen, brauchen die dunklere Fassung */
  .btn-primary, .form-submit, button.form-submit {
    background-color: #187DB6 !important;
  }
  .btn-primary:hover, .form-submit:hover { background-color: #13648F !important; }
  .btn-primary.blue { background-color: #008845 !important; }
  .btn-primary.blue:hover { background-color: #006E37 !important; }
  #page-events .btn-primary, #page-events .form-submit {
    background-color: #E70074 !important;
  }
  #page-events .btn-primary:hover, #page-events .form-submit:hover {
    background-color: #C2005F !important;
  }
  .nav-logo span { color: var(--blue-text); }

  /* ── Text auf gesättigten Flächen bleibt immer weiß ── */
  .btn-primary, .btn-primary:hover {
    color: #FFFFFF !important;
  }

  /* ── Nav: auf Weiß braucht sie eine Kante statt Transparenz ── */
  nav {
    background: rgba(255, 255, 255, 0.86);
    border-bottom: 1px solid rgba(17, 20, 26, 0.10);
  }
  nav.over-band { background: rgba(13, 16, 23, 0.86); border-bottom-color: rgba(255,255,255,0.10); }

  /* ── Hero: der Glow war für Schwarz gerechnet ── */
  .hero-glow-blob {
    background: radial-gradient(ellipse,
      rgba(30,156,228,0.13) 0%, rgba(0,210,106,0.09) 55%, transparent 72%) !important;
    filter: blur(48px) !important;
  }
  /* Hier stand ein drop-shadow auf den Produktbildern. Ein Schlagschatten
     folgt der Silhouette – und die Powerbank ist ein abgerundetes Rechteck,
     die Station ein Quader. Der Schatten war deshalb ein weiches graues
     Rechteck rund um jedes Bild, das auf dem weissen Grund als Kaestchen
     zu sehen war. Die Produkte stehen jetzt ohne jede Flaeche dahinter. */

  /* ── Karten: auf Weiß trägt ein Rahmen mehr als eine Aufhellung ── */
  .how-card, .loc-card, .cable-card, .device-card, .b-card, .p-stat,
  .scenario-card, .form-card, .step-card {
    border-color: rgba(17, 20, 26, 0.10);
  }
  .how-card:hover, .loc-card:hover, .cable-card:hover,
  .device-card:hover, .b-card:hover, .p-stat:hover {
    box-shadow: 0 12px 32px rgba(17, 20, 26, 0.09) !important;
  }
  .band .how-card, .band .loc-card, .band .cable-card,
  .band .device-card, .band .b-card, .band .p-stat {
    border-color: rgba(255, 255, 255, 0.12);
  }

  /* ── Formularfelder auf Weiß ── */
  input, select, textarea {
    background: rgba(17, 20, 26, 0.03) !important;
    border-color: rgba(17, 20, 26, 0.14) !important;
  }
  .band input, .band select, .band textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
  }
  option { background: #FFFFFF; color: #0D1017; }

  /* ── Laufband ── */
  .ticker-wrap { background: rgba(17, 20, 26, 0.025); }

  /* ── Cookie-Banner ── */
  #cookie-banner {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(17, 20, 26, 0.14) !important;
    box-shadow: 0 24px 70px rgba(17, 20, 26, 0.18) !important;
  }

  /* ── Legal-Modals ── */
  .legal-modal { background: #FFFFFF; }

  /* ═══════════════════════════════════════════════════════════════════
     HERO — Apple-Muster
     Alles auf einer Mittelachse: Zeile drüber, Headline, ein Satz,
     zwei Pill-Buttons, danach das Produkt. Keine 100vh-Bühne mehr, die
     den Inhalt nach unten drückt, und keine Bilder, die links und
     rechts am Text vorbeischweben.
     ═══════════════════════════════════════════════════════════════════ */

  .hero-section {
    display: block;
    text-align: center;
    min-height: 0;
    overflow: visible;
    padding-bottom: clamp(36px, 5vw, 72px);
    background:
      radial-gradient(120% 70% at 50% 0%, rgba(30,156,228,0.07) 0%, transparent 62%),
      linear-gradient(180deg, rgba(30,156,228,0.035) 0%, transparent 42%);
  }

  .hero-inner {
    max-width: 860px !important;
    padding: clamp(64px, 8.5vw, 116px) 24px clamp(28px, 3.5vw, 44px);
  }

  .hero-h1 {
    font-size: clamp(48px, 7.4vw, 84px) !important;
    letter-spacing: -0.035em !important;
    line-height: 1.05 !important;
    padding-bottom: 0.1em !important;
    margin-bottom: 0 !important;
  }

  .hero-sub {
    font-size: clamp(17px, 1.55vw, 21px);
    line-height: 1.5;
    max-width: 30ch;
    margin: 18px auto 30px;
    color: rgba(var(--ink), 0.68);
  }

  /* Pill-Buttons: einer gefüllt, einer als Kontur */
  .hero-cta-row .btn-primary,
  .hero-cta-row .btn-ghost {
    border-radius: 980px;
    padding: 13px 26px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .hero-cta-row .btn-ghost {
    background: transparent;
    border: 1px solid var(--blue-text);
    color: var(--blue-text);
  }
  .hero-cta-row .btn-ghost:hover {
    background: rgba(24, 125, 182, 0.07);
    border-color: var(--blue-text);
  }
  .band .hero-cta-row .btn-ghost { border-color: rgba(var(--ink), 0.4); color: var(--fg); }

  /* ── Produkte flankieren den Text, statt darunter zu stehen ──
     Die Bilder liegen im Quelltext HINTER .hero-inner. Statt sie wieder
     absolut zu positionieren (dann reservieren sie keinen Platz und
     schieben sich bei mittlerer Fensterbreite ueber die Schrift), wird
     der Hero eine Flex-Zeile und die linke Kachel per order nach vorn
     geholt. So teilen sich die drei Spalten den Raum wirklich auf. */
  .hero-section {
    display: flex;
    /* Die Grundregel weiter oben stellt den Hero auf column — ohne das
       hier stapeln sich Produkt, Text, Produkt untereinander. */
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 2vw, 40px);
  }
  .hero-product-left  { order: -1; }
  .hero-inner         { order: 0; }
  .hero-product-right { order: 1; }

  .hero-inner {
    flex: 0 1 620px;
    max-width: 620px !important;
    padding: clamp(56px, 7vw, 96px) 8px clamp(56px, 7vw, 96px);
  }

  /* relative statt static: beides holt die Kacheln aus der absoluten
     Positionierung der Grundregel zurueck in den Fluss, relative laesst
     aber zusaetzlich den z-index gelten. Den brauchen sie, weil
     .hero-bottom-fade (z-index 11) den unteren Rand des Hero in die
     Hintergrundfarbe ueberblendet – und genau dort stehen die Produkte.
     Auf dem Desktop blieben davon 3px Abstand, auf dem Telefon lagen sie
     komplett darin und verschwanden zur Haelfte im Weiss. */
  .hero-product-left,
  .hero-product-right {
    position: relative;
    z-index: 12;
    top: auto; left: auto; right: auto;
    margin: 0;
    flex: 0 1 auto;
    display: block;
    animation: fade-up 1s 0.35s both;
  }
  .hero-product-right { animation-delay: 0.5s; }

  /* Beide Dateien sind 800×800 mit transparentem Rand — die Kachel ist
     also quadratisch, das sichtbare Produkt kleiner als die Box:
     die Powerbank fuellt nur 38 % der Breite, die Station 40 %.
     Die Breite hier ist deshalb die Breite der KACHEL, nicht des Produkts;
     sichtbar wird davon rund ein Drittel. */
  .hero-product-left img,
  .hero-product-right img {
    width: clamp(210px, 25vw, 440px);
    height: auto;
    display: block;
  }

  .trust-row { justify-content: center; margin-top: clamp(22px, 2.6vw, 34px); }

  /* Ab hier ist neben dem Text kein Platz mehr: Produkte wandern unter
     die Schrift und stehen dort nebeneinander. */
  @media (max-width: 1000px) {
    .hero-section { flex-direction: row; flex-wrap: wrap; }
    .hero-inner { flex: 1 0 100%; max-width: 640px !important; margin: 0 auto;
                  padding-bottom: clamp(20px, 3vw, 32px); }
    .hero-product-left  { order: 1; }
    .hero-product-right { order: 2; }
    .hero-product-left img, .hero-product-right img { width: clamp(190px, 38vw, 340px); }

    /* Die Blende zum Ticker blendet var(--surf) in Transparenz. --surf ist
       #FFFFFF und der Seitenhintergrund ist ebenfalls #FFFFFF – der Verlauf
       ist also unsichtbar und hat hier nur die Produktbilder ueberdeckt,
       die in diesem Layout genau am unteren Rand des Hero stehen. */
    .hero-bottom-fade { display: none; }
  }
  @media (max-width: 640px) {
    .hero-sub { max-width: 26ch; }
    .hero-product-left img, .hero-product-right img { width: clamp(150px, 44vw, 240px); }
  }

  /* Die Bereichs-Umschaltung sind echte Links auf echte Dateien, keine
     Buttons mehr. Die alten Regeln kamen von <button> und brachten weder
     Unterstreichung noch Zeilenhöhe mit. */
  a  a
  /* Notausgang, wenn die Seite im Hintergrund geladen wurde und keine
     Animation laufen kann: alles sofort sichtbar, ohne Uebergang. */
  .no-anim .reveal, .no-anim .reveal-left,
  .no-anim .reveal-right, .no-anim .reveal-pop {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     NAV v2 — Textnavigation statt Segment-Umschalter

     Die alte Leiste war ein Segmented Control: drei Knoepfe in einer
     gerahmten Wanne, der aktive blau ausgefuellt. Das ist die Optik
     eines Schalters innerhalb einer Ansicht — hier fuehrt es aber auf
     drei eigenstaendige Seiten. Jetzt: normale Textlinks, der aktive
     durch Farbe und eine kurze Unterlaengenmarke gekennzeichnet.
     ══════════════════════════════════════════════════════════════════ */

  nav { gap: clamp(16px, 4vw, 56px); padding: 0 clamp(20px, 4vw, 48px); }

  /* ── Marke: Wortmarke und Slogan gestapelt statt nebeneinander ── */
  .nav-brand {
    display: flex; align-items: center; gap: 11px;
    text-decoration: none; color: inherit; flex: 0 0 auto;
  }
  .nav-brand:hover { text-decoration: none; }
  .nav-mascot { height: 34px; width: auto; }
  .nav-brand-copy { display: flex; flex-direction: column; gap: 1px; }
  .nav-logo {
    display: block;
    font-size: 19px; font-weight: 900; letter-spacing: -0.5px; line-height: 1.05;
  }
  .nav-slogan {
    display: block;
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2;
    /* 0.55 ergab auf Weiss nur 4.08:1 und fiel damit unter die Grenze */
    color: rgba(var(--ink), 0.64);
    /* Trennstrich und Einzug der alten Leiste zuruecknehmen */
    border-left: 0; padding-left: 0; margin-left: 0;
    white-space: nowrap;
  }

  /* ── Bereichslinks ── */
  .nav-links {
    display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px);
    flex: 1 1 auto; justify-content: center;
  }
  .nav-link {
    position: relative;
    font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em;
    color: rgba(var(--ink), 0.68);
    text-decoration: none; padding: 6px 0;
    transition: color .18s;
  }
  .nav-link:hover { color: var(--fg); text-decoration: none; }
  .nav-link.active { color: var(--blue-text); font-weight: 700; }
  .nav-link.active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
    height: 2px; border-radius: 2px; background: var(--blue-text);
  }

  /* ── Rechte Seite: Sprache, dann ein einzelner Handlungsknopf ── */
  .nav-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

  .lang-switch {
    display: flex; gap: 2px;
    background: rgba(var(--ink), 0.05);
    border: 1px solid rgba(var(--ink), 0.09);
    border-radius: 8px; padding: 3px;
  }
  .lang-btn {
    font-family: inherit; font-size: 11px; font-weight: 800; letter-spacing: .05em;
    padding: 4px 9px; border-radius: 6px; border: none; cursor: pointer;
    background: transparent; color: rgba(var(--ink), 0.62);
    transition: background .2s, color .2s;
  }
  .lang-btn.active { background: rgba(var(--ink), 0.12); color: var(--fg); }

  .nav-cta {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em;
    padding: 9px 20px; border-radius: 980px;
    background: var(--fg); color: var(--surf);
    text-decoration: none; white-space: nowrap;
    transition: opacity .18s, transform .18s;
  }
  .nav-cta:hover { text-decoration: none; opacity: .86; transform: translateY(-1px); }

  /* ── Ueber einem dunklen Band dreht die Leiste mit ──
     nav liegt ausserhalb der Baender, erbt deren --ink also nicht. */
  nav.over-band {
    --ink: 255, 255, 255;
    --fg: #FFFFFF;
    --surf: #0D1017;
    color: #FFFFFF;
  }
  nav.over-band .nav-link { color: rgba(255, 255, 255, 0.72); }
  nav.over-band .nav-link:hover { color: #FFFFFF; }
  nav.over-band .nav-link.active { color: #6CC4F2; }
  nav.over-band .nav-link.active::after { background: #6CC4F2; }
  nav.over-band .nav-logo span { color: #6CC4F2; }
  nav.over-band .nav-slogan em { color: #6CC4F2; }
  nav.over-band .nav-slogan em.blue { color: #2BE68F; }
  nav.over-band .nav-cta { background: #FFFFFF; color: #0D1017; }

  /* ── Enger werdende Fenster: erst der Slogan, dann der Knopf ── */
  @media (max-width: 1080px) {
    .nav-slogan { display: none; }
    .nav-links { gap: 20px; }
  }
  @media (max-width: 860px) {
    .nav-cta { display: none; }
  }
  @media (max-width: 620px) {
    /* Auf 375 px reichten die alten Werte nicht: die Leiste war randvoll,
       der Innenabstand wurde weggedrueckt und das Sprachfeld klebte an
       der Fensterkante. Deshalb hier alles eine Stufe kleiner. */
    nav { gap: 8px; padding: 0 14px; }
    .nav-brand { gap: 8px; }
    .nav-mascot { height: 24px; }
    .nav-logo { font-size: 15px; }
    .nav-link { font-size: 12.5px; }
    .nav-links { gap: 13px; }
    .lang-switch { padding: 2px; }
    .lang-btn { padding: 4px 6px; font-size: 10.5px; }
  }

  /* ── Trennzeichen in den grossen Kennzahlen ──
     .p-stat-num laeuft mit letter-spacing: -1.5px. Das ist fuer Ziffern
     richtig, presst aber Halbgeviertstrich, Schraegstrich und Kleiner-als
     an die Nachbarziffer ("8–48", "24/7", "<30" klebten sichtbar).
     letter-spacing wirkt nur NACH einem Zeichen — der Abstand davor muss
     deshalb ueber margin kommen. */
  .p-stat-num .num-sep {
    letter-spacing: 0;
    margin: 0 0.08em;
    font-weight: 800;
  }

  /* ══════════════════════════════════════════════════════════════════
     EINWILLIGUNG — beide Schaltflaechen sind absichtlich gleich

     "Akzeptieren" darf nicht auffaelliger sein als "Ablehnen": gleiche
     Groesse, gleiche Farbe, gleiches Gewicht, gleiche Form. flex: 1 1 0
     zwingt beide auf exakt dieselbe Breite, damit die Gleichwertigkeit
     nicht von der Laenge der Beschriftung abhaengt.
     ══════════════════════════════════════════════════════════════════ */
  .cookie-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .cookie-btn {
    flex: 1 1 0;
    min-width: 140px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: -0.01em;
    padding: 12px 24px;
    border-radius: 10px;
    border: 1.5px solid var(--blue-text);
    background: transparent;
    color: var(--blue-text);
    cursor: pointer;
    transition: background .18s;
  }
  .cookie-btn:hover { background: rgba(24, 125, 182, 0.08); }
  .cookie-btn:focus-visible { outline: 2px solid var(--blue-text); outline-offset: 2px; }

  /* ══════════════════════════════════════════════════════════════════
     FRAGEN & ANTWORTEN — aufklappbar

     Gebaut aus <details>/<summary>, nicht aus JavaScript. Das ist hier
     die Bedingung, nicht der Geschmack: der Antworttext muss auch ohne
     Klick und ohne JavaScript im ausgelieferten HTML stehen, sonst lesen
     ihn die Crawler der KI-Suchdienste nicht und das FAQPage-Schema
     verliert seine Deckung im sichtbaren Text. <details> erfuellt das,
     ein nachtraeglich per Skript eingefuegtes Panel nicht.

     Nebenbei gratis: Bedienung per Tastatur, korrekte Ansage im
     Screenreader, und Chrome klappt beim Suchen mit Strg+F automatisch
     auf.

     Eine Spalte statt zwei: in einem Raster wuerde das Aufklappen die
     ganze Zeile hochziehen und die Nachbarspalte mitspringen lassen.
     ══════════════════════════════════════════════════════════════════ */
  .faq-list {
    margin-top: 44px;
    max-width: 860px;
    border-top: 1px solid var(--border);
  }
  .faq-item { border-bottom: 1px solid var(--border); }

  .faq-item summary {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 22px 0;
    cursor: pointer;
    list-style: none;                 /* Standard-Dreieck weg (Firefox) */
    -webkit-tap-highlight-color: transparent;
  }
  .faq-item summary::-webkit-details-marker { display: none; }  /* Safari */
  .faq-item summary:focus-visible {
    outline: 2px solid var(--blue-text);
    outline-offset: 3px;
    border-radius: 6px;
  }

  .faq-q {
    flex: 1;
    font-size: 17px; font-weight: 800; letter-spacing: -0.3px;
    line-height: 1.35; color: var(--fg);
    transition: color .18s;
  }
  .faq-item summary:hover .faq-q { color: var(--blue-text); }

  /* Winkel aus zwei Rahmenkanten: zeigt zu, wenn geschlossen,
     und dreht beim Oeffnen nach oben. */
  .faq-item summary::after {
    content: '';
    flex: 0 0 auto;
    width: 8px; height: 8px;
    margin: 5px 2px 0 0;
    border-right: 2px solid var(--blue-text);
    border-bottom: 2px solid var(--blue-text);
    transform: rotate(45deg);
    transition: transform .28s cubic-bezier(.22,1,.36,1);
  }
  .faq-item[open] summary::after { transform: rotate(-135deg); }

  .faq-a {
    font-size: 14px; color: var(--muted); line-height: 1.7;
    padding-bottom: 24px;
    max-width: 68ch;
  }

  /* Hoehenuebergang. Ohne interpolate-size laesst sich auto nicht
     animieren – dann klappt es ohne Uebergang auf, was voellig in
     Ordnung ist. Deshalb Fortschritt statt Voraussetzung. */
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .faq-item::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size .3s cubic-bezier(.22,1,.36,1),
                  content-visibility .3s allow-discrete;
    }
    .faq-item[open]::details-content { block-size: auto; }
  }
  @media (prefers-reduced-motion: reduce) {
    .faq-item::details-content,
    .faq-item summary::after { transition: none; }
  }

  @media (max-width: 860px) {
    .faq-item summary { padding: 20px 0; gap: 16px; }
    .faq-q { font-size: 16px; }
  }