: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);
}
*{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 }

/* 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-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 ---- */
:root { --badge-h: 44px; } /* Höhe der Badge-Grafik (Apple/Google: >= 40px empfohlen) */

.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; }
}

/* --- Sticky Pille --- */
:root {
  --pill-bg: #fff;
  --pill-text: #0f172a;        /* slate-900 */
  --pill-accent: #06b6d4;      /* theme color */
  --pill-shadow: 0 8px 30px rgba(2, 8, 23, .08);
  --pill-radius: 9999px;
  --pill-gap: 10px;
  --pill-pad-y: 8px;
  --pill-pad-x: 12px;
  --pill-z: 9999;
}

/* Platz nach oben, damit die Pille nichts überlappt */
body {
  padding-top: calc(60px + env(safe-area-inset-top, 0px));
}

/* Container der Pille */
.pillbar {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--pill-z);

  display: flex;
  align-items: center;
  gap: var(--pill-gap);

  background: var(--pill-bg);
  color: var(--pill-text);
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: var(--pill-shadow);
  border-radius: var(--pill-radius);
  padding: var(--pill-pad-y) var(--pill-pad-x);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px); /* iOS */
}

/* Logo */
.pill-logo {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 4px 6px;
  border-radius: var(--pill-radius);
  text-decoration: none;
}
.pill-logo img {
  height: 60px; /* dezent klein */
  width: auto;
  display: block;
   margin-bottom: -2px;
}



/* Links + Button */
.pill-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pill-link {
  text-decoration: none;
  color: inherit;
  padding: 6px 10px;
  border-radius: var(--pill-radius);
  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: 6px 12px;
  border-radius: var(--pill-radius);
  background: var(--pill-accent);
  color: white;
  font-weight: 600;
  border: 1px solid transparent;
}
.pill-btn:hover, .pill-btn:focus-visible {
  filter: brightness(0.95);
  outline: none;
}

/* Responsiv: auf sehr kleinen Screens komprimieren */
@media (max-width: 420px) {
  body { padding-top: calc(56px + env(safe-area-inset-top, 0px)); }
  .pillbar { gap: 6px; padding: 6px 8px; }
  .pill-link { display: none; }         /* nur Button + Logo sichtbar */
  .pill-logo img { height: 18px; }
}

/* 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 */
}

.pillbar {
  width: 90%;
  max-width: 600px;
  padding: 12px 28px;

  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;

  display: flex;
  justify-content: space-between; /* Logo links, Actions rechts */
  align-items: center;

  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  
  /* Milchglas-Effekt */
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
}

.pill-actions {
  display: flex;
  gap: 12px;
}

/* Button-Styling bleibt */
.pill-btn {
  padding: 8px 16px;
  border-radius: 9999px;
  background: var(--pill-accent);
  color: white;
  font-weight: 600;
  text-decoration: none;
}
.pill-btn:hover {
  filter: brightness(0.95);
}

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: 16px;
  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;
}

/* Eine konsolidierte Pille (verhindert Doppel-Definitionen) */
.pillbar {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;

  width: 90%;
  max-width: 600px;
  padding: 12px 28px;

  display: flex;
  justify-content: space-between; /* Logo links, Actions rechts */
  align-items: center;
  gap: 12px;

  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
  color: #0f172a;
}
.pill-actions { display:flex; gap:12px; }
.pill-btn { padding:8px 16px; border-radius:9999px; background:var(--brand); color:#fff; font-weight:600; text-decoration:none; }

/* === Pill-Bottom-Alignment === */
.pillbar {
  /* alle Kinder unten bündig */
  align-items: flex-end;
}

/* Gleiche vertikale Innenabstände für ALLE Items in der Pille */
.pill-logo,
.pill-link,
.pill-btn {
  padding-block: 8px;   /* 8px oben + unten */
}

/* Logo: kein extra Bottom-Offset, passende Größe */
.pill-logo {
  padding-inline: 6px;  /* seitlich etwas Luft */
}
.pill-logo img {
  height: 40px;         /* statt 60px – passt zur Button-Höhe */
  width: auto;
  display: block;
  margin-bottom: -1px;  /* optischer Feinausgleich (0 bis -2px testen) */
}

/* Buttons: gleiche vertikale Polsterung behalten */
.pill-link { padding-inline: 10px; }
.pill-btn  { padding-inline: 16px; line-height: 1; }

/* (optional) Wenn die Unterkante immer noch 1px „zittert“:
   Border optisch neutralisieren */
.pill-btn { border-width: 1px; border-style: solid; border-color: transparent; }