:root{
  --bg:#ffffff;
  --card:#f7fafc;
  --text:#0b0d0f;
  --muted:#5b6572;
  --line:#e5e7eb;
  --brand:#06b6d4;
  --brand-2:#22d3ee;
  --radius-xl:20px;
  --shadow:0 10px 30px rgba(0,0,0,.06);

  /* Pille einheitlich */
   /* vorhandene Farben/Radius/Shadow sind oben schon definiert – diese ergänzen wir: */
  --pill-bg: rgba(255,255,255,.65);
  --pill-text: #0f172a;
  --pill-accent: var(--brand);
  --pill-shadow: 0 8px 30px rgba(2, 8, 23, .08);
  --pill-radius: 9999px;
  --pill-z: 9999;
  --badge-h: 44px;

  /* Größen (können seitenweit angepasst werden) */
  --pill-h: 44px;     /* Button-/Leistenhöhe (Desktop) */
  --pill-pad-y: 8px;  /* vertikale Innenabstände */
  --pill-pad-x: 12px; /* horizontale Innenabstände */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background: var(--bg); color:var(--text);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:inherit}
.container{max-width:1100px; margin-inline:auto; padding:0 20px}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.2rem; border-radius:12px; border:1px solid var(--line);
  color:var(--text); text-decoration:none; font-weight:600;
  transition:transform .15s ease, border-color .2s, background .2s;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0));
  backdrop-filter: blur(6px);
}
.btn:hover{transform:translateY(-1px); border-color:#cfd5dd}
.btn-primary{
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  color:#001016; border-color:transparent;
  box-shadow: 0 12px 28px rgba(6,182,212,.25);
}
.btn-primary:hover{filter:brightness(1.02)}
.badge{
  display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .6rem; border:1px solid var(--line);
  border-radius:999px; color:var(--muted); font-size:.85rem; background: rgba(6,182,212,.08)
}

/* Layout + Spacing */
.grid{display:grid; gap:28px}              /* ++ mehr Abstand in Grids */
.card{
  display:flex; flex-direction:column;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  padding:28px;            /* + */
  box-shadow:var(--shadow);
}
.accent{ color: var(--brand) }
.muted{ color: var(--muted) }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

section{ padding: 72px 0 }                /* ++ mehr Abstand zwischen Blöcken */
h1{ font-size: clamp(2rem, 4.8vw, 3.2rem); line-height:1.1; margin: 0 0 18px; letter-spacing:-.02em; }
h2{ font-size: clamp(1.4rem, 3.2vw, 2rem); margin:0 0 10px }
.sub{ color: var(--muted); margin:0 0 18px }

/* Home FAQ */
.home-faq .faq-header{
  max-width: 560px;
  margin-bottom: clamp(24px, 5vw, 36px);
}
.home-faq .faq-grid{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.home-faq .faq-item h3{
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.1rem;
}
.home-faq .faq-item p{
  margin: 0;
  color: var(--muted);
}
.home-faq .faq-item a{
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}
.home-faq .faq-item a:hover{
  text-decoration: underline;
}

/* Header / Nav */
.site-header{
  position:sticky; top:0; z-index:10; backdrop-filter: saturate(140%) blur(8px);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.6));
  border-bottom:1px solid var(--line)
}
.nav{
  display:flex;
  align-items:flex-end;           /* <-- unten bündig */
  justify-content:space-between;
  padding:14px 0;
}

.footer-made {
  font-size: 0.9rem;
  color: #666;
  margin: 1px 0; /* etwas Abstand über © */
}

.logo{
  display:flex;
  align-items:flex-end;
}
.logo img{
  display:block;
  height:80px;     /* gleiche visuelle Höhe wie deine Buttons; bei Bedarf 32–36 testen */
  width:auto;
  vertical-align:bottom;
  margin-bottom:-2px; /* feiner optischer Ausgleich, ggf. 0 bis -4px justieren */
}


/* Dropdown (Rechtliches) */
.dropdown{ position:relative; }
.dropdown-btn {
  all: unset;                  /* entfernt alle Standard-Button-Styles */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .85rem 1.2rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 600;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0));
  backdrop-filter: blur(6px);
  transition: transform .15s ease, border-color .2s, background .2s;
}

.dropdown-btn:hover {
  transform: translateY(-1px);
  border-color: #cfd5dd;
}
.dropdown-menu{
  position:absolute; top:110%; left:0;
  display:none; min-width:240px; padding:8px;
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.dropdown-menu a{
  display:flex; align-items:center; justify-content:space-between;
  padding:.65rem .8rem; border-radius:10px; border:1px solid transparent; text-decoration:none;
}
.dropdown-menu a:hover{ background: #f3fbfd; border-color:#d8f3f8 }
.dropdown[aria-expanded="true"] .dropdown-menu{ display:block; }

/* Hero */
.hero{ padding: 72px 0 44px; }            /* ++ */
.hero-wrap{ display:grid; gap:32px; grid-template-columns: 1.1fr .9fr; align-items:center; }
.mock{ aspect-ratio: 3/4; border-radius: 24px; border:1px solid var(--line); overflow:hidden; position:relative; background: linear-gradient(180deg, #ffffff, #f2f7fa); box-shadow: 0 30px 60px rgba(0,0,0,.08), 0 0 0 8px rgba(0,0,0,.02) inset; }
.mock::after{ content:""; position:absolute; inset:16px; border-radius: 18px; border:1px solid var(--line); background: repeating-linear-gradient(180deg, transparent, transparent 16px, rgba(6,182,212,.12) 16px, rgba(6,182,212,.12) 17px); }

/* Features */
.features{ grid-template-columns: repeat(3, 1fr) }
.feat{ display:flex; gap:14px }
.icon{ width:34px; height:34px; border-radius:10px; display:inline-grid; place-items:center; background: radial-gradient(120% 120% at 0% 0%, rgba(6,182,212,.25), rgba(6,182,212,.08)); border:1px solid var(--line); }
.feat h3{ margin:.2rem 0 .2rem; font-size:1.05rem }
.feat p{ margin:0; color:var(--muted); font-size:.98rem }

/* Steps */
.steps{ grid-template-columns: repeat(3, 1fr) }
.step-num{ width:28px; height:28px; border-radius:999px; display:inline-grid; place-items:center; font-size:.9rem; font-weight:700; background: var(--brand); color:#002026; box-shadow: 0 8px 16px rgba(6,182,212,.25) }

.testimonials {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
}
.testimonial {
  scroll-snap-align: start;
  display:flex; flex-direction:column; gap:10px;
}
.testimonial .who { display:flex; align-items:center; gap:10px; }
.avatar {
  width:36px; height:36px; border-radius:50%; background:#dff7fc; display:inline-block;
}
.quote { font-size: .98rem; }

/* CTA Bar */
.cta{ display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; border:1px solid var(--line); border-radius: var(--radius-xl); padding:22px 22px; background: linear-gradient(180deg, rgba(6,182,212,.12), rgba(6,182,212,.04)); }

/* Footer */

.footer-brand{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:16px;
}
.footer-logo img{
  width:140px;
  height:auto;
  display:block;
}
.footer-tagline{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
  max-width:320px;
}
.footer-address{
  font-style:normal;
  line-height:1.5;
  color:var(--muted);
  margin:0 0 18px;
}
.footer-address a{
  color:inherit;
  font-weight:600;
  text-decoration:underline;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-nav {
  display: flex;
  gap: 20px;
}



.footer-nav a:hover {
  color: var(--brand);
}

/* --- Cookie Banner / Modal --- */
.cmp-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(2px);
  z-index: 9998;
}
.cmp {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 20px; width: min(100% - 24px, 880px);
  z-index: 9999;
}
.cmp-inner {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: 20px;
}
.cmp h2 { margin: 0 0 6px; font-size: 1.1rem; }
.cmp-desc { margin: 0 0 12px; color: var(--muted); font-size: .95rem; }
.cmp-form { display: grid; gap: 12px; }
.cmp-group { margin: 0; padding: 0; border: 0; }
.cmp-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px; border-radius: 10px; }
.cmp-row:hover { background: #f7fafc; }
.cmp-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.link-like {
  all: unset; cursor: pointer; color: var(--muted); text-decoration: underline;
  margin-left: 12px; font-size: .95rem;
}

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.store-btn .store-icon {
  height: 40px; /* anpassen nach Wunsch */
  width: auto;
  display: block;
}

/* Store-Badges als eigenständige, klickbare Kacheln */
/* ---- Store-Badges "nackt" (nur Bild klickbar) + Button-Höhengleichheit ---- */

.store-link{
  display: inline-block;
  line-height: 0;           /* kein Extra-Whitespace um das Bild */
  vertical-align: middle;   /* Ausrichtung neben dem Button */
  text-decoration: none;    /* keine Unterstreichung */
  background: none;         /* WICHTIG: kein Button-Look */
  border: 0;
  padding: 0;
  box-shadow: none;
}

.store-badge{
  display: block;
  height: var(--badge-h);
  width: auto;
}

/* "Jetzt starten" exakt so hoch wie die Badges */
.btn.btn-equal{
  height: var(--badge-h);     /* gleiche Gesamthöhe */
  padding: 0 18px;            /* vertikal 0, nur seitlich */
  display: inline-flex;
  align-items: center;
  line-height: 1;
  vertical-align: middle;
}


.logo { text-decoration: none; }
.logo:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
  border-radius: 8px;
  text-decoration: none;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Standard: zwei Spalten */
  gap: 24px;
  align-items: start;
}

.footer-icons {
  display: flex;
  gap: 16px;
}

.footer-icons a {
  color: var(--muted);
  transition: color .2s ease;
  display: inline-flex;
}

.footer-icons a:hover {
  color: var(--brand);
}

.footer-icons svg {
  width: 22px;
  height: 22px;
}

.footer-icons img {
  width: 20px;   /* oder 22px, 24px je nach Wunsch */
  height: 20px;  /* Höhe passend fixieren */
  display: block;
  filter: grayscale(100%) brightness(60%);
  transition: filter .2s ease;
}

.footer-icons a:hover img {
  filter: none; /* beim Hover volle Farbe */
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* oben bündig */
  flex-wrap: wrap;
  gap: 16px;
}

.footer-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.footer-nav {
  display: flex;
  gap: 20px;
}

.footer-nav a {
  color: var(--muted);
  text-decoration: none;
  transition: color .2s ease;
}

.footer-nav a:hover {
  color: var(--brand);
}

.footer-copy {
  font-size: .9rem;
  color: var(--muted);
}

.footer-icons {
  display: flex;
  gap: 16px;
}

.footer-icons img {
  width: 20px;
  height: 20px;
  display: block;
  filter: grayscale(100%) brightness(60%);
  transition: filter .2s ease;
}

.footer-icons a:hover img {
  filter: none;
}


@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr; /* Ab Tablet runter: eine Spalte */
  }
}


@media (max-width: 640px){
  .cmp { left: 12px; right: 12px; transform: none; width: auto; }
}

/* Sichtbarer Fokus für Tastaturnavigation */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}


/* Responsive */
@media (max-width: 940px){
  .hero-wrap{ grid-template-columns: 1fr; }
  .mock{ order:-1; height: 420px }
  .features, .steps{ grid-template-columns: 1fr; }
}




/* Optional: leichte „Scrolled“-State für subtilen Übergang */
.pillbar.is-scrolled {
  box-shadow: 0 10px 40px rgba(2, 8, 23, .12);
  transform: translateX(-50%) translateY(0); /* Platzhalter, falls du animierst */
}





footer {
  background-color: #0a2540;   /* tiefes Dunkelblau */
  color: #fff;                 /* weiße Schrift */
  padding: 40px 0;
}

footer a {
  color: #fff;
  text-decoration: none;
}
footer a:hover,
footer a:focus-visible {
  text-decoration: underline;
}

/* Icons invertieren */
footer .footer-icons img {
  filter: invert(1);
  width: 24px;
  height: 24px;
}

/* Footer-Navi */
.footer-nav a {
  margin-right: 0;   /* kein eigener Außenabstand */
  color: #fff;
  font-weight: 500;
}

/* kleine Helfer */
.footer-made,
.footer-copy {
  margin-top: 8px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
}



/* === FINAL OVERRIDES (keep at end) === */

/* Footer dunkelblau + weiße Typo, Icons invertiert */
footer {
  background-color: #0a2540 !important;
  color: #fff !important;
  border-top: none !important;
  padding: 40px 0;
}
footer a {
  color: #fff !important;
  text-decoration: none;
}
footer a:hover,
footer a:focus-visible {
  text-decoration: underline;
}
/* alle früheren Icon-Filter neutralisieren */
footer .footer-icons img {
  filter: invert(1) brightness(1.05) !important;
  width: 24px; height: 24px;
}
/* dezenter Meta-Ton */
.footer-made, .footer-copy {
  color: rgba(255,255,255,0.85) !important;
}

/* sichtbarer Fokus auf dunklem Grund */
footer a:focus-visible {
  outline: 2px solid #22d3ee; /* dein brand-2 */
  outline-offset: 3px;
  border-radius: 6px;
}

/* Platz für Pille */
body{ padding-top: calc(var(--pill-h) + 2*var(--pill-pad-y) + 28px + env(safe-area-inset-top,0px)); }

/* Sticky Pille – EXAKT wie im Dokument */
.pillbar{
  position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
  z-index: var(--pill-z);
  width: min(92%, 600px); padding: 8px 12px;      /* feste Werte wie im Index */
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  border-radius: var(--pill-radius);
  border: 1px solid rgba(255,255,255,.25);
  background: var(--pill-bg);
  color: var(--pill-text);
  backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: var(--pill-shadow);
  animation: pillIn .6s cubic-bezier(.2,.65,.2,1) .2s both;

  /* lokale Größen wie im Index */
  --pill-h: 44px;
  --pill-pad-y: 8px;
  min-height: calc(var(--pill-h) + 2*var(--pill-pad-y));
}
.pill-logo{ display:flex; align-items:center; padding: 0 6px; border-radius:9999px; text-decoration:none; height: var(--pill-h); }
.pill-logo img{ height: calc((var(--pill-h) - 8px) * 1.5); width:auto; display:block; }
.pill-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pill-link{ text-decoration:none; color:inherit; padding:0 10px; height:var(--pill-h); display:inline-flex; align-items:center; border-radius:9999px; border:1px solid transparent; }
.pill-link:hover, .pill-link:focus-visible{ border-color: rgba(15,23,42,.12); outline:none; }
.pill-btn{ text-decoration:none; padding:0 16px; height:var(--pill-h); display:inline-flex; align-items:center; border-radius:9999px; background: var(--pill-accent); color:#fff; font-weight:600; border:1px solid transparent; line-height:1; transition: transform .15s ease, filter .2s ease; }
.pill-btn:hover{ transform: translateY(-2px); filter: brightness(.97); }
@keyframes pillIn{ from{ transform: translateX(-50%) translateY(-8px); opacity: 0; } to{ transform: translateX(-50%) translateY(0); opacity: 1; } }
@media (max-width: 420px){ .pillbar{ --pill-h:38px; --pill-pad-y:6px; gap:6px; padding:6px 8px } .pill-link{ display:none } }



    :root{
      --bg:#ffffff;
      --card:#f7fafc;
      --text:#0b0d0f;
      --muted:#5b6572;
      --line:#e5e7eb;
      --brand:#06b6d4;
      --brand-2:#22d3ee;
      --radius-xl:20px;
      --shadow:0 10px 30px rgba(0,0,0,.06);
      --extra-gap: clamp(0px, 0.8vw, 10px);

      /* Pill */
      --pill-bg: rgba(255,255,255,.65);
      --pill-text: #0f172a;
      --pill-accent: var(--brand);
      --pill-shadow: 0 8px 30px rgba(2, 8, 23, .08);
      --pill-radius: 9999px;
      --pill-z: 9999;

      /* Badgesize responsiv */
      --badge-h: clamp(40px, 5vw, 48px);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    img{max-width:100%;height:auto;display:block}
    body{
      margin:0; color:var(--text); font:16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;

      /* sanfter Brand-Background */
      background:
        radial-gradient(80% 60% at 20% 0%, rgba(6,182,212,.08), transparent 60%),
        linear-gradient(180deg, #fff, #f8fbfd 60%);
      /* Platz für Pille (responsiv berechnet) */
      padding-top: calc(var(--pill-h, 44px) + 2*var(--pill-pad-y, 8px) + 28px + env(safe-area-inset-top, 0px));
    }
    a{color:inherit}
    .container{max-width:1100px; margin-inline:auto; padding-inline: clamp(32px, 8vw, 72px)}

    /* Typo */
    h1,h2,h3{ letter-spacing:-.02em; margin:0 0 .6rem }
    h1{ font-size: clamp(2rem, 4.8vw, 3.2rem); line-height:1.1; }
    h2{ font-size: clamp(1.4rem, 3.2vw, 2rem); }
    .sub{ color: var(--muted); margin:0 0 18px }
    .accent{ color: var(--brand) }
    .muted{ color: var(--muted) }
    .sr-only{ position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

    /* Layout + Spacing */
    section{ padding: clamp(48px, 8vw, 72px) 0 }
    .grid{display:grid; gap:28px}
    @media (max-width:640px){ .grid{ gap:22px } }

    .card{
      display:flex; flex-direction:column; gap:10px;
      background:var(--card); border:1px solid var(--line); border-radius:var(--radius-xl); padding: clamp(16px, 3vw, 28px); box-shadow:var(--shadow);
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .card:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px rgba(2,8,23,.12); }

    /* Buttons */
    .btn{
      display:inline-flex; align-items:center; gap:.6rem;
      padding:.85rem 1.2rem; border-radius:12px; border:1px solid var(--line);
      color:var(--text); text-decoration:none; font-weight:600;
      background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0));
      backdrop-filter: blur(6px);
      transform: translateZ(0);
      transition: transform .15s ease, border-color .2s, background .2s, box-shadow .2s ease, filter .2s ease;
    }
    .btn:hover{ transform:translateY(-2px); border-color:#cfd5dd }
    .btn:active{ transform:translateY(0); filter:brightness(.98) }
    .btn-primary{
      background: linear-gradient(180deg, var(--brand), var(--brand-2));
      color:#001016; border-color:transparent;
      box-shadow: 0 12px 28px rgba(6,182,212,.25);
    }
    .btn-primary:hover{ filter:brightness(1.02) }

    .btn:focus-visible,
    .pill-link:focus-visible,
    .pill-btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

    .badge{ display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .6rem; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:.85rem; background: rgba(6,182,212,.08) }

    /* Hero */
    .hero{ padding: 72px 0 44px; }
.hero.container{ padding-inline: clamp(40px, 9vw, 96px); }
    .hero-wrap{ display:grid; gap:32px; grid-template-columns: 1.1fr .9fr; align-items:center; }
    @media (max-width: 960px){ .hero-wrap{ grid-template-columns: 1fr; } }
    .hero-wrap .mock{ order: 2; }
    .hero-wrap > div:first-child{ order: 1; }

    .mock{ aspect-ratio: 3/4; border-radius: 28px; overflow:hidden; position:relative; background: linear-gradient(180deg, #f7fbff, #eef7fb); box-shadow: 0 40px 80px rgba(2,8,23,.12), 0 0 0 1px rgba(2,8,23,.06) inset; }
    @media (max-width: 640px){ .mock{ aspect-ratio: 10/16; border-radius: 20px; } }

    /* Features / Steps */
    .feat{ display:flex; gap:14px }
    .icon{ width:34px; height:34px; border-radius:10px; display:inline-grid; place-items:center; background: radial-gradient(120% 120% at 0% 0%, rgba(6,182,212,.25), rgba(6,182,212,.08)); border:1px solid var(--line); }
    .feat h3{ margin:.2rem 0 .2rem; font-size:1.05rem }
    .feat p{ margin:0; color:var(--muted); font-size:.98rem }
    .features, .steps{ display:grid; gap:28px; grid-template-columns:repeat(3,1fr) }
    @media (max-width: 1024px){ .features, .steps{ grid-template-columns: repeat(2,1fr); } }
    @media (max-width: 640px){ .features, .steps{ grid-template-columns: 1fr; } }
    .step-num{ width:28px; height:28px; border-radius:999px; display:inline-grid; place-items:center; font-size:.9rem; font-weight:700; background: var(--brand); color:#002026; box-shadow: 0 8px 16px rgba(6,182,212,.25) }

    /* Testimonials */
    .testimonials { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
    .testimonial { scroll-snap-align: start; display:flex; flex-direction:column; gap:10px; }
    .testimonial .who { display:flex; align-items:center; gap:10px; }
    .avatar { width:36px; height:36px; border-radius:50%; background:#dff7fc; display:inline-block; }
    .quote { font-size: .98rem; margin: 0; line-height: 1.45; }

    /* CTA Bar */
    .cta{ display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; border:1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(16px, 3.2vw, 24px); background: linear-gradient(180deg, rgba(6,182,212,.12), rgba(6,182,212,.04)); }
    .cta .store-link{ width: auto; } /* nie 100%, damit sie nicht umbrechen */

    /* Extra Abstände */
    #stimmen { margin-top: var(--extra-gap); }
    #so-funktionierts { margin-top: calc(var(--extra-gap) + 4px); }
    #download { margin-top: calc(var(--extra-gap) + 6px); margin-bottom: 100px; }

    /* Store Badges */
    .store-link{ display:inline-block; line-height:0; vertical-align:middle; text-decoration:none; background:none; border:0; padding:0; box-shadow:none; outline:none; border-radius:12px; }
    .store-link:focus-visible { outline:2px solid var(--brand); outline-offset:4px; }
    .store-badge{ display:block; height:var(--badge-h); width:auto; transition: transform .15s ease; }
    .store-link:hover .store-badge{ transform: translateY(-1px); }

    /* Sticky Pille */
    .pillbar{
      position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
      z-index: var(--pill-z);
      width: min(92%, 600px); padding: 8px 12px;
      display:flex; justify-content:space-between; align-items:center; gap:12px;
      border-radius: var(--pill-radius);
      border: 1px solid rgba(255,255,255,.25);
      background: var(--pill-bg);
      color: var(--pill-text);
      backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
      box-shadow: var(--pill-shadow);
      animation: pillIn .6s cubic-bezier(.2,.65,.2,1) .2s both;

      /* Größen-Variablen für Body-Offset */
      --pill-h: 44px;      /* Button-Höhe */
      --pill-pad-y: 8px;   /* vertikale Innenabstände */
      min-height: calc(var(--pill-h) + 2*var(--pill-pad-y));
    }
    .pill-logo{ display:flex; align-items:center; padding: 0 6px; border-radius:9999px; text-decoration:none; height: var(--pill-h); }
    .pill-logo img {
  height: calc((var(--pill-h) - 8px) * 1.5);
  width: auto;
}
    .pill-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
    .pill-link{ text-decoration:none; color:inherit; padding: 0 10px; height: var(--pill-h); display:inline-flex; align-items:center; border-radius:9999px; border:1px solid transparent; }
    .pill-link:hover, .pill-link:focus-visible{ border-color: rgba(15,23,42,.12); outline:none; }
    .pill-btn{ text-decoration:none; padding:0 16px; height: var(--pill-h); display:inline-flex; align-items:center; border-radius:9999px; background: var(--pill-accent); color:#fff; font-weight:600; border:1px solid transparent; line-height:1; transition: transform .15s ease, filter .2s ease; }
    .pill-btn:hover{ transform: translateY(-2px); filter: brightness(.97); }
    @media (max-width: 420px){ .pillbar{ --pill-h: 38px; --pill-pad-y: 6px; gap:6px; padding:6px 8px } .pill-link{ display:none } }

    @keyframes pillIn{ from{ transform: translateX(-50%) translateY(-8px); opacity: 0; } to{ transform: translateX(-50%) translateY(0);   opacity: 1; } }

    /* Footer (dunkel, modern) */
    footer{ background:#0a2540; color:#fff; padding: 40px 0; }
    .footer-inner{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:16px; }
    .footer-nav{ display:flex; gap:20px; flex-wrap:wrap; }
    .footer-nav a{ color:#fff; text-decoration:none; font-weight:500; }
    .footer-nav a:hover, .footer-nav a:focus-visible{ text-decoration:underline; }
    .footer-made, .footer-copy{ margin-top:8px; font-size:.9rem; color: rgba(255,255,255,.85); }
    .footer-icons{ display:flex; gap:16px; }
    .footer-icons a{ width:40px; height:40px; border-radius:9999px; display:inline-grid; place-items:center; background:rgba(255,255,255,.08); transition: background .2s ease, transform .15s ease; }
    .footer-icons a:hover{ background:rgba(255,255,255,.16); transform: translateY(-1px); }
    .footer-icons img{ width:22px; height:22px; display:block; filter: invert(1) brightness(1.05); }

    .footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;  /* wichtig, falls wenig Platz */
  gap: 16px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0px 20px; 
  max-width: 600px; /* optional, damit nur die Links umbrechen */
}

.footer-nav-break {
  flex-basis: 100%;
  height: 0;       /* kein zusätzlicher vertikaler Block */
  margin: 0;       /* sicherheitshalber */
  padding: 0;
}


    /* Scroll-Progress */
    .scroll-progress{ position:fixed; inset:0 auto auto 0; height:3px; width:0%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); box-shadow: 0 6px 16px rgba(6,182,212,.35); z-index:9998; border-radius:0 3px 3px 0; }

    /* Reveal Animations */
    .reveal{ opacity: 0; transform: translateY(12px) scale(.98); filter: blur(6px); transition: opacity .6s cubic-bezier(.2,.65,.2,1), transform .6s cubic-bezier(.2,.65,.2,1), filter .6s ease; will-change: opacity, transform, filter; }
    .reveal.in-view{ opacity: 1; transform: none; filter: none; }
    .reveal.slow{ transition-duration: .9s }

    @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; } .pillbar{ animation:none !important; } .scroll-progress{ display:none } }

    /* ---------- DOWNLOAD-MODAL ---------- */
    .dl-backdrop{ position:fixed; inset:0; background:rgba(2,8,23,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index:10000; opacity:0; pointer-events:none; transition:opacity .25s ease; }
    .dl-modal{ position:fixed; left:50%; top:50%; transform:translate(-50%,-48%) scale(.98); width:min(100% - 24px, 980px); z-index:10001; opacity:0; pointer-events:none; background:#0a2540; color:#fff; border:1px solid rgba(255,255,255,.12); border-radius:20px; box-shadow:0 30px 80px rgba(2,8,23,.35); transition: opacity .25s ease, transform .25s ease; }
    .dl-open .dl-backdrop{ opacity:1; pointer-events:auto; }
    .dl-open .dl-modal{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }

    .dl-inner{ padding: clamp(16px, 4vw, 24px); display:grid; grid-template-columns:1fr 1fr; gap:24px; }
    .dl-col{ background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center; }
    .dl-col h3{ margin:0; font-size:1.15rem; }
    .dl-col p{ margin:0; color:rgba(255,255,255,.8) }
    .dl-qr{ width:180px; height:auto; border-radius:12px; background:#fff; padding:8px; margin:4px 0 10px; box-shadow:0 8px 20px rgba(0,0,0,.25); }
    .dl-actions .btn-store{ display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border-radius:999px; font-weight:700; text-decoration:none; background:#fff; color:#0a2540; border:1px solid rgba(255,255,255,.2); transition: filter .15s ease, transform .15s ease; }
    .dl-actions .btn-store:hover{ filter:brightness(.96); transform:translateY(-1px); }
    .dl-close{ position:absolute; top:10px; right:10px; width:40px; height:40px; border-radius:9999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); color:#fff; display:grid; place-items:center; font-size:20px; cursor:pointer; transition: background .15s ease, transform .15s ease; }
    .dl-close:hover{ background:rgba(255,255,255,.14); transform:translateY(-1px); }
    @media (max-width:700px){ .dl-inner{ grid-template-columns:1fr; } .dl-qr{ width:160px; } }

    /* Scroll Cue */
    .scroll-cue{ position: fixed; left: 50%; bottom: clamp(14px, 3vh, 28px); transform: translateX(-50%); width: 44px; height: 44px; border-radius: 9999px; border: 1px solid rgba(15,23,42,.14); background: rgba(255,255,255,.9); backdrop-filter: blur(8px) saturate(160%); -webkit-backdrop-filter: blur(8px) saturate(160%); color: var(--brand); box-shadow: 0 8px 30px rgba(2,8,23,.12); display: grid; place-items: center; cursor: pointer; z-index: 9990; transition: opacity .25s ease, transform .25s ease, filter .2s ease; }
    .scroll-cue svg{ width:18px; height:18px; animation: arrowBounce 1.4s ease-in-out infinite; }
    @keyframes arrowBounce{ 0%,100%{ transform: translateY(0); opacity:.9 } 50%{ transform: translateY(6px); opacity:1 } }
    .scroll-cue::after{ content:""; position:absolute; inset:-2px; border-radius:inherit; box-shadow: 0 0 0 0 rgba(6,182,212,.35); animation: cueRing 2s ease-out infinite; pointer-events:none; }
    @keyframes cueRing{ to { box-shadow: 0 0 0 14px rgba(6,182,212,0); } }
    .scroll-cue.is-hidden, .dl-open .scroll-cue{ opacity:0; transform: translateX(-50%) translateY(8px); pointer-events:none; }
    @media (prefers-reduced-motion: reduce){ .scroll-cue::after, .scroll-cue svg{ animation:none !important; } }

    @media (max-width: 640px){
  footer .footer-inner{ flex-direction: column; align-items: left; gap:20px; }
  footer .footer-icons{ order:-1; }     /* Icons nach oben */
  footer .footer-left{ text-align:left; }
  footer .footer-nav{ justify-content:left; }
}



    /* Cookie Banner / Modal */
    .cmp-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); backdrop-filter: blur(2px); z-index: 9998; }
    .cmp { position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; width: min(100% - 24px, 880px); z-index: 9999; }
    .cmp-inner { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow); padding: clamp(16px, 4vw, 20px); }
    .cmp-desc { margin: 0 0 12px; color: var(--muted); font-size: .95rem; }
    .cmp-form { display: grid; gap: 12px; }
    .cmp-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px; border-radius: 10px; }
    .cmp-row:hover { background: #f7fafc; }
    .cmp-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
    .link-like { all: unset; cursor: pointer; color: var(--muted); text-decoration: underline; margin-left: 12px; font-size: .95rem; }
    @media (max-width: 640px){ .cmp { left: 12px; right: 12px; transform: none; width: auto; } }

    /* Testimonials kompakter */
    .testimonial.card{ padding: 20px 30px; }

    /* --- Steps: Mobile-Slider --- */
@media (max-width: 640px){
  #so-funktionierts .steps{
    /* von Spalten-Grid -> horizontale Rail */
    grid-template-columns: unset;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    gap: 16px;
    padding-bottom: 8px;
    scroll-padding-left: 0.01px; /* Safari Snap-Fix */
  }
  #so-funktionierts .steps::-webkit-scrollbar{ display:none; }
  #so-funktionierts .steps .card{
    scroll-snap-align: start;
    /* Hover-Animationen können Snap stören – auf Mobile neutralisieren */
    transition: box-shadow .2s ease;
  }
  #so-funktionierts .steps .card:hover{ transform:none; }

  /* Mobile Nav-Buttons anzeigen */
  .steps-nav{ display:flex; gap:8px; margin-top:8px; }
  .steps-nav .btn{ padding: .6rem .9rem; }
}
/* Auf Tablet/Desktop keine Buttons nötig */
@media (min-width: 641px){ .steps-nav{ display:none; } }

/* --- Testimonials: Mobile-Slider (<=640px) --- */
@media (max-width: 640px){
  #stimmen .testimonials{
    /* Sicherstellen, dass es eine horizontale Rail ist */
    grid-template-columns: unset;
    grid-auto-flow: column;
    grid-auto-columns: 86%;          /* 1 Card + „Peek“ */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;

    /* schönes Snap-Verhalten */
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0.01px;     /* Safari Snap-Fix */
    gap: 16px;
    padding-bottom: 8px;
  }
  #stimmen .testimonials::-webkit-scrollbar{ display:none; }
  #stimmen .testimonials .testimonial{ scroll-snap-align: start; }

  /* Hover-Effekt neutralisieren (stört Snap auf Mobile) */
  #stimmen .testimonials .card:hover{ transform:none; }
}

/* Auf größeren Screens die Pfeile ausblenden (optional) */
@media (min-width: 641px){
  .testimonials-nav{ display:none !important; }
}

/* kompaktere Unterabstände der Vorgänger-Sektionen */
#features,
#stimmen,
#so-funktionierts {
  padding-bottom: clamp(16px, 3vw, 28px);
}

 .hero-cta,
 #download .cta > div:last-child{
   display:flex;
   justify-content:flex-start;
   align-items:center;
   gap:10px;    /* im Hero ggf. 12px, hier OK */
   flex-wrap:nowrap;
 }

@media (max-width: 360px){ :root{ --badge-h: 32px; } }  /* vorher min 40px */
@media (max-width: 300px){
  :root{ --badge-h: 28px; }
  .hero-cta, #download .cta > div:last-child{ gap:8px; }
}

/* Hero: gleiche Abstände zwischen Badge, H1 und Sub */
.hero .hero-wrap > div:first-child{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;               /* gewünschter Abstand, z.B. 12px */
}

/* Margins der einzelnen Elemente in dieser Spalte neutralisieren */
.hero .hero-wrap > div:first-child .badge,
.hero .hero-wrap > div:first-child h1,
.hero .hero-wrap > div:first-child .sub{
  margin: 0;
}

/* optional: mobil etwas enger */
@media (max-width: 640px){
  .hero .hero-wrap > div:first-child{ gap: 4px; }
}


/* Hero: einheitlicher Abstand zwischen Badge, H1, Sub, Buttons, Hinweis */
.hero .hero-wrap > div:first-child{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px; /* hier den EINEN Abstand steuern */
}

/* Eigene Margins neutralisieren, damit nur 'gap' wirkt */
.hero .hero-wrap > div:first-child .badge,
.hero .hero-wrap > div:first-child h1,
.hero .hero-wrap > div:first-child .sub,
.hero .hero-wrap > div:first-child .hero-cta,
.hero .hero-wrap > div:first-child .muted{
  margin: 0;
}

/* optional: mobil noch etwas enger */
@media (max-width: 640px){
  .hero .hero-wrap > div:first-child{ gap: 10px; }
}

/* HERO Mock – responsive, mit Obergrenze */
/* === HERO Mock auf ~50% des 720x1440-Originals === */
.hero .mock::after{
  content: none !important;   /* Gitter/Frame aus */
}

.hero .mock{
  width: 360px;           /* 50% von 720px */
  aspect-ratio: 9 / 17.2;   /* oder 9 / 18 = 1:2, dein Bild ist 720x1440 => 1:2 */
  /* optional: statt fixer Breite etwas flexibler */
  /* width: min(360px, 42vw); */
}

.hero .mock img{
  width: 100%;
  height: 100%;
  object-fit: cover;       /* füllt den Rahmen; nimm 'contain', wenn nichts beschnitten werden soll */
}

/* Falls irgendwo eine feste Höhe gesetzt wurde (z.B. @media max-width:940px),
   nimm ihr die Macht: */
@media (max-width: 940px){
  .hero .mock{ height: auto !important; }  /* wir steuern per aspect-ratio */
}

/* Kleine Phone-Kachel für Steps */
.phone-mini{
  width: clamp(200px, 12vw, 120px);  /* deutlich kleiner als im Hero */
  aspect-ratio: 1 / 2;              /* 720x1440 => 1:2 */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  margin: 0 auto 12px;              /* zentriert über der Überschrift */
  background: #f2f7fa;              /* falls mal Ladezeit */
}
.phone-mini img{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;                 /* nimm 'contain', wenn nichts beschnitten werden soll */
}

.phone-mini2{
  width: clamp(200px, 12vw, 120px);  /* deutlich kleiner als im Hero */
  aspect-ratio: 1 / 2;              /* 720x1440 => 1:2 */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  margin: 0 auto 12px;              /* zentriert über der Überschrift */
  background: #f2f7fa;              /* falls mal Ladezeit */
}
.phone-mini2 img{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;                 /* nimm 'contain', wenn nichts beschnitten werden soll */
}

/* Bild + Caption hübsch zentriert */
.mock { text-align: center; }
.mock > img { display: block; margin: 0 auto; }

/* Abstand + leicht kleiner als die große Hero-Badge */
.mock-caption { margin-top: .6rem; }
.mock-caption .badge {
  font-size: .9rem;           /* etwas kleiner */
  padding: .35rem .6rem;      /* kompakter */
  white-space: nowrap;        /* hält in einer Zeile */
}

/* Optional: auf sehr kleinen Screens ausblenden, falls es zu eng wird */
@media (max-width: 480px) {
  .mock-caption { display: none; }
}

/* --- Badge UNTER dem Bild sichtbar machen --- */
.hero .mock{
  aspect-ratio: auto !important;   /* Figure wächst mit dem Inhalt */
  overflow: visible !important;     /* nichts wegschneiden */
  text-align: center;
}

.hero .mock > img{
  width: 100%;
  height: auto !important;          /* keine fixe Höhe */
  display: block;
}

/* Caption unter dem Bild */
.mock-caption{
  display: block !important;        /* auch auf Mobile sichtbar */
  margin-top: .6rem;
}

.mock-caption .badge{
  font-size: .9rem;
  padding: .35rem .6rem;
  white-space: nowrap;
}

/* Entfernt das frühere „ausblenden auf <480px“ */
@media (max-width: 480px){
  .mock-caption{ display: block !important; }
}

/* Rahmen vom Figure nehmen */
.hero .mock{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Rahmen/Shadow nur ums Bild legen */
.hero .mock > img{
  display: block;
  width: 100%;
  height: auto !important;
  border: 1px solid var(--line);
  border-radius: 28px;              /* wie zuvor */
  box-shadow: 0 40px 80px rgba(2,8,23,.12), 0 0 0 1px rgba(2,8,23,.06) inset;
  object-fit: cover;
}

/* Caption bleibt unter dem Bild */
.mock-caption{
  display: block !important;
  margin-top: .6rem;
}

/* HERO: Bild wirklich responsiv + capped */
.hero .mock{
  /* Bild+Caption als kompakter Block zentrieren */
  width: min(360px, 86vw);
  margin-inline: auto;
  text-align: center;
}


.hero .mock > img{
  display: block;
  width: 100%;
  height: auto;             /* kein Stretching */
  max-height: min(64vh, 640px); /* nimmt nie mehr als ~2/3 der Höhe ein */
  object-fit: contain;      /* falls es enger wird: vollständig sichtbar */
}

/* Caption etwas kompakter */
.mock-caption{ margin-top: .5rem; }
.mock-caption .badge{ font-size: .9rem; padding: .3rem .55rem; }

/* Noch kompakter auf sehr kleinen Geräten */
@media (max-width: 640px){
  .hero{ padding: 56px 0 28px; }
  .hero .hero-wrap{ gap: 18px; }
  .hero .mock{ width: min(340px, 88vw); }
  .hero .mock > img{ max-height: 56vh; }
}

@media (max-width: 420px){
  .hero .mock{ width: min(320px, 92vw); }
  .hero .mock > img{ max-height: 52vh; }
  .mock-caption .badge{ font-size: .85rem; }
}

/* Falls der Screen sehr niedrig ist (Landscape/kleine Laptops) */
@media (max-height: 700px){
  .hero .mock > img{ max-height: 50vh; }
}


/* HERO: Ratio immer 9/17.2 – Bild bleibt im Rahmen, Caption darunter */
.hero .mock{
  width: min(360px, 86vw);
  margin-inline: auto;
  text-align: center;
  /* kein aspect-ratio hier, sonst würde die Caption mit eingerechnet */
}

.hero .mock > img{
  /* feste Ratio fürs Bild selbst */
  aspect-ratio: 9 / 17.2;
  /* Höhe kappt auf Viewport, Breite folgt automatisch der Ratio */
  height: min(64vh, 640px);
  width: auto;
  max-width: 100%;
  display: block;

  object-fit: cover;    /* oder 'contain', falls du kein Cropping willst */
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 40px 80px rgba(2,8,23,.12), 0 0 0 1px rgba(2,8,23,.06) inset;
}

.mock-caption{
  display: block;
  margin-top: .5rem;
}

@media (max-width: 640px){
  .hero{ padding: 56px 0 28px; }
  .hero .hero-wrap{ gap: 18px; }
  .hero .mock{ width: min(340px, 88vw); }
  .hero .mock > img{ height: min(56vh, 580px); }
}
@media (max-width: 420px){
  .hero .mock{ width: min(320px, 92vw); }
  .hero .mock > img{ height: min(52vh, 540px); }
  .mock-caption .badge{ font-size: .85rem; }
}
@media (max-height: 700px){
  .hero .mock > img{ height: 50vh; }  /* sehr flache Screens */
}

/* === PILLBAR: FINAL OVERRIDES (ans CSS-Ende) === */

/* 1) Max-Breite flexibler machen (statt fixer 600px) */
:root{
  --pill-max: 860px;  /* feel free: 760–960 testen */
}

.pillbar{
  /* vorher: width: min(92%, 600px); */
  width: min(96%, var(--pill-max));
}

/* 2) Actions dürfen Platz nutzen & bei Bedarf enger werden */
.pill-actions{
  flex: 1 1 auto;   /* nimmt Restbreite, darf schrumpfen */
  min-width: 0;     /* verhindert unnötige Überbreite */
  gap: 10px;        /* leicht kompakter */
}

/* 3) Buttons/Links kompakter, ohne optisch „gequetscht“ zu wirken */
.pill-link{ padding: 0 8px; font-size: .95rem; }
.pill-btn{  padding: 0 12px; }

/* 4) Logo-Höhe weniger dominant (deine Formel war 1.5x Button-Höhe) */
.pill-logo img{
  /* vorher: calc((var(--pill-h) - 8px) * 1.5) */
  height: calc(var(--pill-h) * 1.05);
}

/* 5) Zwischen-Breakpoints: sanft verdichten */
@media (max-width: 980px){
  .pillbar{ padding: 6px 10px; }
  .pill-actions{ gap: 8px; }
  .pill-link{ padding: 0 8px; }
  .pill-btn{  padding: 0 12px; }
}

@media (max-width: 780px){
  .pillbar{ --pill-h: 40px; --pill-pad-y: 6px; }
  .pill-logo img{ height: calc(var(--pill-h) * 1.0); }
  .pill-actions{ gap: 6px; }
  .pill-link{ font-size: .92rem; padding: 0 6px; }
  .pill-btn{  padding: 0 10px; }
}

/* 6) „Soft Priority“: einen Sekundärlink früher ausblenden (optional) */
@media (max-width: 540px){
  /* wenn’s eng wird, priorisiere 'Für Unternehmen' + CTA */
  .pill-actions .pill-link[href*="contact"]{ display: none; }
}

/* 7) Harte Notbremse bleibt: unter 420px Links ausblenden (hast du schon) */
@media (max-width: 420px){
  .pillbar{ --pill-h: 38px; --pill-pad-y: 6px; gap:6px; padding:6px 8px }
  .pill-link{ display:none }
}

/* === PILLBAR: content-hugging (schmiegt sich um Inhalt) === */
.pillbar{
  /* bisher: width: min(92%, 600px) */
  width: auto;
  inline-size: max-content;                     /* schrumpft auf Inhalt */
  max-inline-size: calc(100% - 24px);           /* Safety: nie breiter als Viewport - Rand */
  display: inline-flex;                          /* echte Shrink-to-fit Breite */
  justify-content: center;                       /* kein space-between-Stretch */
  gap: 12px;
  white-space: nowrap;                           /* alles in einer Zeile */
}

/* Actions nicht wachsen lassen */
.pill-actions{
  flex: 0 1 auto;                                /* kein flex-grow */
  min-width: 0;
  flex-wrap: nowrap;                             /* keine zweite Zeile in der Pille */
  gap: 10px;
}

/* Links/Buttons leicht kompakter, damit mehr reinpasst */
.pill-link{ padding: 0 8px; font-size: .95rem; }
.pill-btn { padding: 0 12px; }

/* Logo nicht höher als die Pille wirken lassen */
.pill-logo img{
  height: calc(var(--pill-h) * 1.0);
}

/* Wenn’s wirklich eng wird: Priorisieren */
@media (max-width: 560px){
  .pill-actions .pill-link[href*="contact"]{ display:none; } /* optional */
}

@media (max-width: 420px){
  .pillbar{ --pill-h: 38px; --pill-pad-y: 6px; gap:6px; padding:6px 8px }
  .pill-link{ display:none }  /* wie bei dir schon vorgesehen */
}

/* === PRICING GRID === */
.grid.pricing{
  display: grid;                 /* du nutzt .grid schon – hier zur Klarheit nochmal */
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;          /* gleiche Höhe */
}

/* Tablet: 2 Spalten, die dritte wandert darunter */
@media (max-width: 1024px){
  .grid.pricing{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* optional: Enterprise über volle Breite */
  .grid.pricing .price:last-child{ grid-column: 1 / -1; }
}

/* Mobile: 1 Spalte */
@media (max-width: 640px){
  .grid.pricing{ grid-template-columns: 1fr; }
}

/* === PRICE CARD BASE === */
.card.price{
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;              /* nach Wunsch: center ändern */
}

/* großer Preisstreifen */
.card.price .price-tag{
  display: flex; align-items: baseline; gap: 8px;
  font-size: clamp(1.2rem, 3.6vw, 1.35rem);
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(6,182,212,.08);
}
.card.price .price-tag strong{
  font-size: clamp(1.6rem, 4.8vw, 2.2rem);
  line-height: 1;
}

/* Liste hübsch + Checks */
.card.price ul{
  list-style: none;
  padding: 0; margin: 6px 0 0;
  display: grid; gap: 6px;
}
.card.price ul li{
  position: relative; padding-left: 22px;
}
.card.price ul li::before{
  content: "✓";
  position: absolute; left: 0; top: 0; line-height: 1.2;
  color: var(--brand);
  font-weight: 700;
}

/* Button nach unten pinnen + volle Breite */
.card.price .pill-btn{
  margin-top: auto;              /* schiebt den Button an den Card-Boden */
  width: 100%;
  justify-content: center;
}

/* Optional: mittleren Plan hervorheben (füge im HTML class="card price featured" hinzu) */
.card.price.featured{
  border-color: rgba(6,182,212,.35);
  box-shadow: 0 16px 40px rgba(6,182,212,.15);
  transform: translateY(-2px);
}
.card.price.featured .price-tag{
  background: linear-gradient(180deg, rgba(6,182,212,.16), rgba(34,211,238,.10));
  border-color: rgba(6,182,212,.35);
}

/* === One-card, centered swipe (Phones & Tablets) === */
@media (max-width: 1024px){

  /* Rail: horizontales Scrolling, 1 Karte pro View, mittig snappen */
  .grid.features,
  .grid.pricing{
    display: grid;
    grid-auto-flow: column;      /* horizontal */
    grid-auto-columns: 100%;     /* genau 1 Karte pro View */
    overflow-x: auto;
    gap: 16px;

    /* schöner Rand + Snap-Zentrum definieren */
    padding: 0 16px 10px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px; /* Snap-Zentrum berücksichtigt Padding */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;

    /* optional: dezentes Ausblenden der Ränder */
    mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
  }

  /* Karten: exakt in der Mitte einrasten */
  .grid.features .card,
  .grid.pricing .card{
    scroll-snap-align: center;   /* Mittelpunkt der Karte == Mittelpunkt der Rail */
    scroll-snap-stop: always;    /* immer Karte für Karte stoppen */
    width: 100%;
    flex-shrink: 0;
  }

  /* Hover-Effekte auf Touch neutralisieren (Snap bleibt smooth) */
  .grid.features .card:hover,
  .grid.pricing .card:hover{
    transform: none;
  }

  /* Scrollbar auf WebKit ausblenden (optional) */
  .grid.features::-webkit-scrollbar,
  .grid.pricing::-webkit-scrollbar{
    display: none;
  }
}

/* One-card Slider Fix für Preise & Features */
@media (max-width: 1024px){
  .grid.features,
  .grid.pricing{
    display: grid;
    grid-template-columns: none;  /* alte 2/3-Spalten neutralisieren */
    grid-auto-flow: column;
    grid-auto-columns: 100%;      /* genau 1 Karte pro View */
    overflow-x: auto;
    gap: 16px;
    padding: 0 16px 10px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
  }

  /* Snap + Breite je Karte */
  .grid.features .card,
  .grid.pricing .card{
    scroll-snap-align: center;
    scroll-snap-stop: always;
    width: 100%;
    min-width: 100%;
    flex-shrink: 0;
  }

  /* WICHTIG: Enterprise-Sonderposition deaktivieren */
  .grid.pricing .price{ grid-column: auto / auto !important; }
}

/* zeigt ein bisschen die nächste Karte */
@media (max-width: 1024px){
  .grid.features,
  .grid.pricing{ grid-auto-columns: 92%; }
}

/* Unternehmensseite: gleiche „engere“ Unterabstände wie auf der Startseite */
#vorteile,
#preise,
#faq {
  padding-bottom: clamp(16px, 3vw, 28px);
}

/* Abschluss-CTA darf „normal“ atmen */
#angebot {
  padding: clamp(48px, 8vw, 72px) 0;
}