/* =================== VARS =================== */
    :root{
      --accent: #2f6cf6;
      --text: #1a1a1a;
      --muted: #555;

      /* Glasfarben */
      --glass-card: rgba(255,255,255,.20);
      --glass-chrome-start: rgba(255,255,255,.55);
      --glass-chrome-end: rgba(255,255,255,.28);
      --glass-border: rgba(255,255,255,.45);
    }

    /* =================== BASE =================== */
    *{ box-sizing:border-box; }
body{
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.8) 0%, rgba(245,247,255,.9) 40%, transparent 80%),
    linear-gradient(180deg, #f6f7fb 0%, #e9ecf5 100%);
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  letter-spacing: .2px;
}

/* === Barrierefreiheit: Skip-Link + Fokus-Stil === */
.skip-link {
  position: absolute;
  top: -40px;
  left: 10px;
  background: #3776ab;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  z-index: 9999;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 10px;
}

:focus-visible {
  outline: 3px solid #f6cd48;
  outline-offset: 2px;
}

/* === Tipp-Effekt für plusvision Website === */
#typeTarget {
  display: inline-block;
  font-weight: 600;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.1;
  white-space: nowrap;
  border-right: 0.12em solid currentColor;
  padding-right: 0.12em;
  overflow: hidden;
}

/* Blinkender Cursor */
@keyframes caretBlink {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

    a{ color:var(--accent); text-decoration:none; }
    a:hover{ text-decoration:underline; }

    /* ===== Gemeinsamer Glas-Chrome (Header & Footer) ===== */
    .chrome{
      position: relative;
      isolation: isolate;
      background: linear-gradient(180deg, var(--glass-chrome-start), var(--glass-chrome-end));
      -webkit-backdrop-filter: blur(18px) saturate(160%);
      backdrop-filter: blur(18px) saturate(160%);
      overflow: clip;
    }
    .chrome::after{
      content:"";
      position:absolute; inset:0; pointer-events:none;
      background: radial-gradient(140% 80% at 50% -40%, rgba(255,255,255,.35), transparent 60%);
      mix-blend-mode: screen;
    }

    /* ===== HEADER ===== */
    header.chrome{
      position: sticky; top: 0; z-index: 100;
      border-bottom: 1px solid var(--glass-border);
      box-shadow: 0 2px 18px rgba(15,23,42,.08);
      padding: 14px 40px;
      display:flex; align-items:center;
      transition: background .25s, box-shadow .25s, border-color .25s, padding .25s;
    }
header.chrome.scrolled{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
}
    /* ===== Header-Logo: SVG statt Text ===== */
.logo{
  display:flex;
  align-items:center;
  text-decoration:none;
}

/* SVG-Bild im Header */
.logo .pv-logo{
  height: 32px;     /* <-- HIER stellst du die Größe ein */
  width: auto;
  display:block;
}

    /* ===== HERO ===== */
    .hero{ text-align:center; padding:120px 20px 80px; }
    .hero h1{
      margin:0; font-size: clamp(34px, 5vw, 54px); font-weight:600;
      text-shadow:0 2px 14px rgba(47,108,246,.10);
    }
    .subtitle{ margin-top:12px; font-size:20px; color:var(--muted); }
    .tagline{ margin-top:8px; font-size:17px; color:var(--muted); }

    .hero-meta{
  margin-top: 10px;
  font-size: 14px;
  color: #7c859c;          /* wie deine kleinen Notes */
  font-weight: 500;
  line-height: 1.35;
}

    .btn{
      display:inline-block; margin-top:24px;
      padding:12px 26px; border-radius: 9999px; font-weight:600;
      color:#fff;
      transition:transform .2s, box-shadow .2s, filter .2s;
    }
    .btn:hover{ transform:translateY(-2px); filter:brightness(1.03); }

    /* ===== PLANS ===== */
    .plans-wrap{ padding:50px 20px 90px; text-align:center; }
    .plans-wrap h2{ margin:0 0 40px; font-size:32px; font-weight: 600; }

    .plans{
      max-width:1100px; margin:0 auto;
      display:grid; gap:28px;
      grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    }

    .card{
      position: relative;
      background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.12));
      -webkit-backdrop-filter: blur(18px) saturate(140%);
      backdrop-filter: blur(18px) saturate(140%);
      border: 1px solid rgba(255,255,255,.35);
      border-radius: 22px;
      box-shadow: 0 18px 40px rgba(15,23,42,.10);
      padding: 32px 26px;
      text-align: left;
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .card:hover{
      transform: translateY(-6px);
      box-shadow: 0 28px 60px rgba(15,23,42,.16);
      border-color: rgba(255,255,255,.45);
    }

    /* schnelleres Initial-Rendering bei langen Listen/Sektionen */
.plans, .card { content-visibility: auto; contain-intrinsic-size: 600px; }

    /* ===== BADGES ===== */
    .badge{
      position:absolute; top:16px; right:16px;
      font-size:12px; font-weight:700; letter-spacing:.3px;
      padding:6px 10px; border-radius:999px;
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      color:#fff;
    }

    .badge.pro{
      background: linear-gradient(90deg, #1e3a8a, #1e40af);
      border: 1px solid rgba(30,58,138,0.4);
      box-shadow: 0 4px 14px rgba(30,58,138,0.25);
    }

    .card h3{ margin:8px 0 6px; font-size:22px; }
    .plan-sub{ margin:0 0 14px; color:var(--muted); }

    .features{ list-style:none; padding:0; margin:16px 0 20px; }
    .features li{ margin:10px 0; padding-left:28px; position:relative; }

    /* ------- farbige Häkchen passend zu Button-Farben ------- */
    .features li::before{
      content:"✓";
      position:absolute; left:0; top:0;
      font-weight:800; font-size:18px; line-height:1;
      text-shadow: 0 1px 0 rgba(255,255,255,0.35);
    }

    .card.pro .features li::before{
      color:#1e40af;
      text-shadow:
        0 1px 0 rgba(255,255,255,0.35),
        0 6px 18px rgba(30,58,138,0.14);
    }

    .price{ font-size:16px; color:var(--muted); margin-top:6px; }
    .price span{ font-size:24px; font-weight:800; color:var(--text); }
    .note{ display:block; margin-top:10px; color:#7c859c; font-size:12px; }

    /* ===== FOOTER ===== */
footer.chrome {
  margin-top: auto;
  text-align: center;
  padding: 14px 40px;

  /* leicht transparenter Glas-Effekt mit dezent dunklem Verlauf */
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.75) 0%,   /* oben heller */
    rgba(240,240,240,0.6) 40%,   /* mittlerer Bereich */
    rgba(20,20,20,0.25) 100%     /* unten leicht ins dunkle */
  );
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);

  border-top: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 -4px 18px rgba(0,0,0,0.25);
  color: var(--text);
}

footer.chrome::after {
  transform: scaleY(-1);
  transform-origin: center;
}

footer a {
  color: var(--text);
  margin: 0 8px;
  text-decoration: none;
  transition: color 0.2s ease;
}

footer a:hover {
  color: #3776ab; /* sanftes Blau beim Hover */
  text-decoration: underline;
  text-underline-offset: 3px;
}

    /* ===== Responsive ===== */
    @media (max-width:640px){
      .hero{ padding:80px 18px 56px; }
      .plans-wrap{ padding:64px 16px; }
      .btn{ padding:12px 20px; }
    }

    /* --- Footer-Layout-Optimierung (Ergänzung) --- */
footer.chrome {
  padding: 20px 16px; /* etwas mehr Luft */
  font-size: 15px;
}

footer .footer-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px; /* gleichmäßiger Abstand */
  align-items: center;
  justify-content: center;
}

footer .footer-links a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s;
}

footer .footer-links a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

footer .divider {
  opacity: 0.4;
}

/* Responsive Optimierung */
@media (max-width:640px) {
  footer .footer-links {
    flex-direction: column;
    gap: 6px;
  }
}

    /* --- Footer-Link-Feinschliff (fixiert blaues Hover-Problem) --- */
footer a,
footer .footer-links a {
  color: var(--text) !important;
  text-decoration: none !important;
}

footer a:hover,
footer .footer-links a:hover {
  color: var(--text) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Gelb-Blau-Trennlinie – passend zum Logo */
.blue-rule{
  position: relative;
  display: block;
  height: 2px;
  width: 80%;
  margin: 5px auto;
  border-radius: 2px;
  background: linear-gradient(90deg, #ffd43b 0%, #3776ab 100%) !important; /* Gelb → Blau */
  overflow: hidden;
}

/* Shimmer sweep (keeps the line underneath) */
.blue-rule::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.8) 50%,
    rgba(255,255,255,0) 100%
  );
  background-size: 200% 100%;
  background-position: -100% 0;
  mix-blend-mode: screen;
  opacity: .9;
  animation: shimmer 3s linear infinite;
  pointer-events: none;
}

@keyframes shimmer{
  0%   { opacity:0;   background-position:-100% 0; }
  10%  { opacity:.9;  }
  90%  { opacity:.9;  }
  100% { opacity:0;   background-position:200% 0; }
}

/* Wenn du <hr class="blue-rule"> nutzt */
hr.blue-rule{
  border: 0;
  height: 2px;
}



    /* 1) Warmer Backdrop im Pakete-Bereich – Echo vom Hero */

.plans-wrap {
  position: relative;
  isolation: isolate;
  margin-top: 48px;
}

.plans-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      180deg,
      rgba(255, 212, 59, 0.12) 0%,      /* weiches Gelb oben */
      rgba(55, 118, 171, 0.10) 50%,     /* sanftes Blau etwas weiter nach unten */
      rgba(26, 26, 26, 0.9) 115%        /* Schwarz erst später einsetzen */
  );
  pointer-events: none;
  z-index: -1;
}

/* 2) Karten-Glas etwas wärmer tönen */
.card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.14)),
    radial-gradient(120% 100% at 0% -10%, rgba(255,212,59,.08), transparent 60%);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 18px 40px rgba(15,23,42,.10);
}

/* 3) Fokus-/Hover-Ring in Logo-Blau statt Standard-Blau */
.card:hover::before,
.card:focus-within::before{
  box-shadow:
    0 0 0 2px #3776ab,                 /* kräftiger Ring */
    0 6px 16px rgba(55,118,171,.18);   /* passender Glow */
}

/* 4) Sektionstitel mit dezentem Logo-Verlauf (verbindet optisch zum Hero) */
.plans-wrap h2{
  font-weight:600;
  background: linear-gradient(90deg, #ffd43b, #3776ab);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}



/* PRO-Pille – kräftiges Logo-Blau */
.badge.pro {
  background: #3776ab; /* Logo-Blau */
  border: 1px solid rgba(55,118,171,0.4);
  box-shadow: 0 4px 12px rgba(55,118,171,0.25);
  color: #fff;
}

/* PRO = Blau (Logo-Farbe) */
.btn-pro {
  background: #3776ab !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(55, 118, 171, 0.25);
  transition: all 0.25s ease;
}
.btn-pro:hover {
  background: #2e6aa1 !important;
  box-shadow: 0 12px 26px rgba(55, 118, 171, 0.35);
  transform: translateY(-2px);
  filter: brightness(1.1);
}

/* Klickverhalten (sanfter Druckeffekt) */
.btn:active {
  transform: translateY(0);
  filter: brightness(0.97);
}


/* PRO – Blau passend zur Badge */
.card.pro .features li::before {
  color: #3776ab; /* Logo-Blau */
  text-shadow:
    0 1px 1px rgba(255,255,255,0.35),
    0 6px 16px rgba(55,118,171,0.25);
}

    /* Dunklere Variante für Notizen unter Buttons */
.note--dark {
  color: #1a1a1a !important;  /* tiefes Schwarzgrau für guten Kontrast */
  opacity: 1 !important;
}

    @media (prefers-color-scheme: dark) {
  :root {
    --text:#eee; --muted:#c9c9c9;
    --glass-chrome-start: rgba(32,32,36,.62);
    --glass-chrome-end: rgba(28,28,32,.36);
    --glass-border: rgba(255,255,255,.18);
  }
  body{
    color:var(--text);
    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.06) 0%, rgba(40,40,44,.25) 40%, transparent 80%),
      linear-gradient(180deg,#16171a 0%, #0f1114 100%);
  }
  .hero h1, .subtitle, .tagline{ color:#eee; }
  .card{
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 18px 40px rgba(0,0,0,.35);
  }

  footer.chrome{ background:rgba(32,32,32,.8); color:#eee; }
}

    .logo {
  display: inline-block;
}
.logo:focus-visible {
  outline: 3px solid #3776ab;
  outline-offset: 3px;
  border-radius: 4px;
}



/* === App-Menü (Button + Panel) === */
/* === Schwebe-Menü (oben rechts IM Header, zentriert) === */
.appmenu{
  position: absolute;   /* war fixed – jetzt relativ zum Header */
  top: 50%;
  right: 20px;
  transform: translateY(-50%); /* vertikal zentrieren */
  z-index: 50; /* reicht innerhalb des Headers völlig */
}

/* Button – keine Box, nur Punkte */
.appmenu-btn{
  display: grid;
  grid-template-columns: repeat(2, 12px);
  grid-template-rows: repeat(2, 12px);
  gap: 3px;

  padding: 14px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 14px;
}

.appmenu-btn:focus-visible{
  outline: 3px solid #3776ab;
  outline-offset: 3px;
  border-radius: 14px;
}

.appmenu-btn .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0,0,0,0.7); /* leicht transparentes Schwarz */
}
/* Button leicht animierbar machen */
.appmenu-btn {
  transition: transform 0.35s ease;
  transform-origin: center;
}

/* Wenn das Menü offen ist → Button drehen */
.appmenu.open .appmenu-btn {
  transform: rotate(90deg);
}
@media (prefers-color-scheme: dark){
  .appmenu-btn .dot{ background:#eee; }
}

/* Panel jetzt absolut zum Button, bleibt aber sichtbar */
.appmenu-panel{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  padding: 12px 10px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.28));
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 10px 30px rgba(15,23,42,.12);

  transform-origin: top right;
  transform: scale(.98) translateY(-6px);
  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
}

.appmenu.open .appmenu-panel{
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.appmenu-panel .menu-list{
  display: grid;
  gap: 6px;
}
.appmenu-panel .menu-item{
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 600;
}
.appmenu-panel .menu-item:hover{
  background: rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark){
  .appmenu-panel{
    background: rgba(30,30,34,.94);
    border-color: rgba(255,255,255,.12);
  }
  .appmenu-panel .menu-item:hover{
    background: rgba(255,255,255,.10);
  }
}
/* --- Fix: Menü sichtbar halten + Header als große Pille --- */
header.chrome {
  position: sticky;               /* bleibt beim Scrollen kleben */
  top: 16px;                      /* Abstand zum oberen Rand */
  z-index: 1000;
  overflow: visible !important;   /* Menü nicht abschneiden */

  /* 💊 PILLEN-FORM WIE NAV-BAR (Mastercard-Style) */
  width: min(1280px, 100% - 48px); /* fast seitenbreit, mit Rand links/rechts */
  margin: 16px auto;              /* zentriert */
  border-radius: 999px;           /* komplett runde Enden */
  box-shadow: 0 18px 40px rgba(15,23,42,.12); /* sanfter Schatten unter der Pille */
}

.appmenu-panel {
  z-index: 1001;                  /* liegt über allem anderen */
}

    .appmenu-panel a {
  color: inherit;            /* übernimmt die Textfarbe (schwarz) */
  text-decoration: none;     /* entfernt die blaue Unterstreichung */
}

.appmenu-panel a:hover {
  background: rgba(0,0,0,.06); /* bleibt wie bisher */
  text-decoration: none;       /* keine Unterstreichung beim Hover */
  color: inherit;              /* bleibt schwarz */
}

    /* 📱 Handy-Footer identisch zur Hauptseite */
@media (max-width: 480px) {
  footer.chrome {
    padding: 18px 10px;   /* gleiche Innenabstände */
    font-size: 14px;      /* kleinere Schrift wie im Formular */
  }

  footer .footer-links {
    flex-direction: column !important;  /* Links untereinander */
    align-items: center;
    justify-content: center;
    gap: 6px;                           /* gleichmäßiger Abstand */
  }

  footer .divider {
    display: none !important;           /* senkrechte Striche ausblenden */
  }
}

    /* 📱 Handy: Hero-Bereich verlängern, sodass das gelbe Paketband ausgeblendet bleibt */
@media (max-width: 480px) {
  .hero {
    padding-bottom: 260px !important; /* vorher 180px → etwas mehr */
  }

  .plans-wrap {
    margin-top: 80px !important; /* leicht nach unten verschoben */
  }
}

    /* 📱 Handy: Nur der Hero-Bereich mittig im Viewport */
@media (max-width: 480px) {
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: center;   /* vertikal zentrieren */
    align-items: center;       /* horizontal zentrieren */
    min-height: 80vh;         /* volle Bildschirmhöhe */
    text-align: center;
    padding: 0 20px;           /* kleiner Rand links/rechts */
    box-sizing: border-box;
  }

  /* Abstand zum nächsten Abschnitt, damit Pakete nicht reinragen */
  .plans-wrap {
    margin-top: 0 !important;
  }
}



        @media (max-width: 480px) {
  footer .footer-links a[href*="agb"]      { order: 1; }
  footer .footer-links a[href*="impressum"] { order: 2; }
  footer .footer-links a[href*="datenschutz"] { order: 3; }
  footer .footer-links a[href*="leistungen"]  { order: 4; }
  footer .footer-links a[href^="mailto:"]     { order: 5; }

  footer .footer-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  footer .divider {
    display: none !important;
  }
}

    /* Footer-Links ausgegraut, beim Hover schwarz */
footer .footer-links a {
  color: #8f8f8f !important;   /* hellgrau wie im Screenshot */
  text-decoration: none !important;
  transition: color 0.2s ease;
}

footer .footer-links a:hover {
  color: #000 !important;       /* beim Hover schwarz */
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Trenner auch grau */
footer .footer-links .divider {
  color: #b9b9b9;
  opacity: 1;                   /* damit es genauso wirkt wie im Screenshot */
}

    .payment-bar {
    width: 100%;
    display: flex;             /* NEU → saubere Ausrichtung */
    justify-content: center;   /* zentriert */
    align-items: center;       /* vertikal sauber */
    gap: 28px;                 /* statt margin */
    padding: 4px 0 2;
    margin: 0;
    background: transparent;
}

/* Basis */
.payment-bar img {
    height: 38px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* Optische Balance */
.payment-bar img[alt="Google Pay"] { margin: 0 8px; }   /* war zu weit links */
.payment-bar img[alt="Visa"] { margin: 0 18px; }        /* wirkt kompakter – mehr Luft */
.payment-bar img[alt="Maestro"] { margin: 0 16px; }
.payment-bar img[alt="Apple Pay"] { margin: 0 22px; }   /* Apple Pay hat dicken Rand */
.payment-bar img[alt="PayPal"] { margin: 0 18px; }      /* breit – mehr Luft nötig */
.payment-bar img[alt="Klarna"] { margin: 0 12px; }      /* PNG hat viel Weißraum */

/* Feintuning */
.payment-bar img[alt="PayPal"] {
    height: 26px;
}

.payment-bar img[alt="Klarna"] {
    height: 40px;
}

.payment-bar img[alt="Maestro"] {
    height: 40px;
}

.payment-bar img[alt="Google Pay"] {
    height: 44px;
}

.payment-bar img[alt="Visa"] {
    height: 40px;
}

/* Apple Pay als Referenz */
.payment-bar img[alt="Apple Pay"] {
    height: 28px;
}

    /* Abstand Payment-Icons → Linie deutlich verkleinern */
.payment-bar {
  padding-bottom: 0 !important;
  margin-bottom: -10px !important;  /* zieht die Icons 10px näher an die Linie */
}

/* falls der Footer selbst noch oben Luft macht */
footer.chrome {
  margin-top: 0 !important;
  padding-top: 6px !important;      /* bisschen Luft, aber enger als vorher */
}

    /* 🔧 Feintuning: Footer-Höhe / Abstand nach oben */
footer.chrome {
  padding-top: 26px !important;   /* mehr Luft über den Payment-Icons */
}
    /* 📱 Mobile-Ansicht für Payment-Logos */
@media (max-width: 640px) {
  .payment-bar {
    flex-wrap: wrap;          /* Logos dürfen umbrechen */
    gap: 14px;                /* etwas enger als Desktop */
    padding-top: 10px;
    padding-bottom: 4px;
    margin-bottom: -4px;      /* weiter nah an die Linie */
  }

  .payment-bar img {
    height: 26px;             /* Basis kleiner */
  }

  /* Feintuning je Logo, relativ zu den 26px */
  .payment-bar img[alt="Google Pay"] { height: 30px; }
  .payment-bar img[alt="Visa"]       { height: 28px; }
  .payment-bar img[alt="Maestro"]    { height: 28px; }
  .payment-bar img[alt="Apple Pay"]  { height: 24px; }
  .payment-bar img[alt="PayPal"]     { height: 22px; }
  .payment-bar img[alt="Klarna"]     { height: 28px; }
}
    .footer-copy {
  margin-top: 20px;
  font-size: 11.5px;
  color: rgba(0,0,0,0.55);
  text-align: center;
}

    .footer-copy {
  letter-spacing: 0.2px;
}

    .hero-icons{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;               /* Abstand zwischen Icons */
  margin-top: 40px;
  margin-bottom: 28px;     /* Abstand zur Linie */
}

.hero-icons img{
  width: 60px;             /* Größe kannst du anpassen */
  height: auto;
}

    .hero-icon-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero-icon-link img{
  width: 60px;
  height: auto;
  border-radius: 18px;             /* passende Abrundung behalten */
  transition: transform .28s ease,
              box-shadow .28s ease,
              filter .28s ease;
}

.hero-icon-link img:hover{
  transform: translateY(-6px) scale(1.08);
  box-shadow: 0 18px 45px rgba(0,0,0,.45),
              0 6px 20px rgba(0,0,0,.25);
  filter: brightness(1.05);
}

    /* Einmalige Intro-Animation */
@keyframes iconIntroLift {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-10px) scale(1.1); }
  70%  { transform: translateY(-6px) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}

/* Alle Icons sollen animiert werden */
.hero-icon-link img {
  animation: iconIntroLift .9s ease-out forwards;
  animation-play-state: paused;
}

/* Verzögerung pro Icon */
.hero-icon-link:nth-child(1) img { animation-delay: .2s; }
.hero-icon-link:nth-child(2) img { animation-delay: .45s; }
.hero-icon-link:nth-child(3) img { animation-delay: .7s; }
.hero-icon-link:nth-child(4) img { animation-delay: .95s; }
.hero-icon-link:nth-child(5) img { animation-delay: 1.2s; }

/* === App-Menü: Links in der Header-Pille, von rechts reinrollend === */

/* Panel sitzt in der Header-Pille, vertikal zentriert */
.appmenu-panel{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 80px;               /* Abstand vom rechten Rand der Pille */
  padding: 0;
  min-width: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  pointer-events: none;      /* standard: nicht klickbar, bis .open */

  display: flex;
  align-items: center;
}

/* Links horizontal in einer Reihe */
.appmenu-panel .menu-list{
  display: flex;
  gap: 22px;
  align-items: center;
}

/* Grundzustand: unsichtbar + leicht rechts draußen */
.appmenu .menu-item{
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
  color: rgba(0,0,0,0.65);

  background: transparent;
  opacity: 0;
  transform: translateX(18px);      /* rechts draußen */
  white-space: nowrap;
  pointer-events: none;

  transition:
    opacity   0.45s ease-in-out,
    transform 0.45s ease-in-out,
    color     0.20s ease,
    background 0.20s ease;
}

/* Hover: richtig schwarz + minimal anheben */
.appmenu-panel .menu-item:hover{
  transition-delay: 0s !important;   /* Hover sofort */
  transition: background .18s ease, color .18s ease;

  background: rgba(0,0,0,0.04);
  color: #000000;
  transform: translateX(0) translateY(-1px);
}

/* ► MENÜ OFFEN: alle reinrollen (leicht gestaffelt, rechts → links) */
.appmenu.open:not(.closing) .menu-item{
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Reihenfolge beim Öffnen (rechts → links optisch) */
.appmenu.open:not(.closing) .menu-item:nth-child(1){ transition-delay: 0.04s; }
.appmenu.open:not(.closing) .menu-item:nth-child(2){ transition-delay: 0.10s; }
.appmenu.open:not(.closing) .menu-item:nth-child(3){ transition-delay: 0.16s; }
.appmenu.open:not(.closing) .menu-item:nth-child(4){ transition-delay: 0.22s; }
.appmenu.open:not(.closing) .menu-item:nth-child(5){ transition-delay: 0.28s; }
.appmenu.open:not(.closing) .menu-item:nth-child(6){ transition-delay: 0.34s; }

/* ► SCHLIESSEN: nacheinander von links → rechts wieder rausrollen */
.appmenu.open.closing .menu-item{
  opacity: 0;
  transform: translateX(18px);      /* wieder nach rechts raus */
  pointer-events: none;
}

/* Reihenfolge beim Schließen (links → rechts) */
.appmenu.open.closing .menu-item:nth-child(1){ transition-delay: 0.00s; }
.appmenu.open.closing .menu-item:nth-child(2){ transition-delay: 0.06s; }
.appmenu.open.closing .menu-item:nth-child(3){ transition-delay: 0.12s; }
.appmenu.open.closing .menu-item:nth-child(4){ transition-delay: 0.18s; }
.appmenu.open.closing .menu-item:nth-child(5){ transition-delay: 0.24s; }
.appmenu.open.closing .menu-item:nth-child(6){ transition-delay: 0.30s; }

/* Dark-Mode-Farbe angepasst */
@media (prefers-color-scheme: dark){
  .appmenu-panel .menu-item{
    color: rgba(249,250,251,0.85);
  }
  .appmenu.open:not(.closing) .menu-item:hover{
    background: rgba(255,255,255,0.08);
    color: #ffffff;
  }
}

    /* ========================= */
/* 🍎 iOS-STYLE ICON LABELS */
/* ========================= */

.hero-icon-link{
  position: relative;
}

/* Label Bubble */
.hero-icon-link::after{
  content: attr(data-label);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);

  padding: 6px 14px;
  border-radius: 999px;

  background: rgba(255,255,255,0.96);
  color: #000;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;

  box-shadow:
    0 6px 20px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.6);

  opacity: 0;
  pointer-events: none;

  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

/* kleiner Pfeil */
.hero-icon-link::before{
  content: "";
  position: absolute;
  bottom: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%);

  width: 10px;
  height: 6px;
  background: rgba(255,255,255,0.96);
  clip-path: polygon(50% 100%, 0 0, 100% 0);

  opacity: 0;
  transition: opacity 0.18s ease;
}

/* Hover / Fokus */
.hero-icon-link:hover::after,
.hero-icon-link:focus-visible::after{
  opacity: 1;
  transform: translateX(-50%) translateY(-6px);
}

.hero-icon-link:hover::before,
.hero-icon-link:focus-visible::before{
  opacity: 1;
}

    /* =========================================
   VisionSite + "mehr": wie btn-pro (Lift),
   aber OHNE Aufleuchten/Glow – nur Underline
========================================= */

/* Button: VisionSite starten – festes Gelb */
.btn-basic{
  background-color: var(--pv-yellow) !important;
  color: #000 !important;
}

/* Häkchen nur Farbe, kein Background */
.card.basic .features li::before{
  background: transparent !important;
  color: var(--pv-yellow) !important;
}

/* 2) Baseline-Schatten fix (kein gelber Glow) */
.badge.basic{
  box-shadow: 0 4px 10px rgba(0,0,0,0.12) !important;
  transition: transform .25s ease, box-shadow .25s ease, text-decoration-color .25s ease;
}
.btn-basic{
  box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important;
  transition: transform .25s ease, box-shadow .25s ease, text-decoration-color .25s ease;
}

/* 3) Hover/Fokus: leicht anheben + Underline, aber KEIN Brightness */
.badge.basic:hover,
.badge.basic:focus-visible{
  filter: none !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.16) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn-basic:hover,
.btn-basic:focus-visible{
  filter: none !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.16) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 4) Wichtig: dein globales .btn:hover hat filter:brightness(...)
      -> für btn-basic explizit neutralisieren */
.btn.btn-basic:hover{
  filter: none !important;
}

    /* --- GELB 1:1 vereinheitlichen (ganz ans Ende!) --- */
:root{
  --pv-yellow: #f6cd48;
  --pv-yellow-hover: #d1ad3a;
}

/* mehr-Pille: echtes, flaches Gelb */
.badge.basic{
  background: none !important;
  background-color: var(--pv-yellow) !important;
  color: #000 !important;
  opacity: 1 !important;
}

/* Häkchen: echtes, flaches Gelb ohne “Aufhell-Effekte” */
.card.basic .features li::before{
  font-weight: 900;       /* minimal kräftiger */
  color: var(--pv-yellow) !important;
  text-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* ===========================
   PRO Blau: freundlich & professionell
=========================== */
:root{
  --pv-blue: #2F5FD7;
  --pv-blue-hover: #244DBA;
}

/* VID-Pille */
.badge.pro{
  background: var(--pv-blue) !important;
  border: 1px solid rgba(47,95,215,.35) !important;
  box-shadow: 0 4px 12px rgba(47,95,215,.22) !important;
  color:#fff !important;
}

/* PRO Button */
.btn-pro{
  background: var(--pv-blue) !important;
  color:#fff !important;
  box-shadow: 0 10px 24px rgba(47,95,215,.25) !important;
}
.btn-pro:hover{
  background: var(--pv-blue-hover) !important;
  box-shadow: 0 12px 26px rgba(47,95,215,.32) !important;
  filter: none !important;
}

/* PRO Häkchen */
.card.pro .features li::before{
  color: var(--pv-blue) !important;
  text-shadow:
    0 1px 1px rgba(255,255,255,0.35),
    0 6px 16px rgba(47,95,215,.22) !important;
}

    .price{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap; /* falls es am Handy zu eng wird */
}

.price .price-includes{
  display:inline;
  margin:0;
  font-size:12px;      /* wie .note */
  color:#7c859c;       /* wie .note */
  font-weight:600;     /* optional, kannst du auch weglassen */
}

    /* PRO Preis = dezentes Hinweis-Label wie "inklusive 12 Monate Hosting" */
.card.pro .price{
  font-size: 24px;
  font-weight: 500;
  color: #7c859c;   /* identisch zu .note */
  margin-top: 12px;
}


/* =========================
   BODY LOGO – kleiner + enger zur Schrift
   ========================= */
.body-logo{
  display: block;
  width: min(360px, 48vw);   /* nochmal kleiner */
  height: auto;

  margin: 40px auto -6px;     /* unten fast kein Abstand mehr */
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
}

@media (max-width: 480px){

  /* Hero NICHT zentrieren, normale Höhe */
  .hero{
    display: block !important;
    min-height: unset !important;
    height: auto !important;

    /* 🔽 GANZER BLOCK STARTET TIEFER */
    padding-top: 28px !important;

    /* unten nur kleiner Abstand – kein Fake-Leerraum */
    padding-bottom: 20px !important;
  }

  /* Logo weiter nach unten + näher an Titel */
  .body-logo{
    margin: 120px auto -18px !important;   /* ↑ Top größer = alles rutscht runter */
    width: min(250px, 56vw) !important;
  }

  /* Titel kompakt */
  #typeTarget{
    margin: 0 !important;
    line-height: 1.05 !important;
  }

  /* Icons minimal tiefer (optional Feinschliff) */
  .hero-icons{
    margin-top: 34px !important;
  }

  /* Pakete deutlich später → Gelber Bereich nicht sofort sichtbar */
  .plans-wrap{
    margin-top: 220px !important;
  }
}

/* ================= MOBILE MENU FIX ================= */
@media (max-width: 480px){

  /* Inline-Menü in Header deaktivieren → Dropdown */
  .appmenu-panel{
    top: calc(100% + 10px) !important;
    bottom: auto !important;
    right: 0 !important;

    min-width: 210px !important;
    padding: 12px 10px !important;

    background: rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 14px 34px rgba(15,23,42,0.18) !important;
    border-radius: 14px !important;

    pointer-events: none !important;
    opacity: 0 !important;
    transform: translateY(-6px) scale(.98) !important;
    transition: transform .18s ease, opacity .18s ease !important;

    display: block !important;
  }

  /* Menü offen */
  .appmenu.open .appmenu-panel{
    pointer-events: auto !important;
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }

  /* Links wieder untereinander */
  .appmenu-panel .menu-list{
    display: grid !important;
    gap: 6px !important;
  }

  .appmenu .menu-item{
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;

    padding: 10px 12px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    color: rgba(0,0,0,0.78) !important;
  }

  .appmenu-panel .menu-item:hover{
    background: rgba(0,0,0,0.06) !important;
  }
}



/* Hero weiter nach oben ziehen (dadurch kommt PlusVision näher ans Body-Logo) */
.hero{
  padding-top: 0px !important;  /* vorher 120px */
}

/* 📱 Mobile Header – Logo näher an den Rand */
@media (max-width: 640px){

  header.chrome{
    padding: 12px 12px;     /* vorher ~14px 16–40px → weniger Innenrand */
  }

  /* Logo minimal optisch ausbalancieren */
  .logo{
    margin-left: 0;         /* falls irgendwo Margin sitzt → weg */
  }

  .logo .pv-logo{
    margin-left: -2px;      /* Optical alignment (Logo wirkt mittiger) */
  }
}