:root{--bg:#05060a;--card:#0b0e16;--muted:#8ea6c1;--brand:#31a8ff;--brand-2:#7c5cff;--ok:#39e29d;--danger:#ff5c7a;--ring:0 0 40px 8px rgba(49,168,255,.35),0 0 80px 16px rgba(124,92,255,.15)}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:#e6f2ff;overflow-x:hidden}
a{color:inherit;text-decoration:none}

canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.scrim{position:fixed;inset:0;background:radial-gradient(1200px 600px at 70% 10%,rgba(124,92,255,.25),transparent 60%),radial-gradient(900px 500px at 0% 100%,rgba(49,168,255,.20),transparent 60%);z-index:0;pointer-events:none}

header{position:sticky;top:0;z-index:10;background:rgba(5,6,10,.45);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}
.wrap{max-width:1100px;margin:0 auto;padding:16px 24px;align-items:center;justify-content:space-between;}
.wrap.space{justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:44px;filter:drop-shadow(0 0 12px rgba(49,168,255,.5))}
.brand h1{font-size:20px;margin:0;font-weight:800;letter-spacing:.2px}

.hero{position:relative;z-index:1;padding:80px 24px 30px}
.hero .inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center}
.kicker{color:var(--muted);text-transform:uppercase;letter-spacing:.18em;font-size:12px;margin-bottom:10px}
.headline{font-size:40px;line-height:1.1;margin:0 0 12px;font-weight:800}
.headline.md{font-size:32px}
.headline.sm{font-size:28px}
.sub{color:#cfe4ff;opacity:.9}
.cta{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap}

.btn{position:relative;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(49,168,255,.25),rgba(124,92,255,.25));color:#fff;padding:12px 18px;border-radius:14px;font-weight:700;cursor:pointer}
.btn:hover{box-shadow:var(--ring)}
.btn.ghost{background:transparent}

.shop{position:relative;z-index:1;padding:28px 24px 90px}
.shop.pad0{padding-top:0}
.grid{max-width:1100px;margin:22px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:20px;box-shadow:0 12px 60px rgba(3,10,20,.35)}
.card h3{margin:0;font-size:20px}
.price{font-size:34px;font-weight:800;margin:12px 0}
.features{margin:12px 0 16px;color:#cfe4ff;opacity:.9}
.features li{margin:8px 0}
.badge{display:inline-block;font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(57,226,157,.12);border:1px solid rgba(57,226,157,.35);color:#caffea;margin-left:8px}
.popular{outline:2px solid rgba(49,168,255,.35)}


/* Shop Styles */
.products {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 50px;
}
.product {
  background: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  width: 250px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.product h2 {
  margin-bottom: 10px;
}
.product strong {
  display: block;
  margin: 10px 0;
  font-size: 20px;
}
.product button {
  background: #00aaff;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s;
}
.product button:hover {
  background: #0077cc;
}

@media (max-width:900px){
  .hero .inner{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
}


/* Overlay + Wizard – clean, modern, smooth */
:root{
  --overlay-bg: rgba(2,10,20,.55);
  --panel-bg: rgba(12,16,24,.85);
  --panel-border: rgba(255,255,255,.08);
}

body.no-scroll { overflow: hidden; }

.overlay{
  position: fixed; inset: 0;
  display: none; place-items: center;
  background:
    radial-gradient(1200px 600px at 70% 10%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(49,168,255,.18), transparent 60%),
    var(--overlay-bg);
  backdrop-filter: blur(10px) saturate(140%);
  z-index: 1000; padding: 24px;
}
.overlay.open { display: grid; }
.overlay[hidden]{ display:none !important; }

.wizard{
  width: min(920px, 100%);
  background: linear-gradient(180deg, var(--panel-bg), rgba(12,16,24,.92));
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  box-shadow: 0 20px 80px rgba(0,0,0,.45), 0 0 60px rgba(49,168,255,.25);
  overflow: hidden;
  transform: translateY(12px) scale(.98);
  opacity: 0;
  animation: wizIn .3s cubic-bezier(.2,.7,.2,1) forwards;
}

@keyframes wizIn{
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.wiz-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--panel-border);
}
.wiz-head h3{ margin:0; font-weight:800; letter-spacing:.2px; }
.wiz-head .btn.ghost{ opacity:.9 }
.wiz-head .btn.ghost:hover{ box-shadow: var(--ring); }

.wiz-progress{ display:flex; gap:10px; justify-content:center; padding:10px 12px; }
.dot{
  width:28px; height:28px; border-radius:999px;
  display:grid; place-items:center; font-weight:700;
  border:1px solid rgba(255,255,255,.18); color:#cfe4ff
}
.dot.active{
  background: linear-gradient(180deg, rgba(49,168,255,.35), rgba(124,92,255,.35));
  border-color:transparent; box-shadow: 0 0 30px rgba(124,92,255,.35);
}

.wiz-body{ padding:18px; }
.step{ display:block; }
.step[hidden]{ display:none; }

.option{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 14px;
  border:1px solid var(--panel-border); border-radius:12px;
  background: rgba(255,255,255,.03);
}
.option input{ accent-color: var(--brand); }

.summary{ margin:12px 0 4px; display:grid; gap:6px }
.summary .total{ display:flex; justify-content:space-between }
.total.big{ font-size:20px }

.actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px }

/* Mobile */
@media (max-width: 900px){
  .wizard{ border-radius: 18px }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .wizard{ animation: none; opacity: 1; transform: none; }
}




/* ===== Cart FAB + Drawer Fixes ===== */
.cart-fab{
  position:fixed; right:22px; bottom:22px;
  background:linear-gradient(180deg,rgba(49,168,255,.9),rgba(124,92,255,.9));
  color:#fff; border-radius:50%; width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 28px rgba(0,0,0,.35);
  cursor:pointer; transition:transform .15s ease;
  z-index:1100;  /* über allem */
}
.cart-fab:hover{ transform:translateY(-2px) }
.cart-fab svg{ width:28px; height:28px; pointer-events:none }
.cart-fab .badge{
  position:absolute; top:8px; right:8px; background:#e11d48;
  color:#fff; font-size:12px; font-weight:800; border-radius:50%;
  width:22px; height:22px; display:none; align-items:center; justify-content:center;
  box-shadow:0 2px 5px rgba(0,0,0,.3)
}

/* Drawer */
.drawer{ position:fixed; inset:0; display:none; z-index:1200 } /* über Canvas/Scrim */
.drawer.open{ display:block }
.drawer .backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55) }
.drawer .panel{
  position:absolute; top:0; right:0; width:420px; max-width:100%; height:100%;
  background:var(--card); border-left:1px solid rgba(255,255,255,.08);
  box-shadow:0 0 40px 8px rgba(49,168,255,.25);
  display:flex; flex-direction:column; z-index:1; /* über der Backdrop */
}
.drawer .panel header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.08)
}
.drawer .body{ padding:16px; overflow:auto; flex:1 }
.drawer .row{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0; border-bottom:1px dashed rgba(255,255,255,.1)
}
.drawer .row small{ color:var(--muted) }
.drawer .coupon{ display:flex; gap:8px; margin-top:10px }
.drawer .total{ display:flex; justify-content:space-between; font-weight:800; padding:12px 0 6px }
.drawer .total.big{ font-size:20px }
.drawer .checkout{ border-top:1px solid rgba(255,255,255,.08); padding:12px 16px }
.drawer .actions{ display:flex; gap:8px; flex-wrap:wrap }
.drawer details summary{ cursor:pointer; list-style:none }
.drawer details summary::-webkit-details-marker{ display:none }

/* Inputs klickbar, eigener Layer */
.drawer input,.drawer textarea{
  position:relative; z-index:2;
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid rgba(255,255,255,.08); background:#0f1422; color:#e6f2ff
}

/* Stelle sicher, dass Canvas/Scrim hinter allem sind */
canvas#starfield, .scrim{ z-index:0; pointer-events:none }


/* === Checkout Drawer – neues Layout === */
.drawer .form { display: grid; gap: 14px; }
.drawer .form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.drawer .field { width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid rgba(255,255,255,.08); background:#0f1422; color:#e6f2ff;
}
.drawer textarea.field { min-height: 110px; resize: vertical; }

.drawer .col-2 { grid-column: 1 / -1; }        /* über beide Spalten */
.drawer .check {
  display:flex; align-items:center; gap:10px; line-height:1.2;
  padding:10px 0; color:#cfe4ff; opacity:.95;
}
.drawer .check input { accent-color: var(--brand); width:18px; height:18px; }

.drawer .actions { display:flex; gap:10px; }
.drawer .actions .btn { flex:1; padding:14px 16px; border-radius:14px; }
.drawer .hint { color: var(--muted); font-size: 13px; margin-top: 4px; }

/* Mobile: einspaltig & Buttons untereinander */
@media (max-width: 760px){
  .drawer .form-grid { grid-template-columns: 1fr; }
  .drawer .actions { flex-direction: column; }
}

/* === Drawer – Checkout schöner === */
.drawer .panel { box-shadow: -20px 0 40px rgba(0,0,0,.35); }

.drawer .drawer-summary{
  list-style: none;
  cursor: default;
  font-weight: 800;
  padding: 4px 0 6px;
}
.drawer details > summary::-webkit-details-marker{ display:none; }

.drawer .form{ display: grid; gap: 14px; }
.drawer .form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.drawer .field{
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: #0f1422;
  color: #e6f2ff;
}
.drawer textarea.field{ min-height: 110px; resize: vertical; }
.drawer .col-2{ grid-column: 1 / -1; }

.drawer .check{
  display: flex; align-items: center; gap: 10px;
  color: #cfe4ff; line-height: 1.2; padding-top: 4px;
}
.drawer .check input{ width: 18px; height: 18px; accent-color: #31a8ff; }

.drawer .actions{ display: flex; gap: 10px; }
.drawer .actions .btn{ flex: 1; padding: 14px 16px; border-radius: 14px; }
.drawer .hint{ color: #8ea6c1; font-size: 13px; margin-top: -4px; }

/* Gutschein-Zeile etwas ruhiger */
.drawer .coupon input{
  flex: 1; padding: 10px 12px; border-radius: 10px;
  border:1px solid rgba(255,255,255,.08); background:#0f1422; color:#e6f2ff;
}

/* Mobile: einspaltig & Buttons untereinander */
@media (max-width: 760px){
  .drawer .form-grid{ grid-template-columns: 1fr; }
  .drawer .actions{ flex-direction: column; }
}

/* === Add-to-cart Animation === */

.cart-bump { animation: cart-bump 420ms cubic-bezier(.2,.9,.2,1); }
@keyframes cart-bump {
  0% { transform: translateZ(0) scale(1); }
  35%{ transform: translateZ(0) scale(1.15); }
  100%{ transform: translateZ(0) scale(1); }
}

/* Button micro feedback */
.button-added { animation: btn-pulse 380ms ease-out; }
@keyframes btn-pulse {
  0%{ transform: scale(1); }
  50%{ transform: scale(0.96); }
  100%{ transform: scale(1); }
}

/* Motion Respect */
@media (prefers-reduced-motion: reduce){
  .flyer { display:none !important; }
  .button-added, .cart-bump { animation: none !important; }
}

.steps h3{ margin:28px 0 10px }
.steps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.steps-grid article{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:16px 18px;
}
.steps-grid span{
  display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background:linear-gradient(180deg,rgba(49,168,255,.25),rgba(124,92,255,.25));
  font-weight:800; margin-bottom:8px;
}
@media (max-width:900px){ .steps-grid{ grid-template-columns:1fr } }
.faq details{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:10px 12px; margin:8px 0;
}
.faq summary{ cursor:pointer; font-weight:700 }
.faq p{ color:#cfe4ff; margin:8px 0 0 } 

.cart-pill{
  position:fixed; right:18px; bottom:18px; z-index:1400;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(49,168,255,.25),rgba(124,92,255,.25));
  color:#fff; font-weight:800; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.cart-pill .qty{
  width:26px; height:26px; display:grid; place-items:center; border-radius:50%;
  background:#0b0e16; border:1px solid rgba(255,255,255,.15);
}
/* === Fly-to-Wizard Animation === */
.flyer {
  position: fixed; width: 36px; height: 36px; border-radius: 50%;
  pointer-events: none; z-index: 2000; opacity: .9;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(49,168,255,.85));
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.btn-added { animation: btn-pulse 360ms ease-out }
@keyframes btn-pulse { 0%{transform:scale(1)} 50%{transform:scale(.96)} 100%{transform:scale(1)} }

@media (prefers-reduced-motion: reduce){
  .flyer{ display:none !important }
  .btn-added{ animation:none !important }
}

/* Rabattdarstellung */
.price { display:flex; align-items:baseline; gap:8px; }
.old-price {
  text-decoration: line-through;
  color: #9bb3cc;
  opacity: .8;
  font-size: .95rem;
}
.new-price {
  color: #e63946;           /* Rot für Sale */
  font-weight: 800;
  font-size: 1.35rem;
}

/* --- Reviews (ersetzt deinen bisherigen Block) --- */
.reviews-section { position: relative; padding: 48px 0; }

/* Kopf */
.reviews-head {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; margin-bottom:18px;
}
.reviews-head .score { display:flex; align-items:center; gap:10px; font-weight:800; }

/* Sterne – funktioniert mit Text-★/☆ aus dem JS */
.stars { display:inline-flex; gap:2px; letter-spacing: .5px; font-size:16px; line-height:1; }
@media (max-width: 480px){ .stars { font-size:15px; } }

/* Schiene + Track */
.reviews-rail {
  position:relative;
  /* Platz für die Buttons schaffen, damit sie NICHT über den Karten hängen */
  padding: 0 44px;
}
.reviews-track {
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(280px, 32vw, 380px); /* responsiv & stabil */
  gap:14px;
  overflow:hidden; /* scroll per Buttons/Auto, keine Scrollbar sichtbar */
  scroll-behavior:auto;
  /* Sanftes Ausblenden an den Rändern */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
}

/* --- Responsive Fixes für Reviews --- */

/* Kopfbereich: Score nicht in sich umbrechen */
.reviews-head { 
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px; 
}
.reviews-head .score{
  display:flex; align-items:center;
  column-gap:10px; row-gap:2px; flex-wrap:wrap; /* darf zwischen Blöcken umbrechen */
  font-weight:800;
}
.reviews-head .score > *{ white-space:nowrap; } /* aber nicht mitten im Element */
.reviews-head .score .sub{ font-weight:600; opacity:.9; }

/* Sterne typografisch kompakt */
.stars{ display:inline-flex; gap:2px; letter-spacing:.4px; line-height:1; }

/* Schiene: auf Mobil swipebar, Masken nur auf größeren Screens */
.reviews-rail{ position:relative; padding:0 44px; }
.reviews-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: clamp(300px, 32vw, 380px);
  gap:14px;
  overflow-x:auto; /* Swipe! */
  overflow-y:hidden;
  scroll-behavior:auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.reviews-track::-webkit-scrollbar{ height:8px; }
.reviews-track::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.15); border-radius:8px; }

/* Karten */
.review-card{ 
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:16px; min-height:200px;
  display:flex; flex-direction:column; gap:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.review-head{ display:flex; align-items:center; gap:10px; }
.review-head img{ width:40px; height:40px; border-radius:50%; object-fit:cover; }
.review-author{ font-weight:700; }
.review-meta{ font-size:.85rem; color:#9bb3cc; }
.review-text{ color:#dfeaf7; line-height:1.5; }


/* --- Breakpoints --- */

/* < 1024px: Ränder sanft ausblenden, aber nur hier (auf Mobile deaktiviert) */
@media (min-width: 861px){
  .reviews-track{
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
  }
}

/* < 860px: Kopf stapelt, Score wird etwas kleiner */
@media (max-width: 860px){
  .reviews-head{ flex-direction:column; align-items:flex-start; gap:8px; }
  .reviews-head .score{ font-size: clamp(13px, 2.1vw, 15px); }
  .reviews-rail{ padding: 0 36px; }
  .prev{ left:4px; } .next{ right:4px; }
  .reviews-track{ grid-auto-columns: clamp(280px, 68vw, 360px); }
}

/* < 560px: volle Breite, Pfeile optional ausblenden (Swipe reicht) */
@media (max-width: 560px){
  .reviews-track{ grid-auto-columns: min(88vw, 420px); gap:12px; }
  .stars{ font-size: 15px; }
  .reviews-head .score{ column-gap:8px; }
}

/* FAQ Sektion */
.faq {
  max-width: 860px; /* nicht volle Breite */
  margin: 60px auto; /* mittig zentrieren */
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* einzelne Fragen */
.faq details {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .2s ease, background .2s ease;
}
.faq details[open] {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.2);
}

/* Überschrift (summary) */
.faq summary {
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 600;
  list-style: none; /* Standard-Dreieck weg */
  position: relative;
  color: #e2eaf6;
}
.faq summary::-webkit-details-marker { display: none; }

/* Icon Pfeil */
.faq summary::after {
  content: "›";
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform .25s ease;
  opacity: .7;
}
.faq details[open] summary::after {
  transform: translateY(-50%) rotate(90deg);
  opacity: 1;
}

/* Antworttext */
.faq details p {
  padding: 0 18px 16px;
  font-size: .95rem;
  line-height: 1.5;
  color: #cdd8e6;
}

/* Mini-Router Helpers */
[data-view]{display:none}
[data-view].active{display:block}
.router-nav a.active{opacity:1;text-shadow:0 0 18px rgba(49,168,255,.6)}

/* Layouts */
.checkout-main{position:relative;z-index:1;padding:28px 24px 90px}
.co-layout{display:grid;grid-template-columns:2fr 1fr;gap:20px;max-width:1100px;margin:22px auto 0}
.co-sum .row{display:flex;justify-content:space-between;margin:8px 0}
.pay-grid{display:grid;gap:10px;margin:10px 0}
@media(max-width:900px){.co-layout{grid-template-columns:1fr}}

/* Wizard Overlay */
.overlay[hidden]{display:none!important}
.overlay.open{display:block!important}
.overlay{position:fixed;inset:0;z-index:1400}
.overlay .wizard{max-width:920px;margin:6vh auto;background:#0b0e16;border:1px solid rgba(255,255,255,.08);border-radius:16px}

/* Fly-to-Wizard Animation */
.flyer{position:fixed;width:36px;height:36px;border-radius:50%;pointer-events:none;z-index:2000;opacity:.9;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),rgba(49,168,255,.85));
  box-shadow:0 6px 18px rgba(0,0,0,.25)}
.btn-added{animation:btn-pulse 360ms ease-out}
@keyframes btn-pulse{0%{transform:scale(1)}50%{transform:scale(.96)}100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.flyer{display:none!important}.btn-added{animation:none!important}}

/* Rabattdarstellung */
.price{display:flex;align-items:baseline;gap:8px}
.old-price{text-decoration:line-through;color:#9bb3cc;opacity:.8;font-size:.95rem}
.new-price{color:#e63946;font-weight:800;font-size:1.35rem}

/* Kleine Helfer */
.card.narrow{max-width:600px;margin:20px auto}
.center{text-align:center}

/* ===== Kontakt-Form: Dark-Glass Look ===== */
.form-grid { gap: 12px; }

.form .field,
.form textarea.field,
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="url"],
.form input[type="number"],
.form input[type="search"],
.form input[type="password"],
.form textarea {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
  color: #e7f1fb;
  border-radius: 12px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .06s ease;
}

.form input::placeholder,
.form textarea::placeholder {
  color: #9bb3cc;
  opacity: .85;
}

.form .field:focus,
.form textarea:focus {
  background: rgba(255,255,255,.055);
  border-color: rgba(49,168,255,.65);
  box-shadow: 0 0 0 4px rgba(49,168,255,.12), 0 10px 30px rgba(0,0,0,.25);
}

.form textarea.field { min-height: 140px; resize: vertical; }

/* Checkbox hübsch + gut sichtbar */
.check input[type="checkbox"]{
  width: 18px; height: 18px;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  accent-color: #31a8ff;
  vertical-align: middle;
}
.check span{ color:#cfe0f5 }

/* Buttons etwas weicher */
.actions .btn{ border-radius: 12px; padding: 12px 16px; }
.actions .btn.ghost{ border:1px solid rgba(255,255,255,.18); background:transparent; }
.actions .btn:hover{ transform: translateY(-1px); }

/* Autofill (Chrome) angleichen */
input:-webkit-autofill,
textarea:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,.035) inset !important;
  -webkit-text-fill-color: #e7f1fb !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* ===== Promo / Countdown-Bar ===== */
.promo-bar{
  position: sticky; top: 0; z-index: 1200;
  background: linear-gradient(90deg, rgba(49,168,255,.18), rgba(124,92,255,.18));
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
}
.promo-inner{ display:flex; align-items:center; gap:12px; padding:10px 0; }
.promo-bar .tag{
  display:inline-block; padding:4px 8px; border-radius:999px;
  background: rgba(255,255,255,.08); color:#cfe0f5; font-size:.8rem; letter-spacing:.02em;
}
.promo-text{ color:#e7f1fb; font-weight:600; }
.promo-text .code{ color:#fff; text-shadow:0 0 12px rgba(49,168,255,.4); }
.countdown{ font-variant-numeric: tabular-nums; padding-left:6px; }
.promo-close{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25); color:#cfe0f5; cursor:pointer;
}
.promo-close:hover{ background: rgba(255,255,255,.08); }
.btn.pill.xs{ border-radius:999px; padding:8px 12px; font-size:.9rem; }
@media (max-width:780px){
  .promo-inner{ gap:8px; }
  .promo-text{ font-size:.95rem; }
  .tag{ display:none; }
}

/* =========================================
   Add-ons (Index)
   ========================================= */

#addons { margin-top: 28px; }
#addons h2 { margin-bottom: 14px; }

/* Grid */
.addon-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

/* Karte */
.addon-item{
  --addon-bg: rgba(255,255,255,.04);
  --addon-bd: rgba(255,255,255,.14);
  --addon-bd-hover: rgba(124,92,255,.55); /* dein Violett */
  --addon-shadow: 0 6px 22px rgba(0,0,0,.25);

  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--addon-bd);
  border-radius:14px;
  background: var(--addon-bg);
  backdrop-filter: blur(2px);
  box-shadow: var(--addon-shadow);
  transition: border-color .18s ease, transform .12s ease, box-shadow .18s ease;
}

.addon-item:hover{
  border-color: var(--addon-bd-hover);
  transform: translateY(-1px);
}

/* Checkbox hübsch */
.addon-item input[type="checkbox"]{
  appearance:none;
  width:18px; height:18px;
  border:2px solid var(--addon-bd);
  border-radius:6px;
  background: transparent;
  cursor:pointer;
  position:relative;
  transition: border-color .18s, background-color .18s;
}

.addon-item input[type="checkbox"]:hover{
  border-color: var(--addon-bd-hover);
}

.addon-item input[type="checkbox"]:checked{
  background: linear-gradient(180deg, #7c5cff, #3db1ff);
  border-color: transparent;
}

.addon-item input[type="checkbox"]:checked::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(transparent 45%, white 45% 55%, transparent 55%) no-repeat,
    linear-gradient(90deg, transparent 35%, white 35% 45%, transparent 45%) no-repeat;
  transform: rotate(45deg) scale(.65);
  border-radius:4px;
}

/* Texte */
.addon-item .name{
  flex:1;
  font-weight:600;
  letter-spacing:.2px;
}

.addon-item .price{
  font-weight:800;
  font-size:1.4rem;
  white-space:nowrap;
  opacity:.95;
}

/* Muted Fallback-Text */
.addon-list .muted,
#addons .muted{
  opacity:.7; font-size:.95rem;
}

/* Fokus (Tastatur) */
.addon-item:focus-within{
  outline: 2px solid var(--addon-bd-hover);
  outline-offset: 2px;
}

/* Mobile Tweaks */
@media (max-width: 720px){
  .addon-item{ padding:12px 14px; }
  .addon-item .price{ font-size:1.2rem; }
}

/* =========================================
   Prominenter CTA unter den Paketen (Index)
   ========================================= */

.cta-actions{
  display:flex;
  flex-direction:column;            /* mobil gestapelt */
  align-items:center;               /* mittig */
  justify-content:center;
  gap:14px;
  margin:24px 0 8px;
}

/* ab Tablet nebeneinander, zentriert */
@media (min-width: 860px){
  .cta-actions{ flex-direction:row; }
}

/* Haupt-CTA */
.btn-cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: clamp(12px, 1.8vw, 16px) clamp(22px, 3vw, 36px);
  border:0;
  border-radius:999px;
  font-weight:800;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  letter-spacing:.2px;
  color:#fff;
  background: linear-gradient(135deg, #7c5cff 0%, #3db1ff 100%);
  box-shadow:
    0 10px 28px rgba(124,92,255,.35),
    0 2px 10px rgba(0,0,0,.35);
  transform: translateZ(0);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-cta:hover{
  transform: translateY(-1px);
  box-shadow:
    0 14px 34px rgba(124,92,255,.45),
    0 3px 12px rgba(0,0,0,.45);
}

.btn-cta:active{
  transform: translateY(0);
  filter: brightness(.96);
}

.btn-cta:focus-visible{
  outline: 2px solid #9ecbff;
  outline-offset: 3px;
}

/* sanfter Schein beim Hover */
.btn-cta::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius:inherit;
  pointer-events:none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(157,205,255,.25), transparent 70%);
  opacity:0;
  transition: opacity .2s ease;
}
.btn-cta:hover::after{ opacity:.25; }

/* Sekundär-Link dezenter */
.btn-ghost-cta{
  border-color: rgba(255,255,255,.25);
}
.btn-ghost-cta:hover{
  border-color:#7c5cff;
  color:#fff;
}

/* weniger Bewegung für Nutzer mit reduzierter Bewegung */
@media (prefers-reduced-motion: reduce){
  .btn-cta, .btn-cta:hover{ transition:none; transform:none; }
  .btn-cta::after{ display:none; }
}

/* Runde Ecken fürs Logo (passt für <img class="logo">, .logo img und Dateinamen mit "logo") */
:root { --logo-radius: 12px; } /* gewünschter Radius anpassen */

img.logo,
.logo img,
img[src*="logo"] {
  border-radius: var(--logo-radius);
  display: block;
  overflow: hidden; /* falls das Bild in einem Wrapper steckt */
}

/* OPTIONAL: perfekt rundes Logo (Klasse zusätzlich vergeben) */
img.logo--round,
.logo--round img {
  width: auto; /* oder feste Größe setzen */
  border-radius: 50%;
  object-fit: cover;   /* schneidet sauber zu, wenn Container quadratisch ist */
  overflow: hidden;
}

/* === Promo-Bar: Mobile-Overlap fix === */
#promoBar { position: relative; z-index: 30; } /* über Content */

#promoBar .promo-inner{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;                 /* darf umbrechen */
  padding: 8px 48px 8px 10px;      /* Platz rechts für das X */
}

/* Text bekommt den flexiblen Platz */
#promoBar .promo-text{
  flex: 1 1 auto;
  min-width: 220px;
}

/* X immer rechts oben, überlappungsfrei */
#promoBar .promo-close{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  line-height: 26px;
  text-align: center;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  cursor: pointer;
}

/* Button bricht nicht in Worte */
#promoBar #promoCopy{ white-space: nowrap; }

/* Mobile: Button unter den Text, zentriert */
@media (max-width: 640px){
  #promoBar .promo-inner{ padding-right: 42px; }
  #promoBar #promoCopy{
    order: 3;              /* nach dem Text */
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}
/* Services-Seite: Standard-Flow statt 2-Spalten-Layout */
.services .wrap{ display:block; }

/* Karten-Grid & Karten-Optik (falls nicht schon vorhanden) */
.services .cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:14px;
}
.services .card{
  padding:16px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(255,255,255,.04);
  backdrop-filter: blur(2px);
}

/* 1-spaltige Section-Variante (keine 2-Spalten-Grid-Aufteilung) */
.section.simple .wrap { display:block; }

/* Karten-Grid nur auf der Services-Seite */
.page-services .cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:16px;
  align-items: stretch;
}
.page-services .card{
  display:flex; flex-direction:column; height:100%;
  padding:16px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(2px);
}
.page-services .card h3{ margin:0 0 8px; }
.page-services .card ul{ margin:0; padding-left:18px; }

/* Hero in der Services-Seite mittig */
.page-services .lead { max-width: 840px; margin: 6px auto 0; opacity:.9; }
.page-services .cta-actions { justify-content:center; }


.compare-table{ width:100%; border-collapse:collapse; }
.compare-table th,.compare-table td{
  padding:8px 10px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.compare-table th{ text-align:left; opacity:.9; }
.compare-table td:nth-last-child(-n+3),
.compare-table th:nth-last-child(-n+3){ text-align:center; }

/* === INFO-KARTEN (anders als die Paket-Cards) === */
.section[aria-label="In allen Paketen enthalten"] .card,
.section[aria-label="Zahlung, Sicherheit, Betreuung"] .card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
}
.section[aria-label="In allen Paketen enthalten"] .card:hover,
.section[aria-label="Zahlung, Sicherheit, Betreuung"] .card:hover {
  transform: translateY(-2px);
}

/* Option: Paket-Cards bewusst kräftiger lassen (falls vorhanden .plan) */


/* === PAKET-VERGLEICH: schmaler und kompakter === */
.section[aria-label="Paket-Vergleich"] .card {
  max-width: 1000px;     /* schmaler als volle Breite */
  margin-inline: auto;   /* zentrieren */
  padding: 16px 18px;    /* etwas enger */
  background: rgba(255,255,255,.03); /* leicht abgesetzt */
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}

.section[aria-label="Paket-Vergleich"] .compare-table {
  font-size: .92rem;   /* kompaktere Schrift */
}

.section[aria-label="Paket-Vergleich"] .compare-table th,
.section[aria-label="Paket-Vergleich"] .compare-table td {
  padding: 8px 12px;   /* weniger Abstand */
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* Mobile: horizontales Scrollen erlauben, Tabelle braucht Mindestbreite */
.section[aria-label="Paket-Vergleich"] .card { overflow-x: auto; }
.section[aria-label="Paket-Vergleich"] .compare-table { min-width: 640px; }

/* etwas mehr Abstand ober-/unterhalb der Vergleichstabelle */
.section[aria-label="Paket-Vergleich"] { margin-top: 8px; }

/* =========================
   INFO-CARDS (gelb markiert)
   – klarer Unterschied zu Paket-Cards (.card.plan)
   ========================= */
.card.info{
  background: rgba(20,24,35,.44);
  border: 1px solid rgba(124,92,255,.22);
  box-shadow:
    inset 0 0 0 1px rgba(124,92,255,.06),
    0 10px 26px rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card.info:hover{
  transform: translateY(-2px);
  border-color: rgba(124,92,255,.38);
  box-shadow:
    inset 0 0 0 1px rgba(124,92,255,.10),
    0 14px 30px rgba(0,0,0,.32);
}
.card.info h4{ opacity:.95; }

/* Paket-Cards bewusst „kräftiger“ lassen (rot markiert) */


/* =========================
   Vergleichstabelle kompakter & schmaler
   ========================= */
.card.info.compare{
  max-width: 1000px;          /* schmaler als Vollbreite */
  margin-inline: auto;        /* zentrieren */
  padding: 16px 18px;         /* enger */
  background: rgba(18,22,32,.5);
  border: 1px solid rgba(255,255,255,.08);
}

.card.info.compare .compare-table{ font-size: .92rem; }
.card.info.compare .compare-table th,
.card.info.compare .compare-table td{
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.card.info.compare{ overflow-x: auto; }
.card.info.compare .compare-table{ min-width: 640px; }

/* =========================
   Überschrift (lila Bereich) hübsch & mittig
   ========================= */
.section-title{
  text-align: center;
  margin: 28px 0 14px;
  font-weight: 800;
  letter-spacing: .2px;
  position: relative;
}
.section-title::after{
  content: "";
  display: block;
  width: 82px; height: 2px;
  margin: 10px auto 0;
  background: linear-gradient(90deg,
    rgba(124,92,255,0),
    rgba(124,92,255,.7),
    rgba(124,92,255,0));
  box-shadow: 0 0 28px rgba(124,92,255,.55);
  border-radius: 2px;
}

/* etwas engere Abstände in den Info-Sektionen */
.section[aria-label="In allen Paketen enthalten"] .grid,
.section[aria-label="Zahlung, Sicherheit, Betreuung"] .grid{
  gap: 16px 18px;
}

/* INFO-Karten (In allen Paketen, Zahlung/Sicherheit/Betreuung) – Überschreibt .card */
section[aria-label="In allen Paketen enthalten"] .card,
section[aria-label="Zahlung, Sicherheit, Betreuung"] .card,
.card.info{
  background: rgba(20,24,35,.60) !important;
  border: 1px solid rgba(124,92,255,.28) !important;
  box-shadow:
    inset 0 0 0 1px rgba(124,92,255,.06),
    0 10px 26px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(6px);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
section[aria-label="In allen Paketen enthalten"] .card:hover,
section[aria-label="Zahlung, Sicherheit, Betreuung"] .card:hover,
.card.info:hover{
  transform: translateY(-2px);
  border-color: rgba(124,92,255,.40) !important;
}

table.comparison{
  width:100%;
  border-collapse: collapse;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  overflow:hidden;
  background: rgba(20,24,35,.55);
}
.comparison th, .comparison td{
  padding:12px 14px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.comparison thead th{
  font-weight:700;
  background: rgba(146,176,255,.08);
}
.comparison tbody tr:hover{
  background: rgba(255,255,255,.03);
}
.comparison td strong{ font-weight:800; }

/* Icons im Tabellenkopf */
.comparison th.with-ico {
  align-items:center;
  gap:8px;
}

.comparison .ico {
  width:18px;
  height:18px;
  flex:0 0 18px;
  vertical-align:middle;
}

.comparison .ico.good {
  fill:#52ffaa;
  filter: drop-shadow(0 0 8px rgba(82,255,170,.4));
}

.comparison .ico.bad {
  fill:#ff6b6b;
  filter: drop-shadow(0 0 8px rgba(255,107,107,.4));
}

/* ===== Reviews — Glass Cards + bessere Navigation ===== */
.reviews-section { padding: 36px 0; }

.reviews-head .headline { margin-bottom: 6px; }
.reviews-head .sub { opacity: .7; }

.reviews-rail {
  position: relative;
  margin-top: 14px;
}

#reviewsTrack {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(520px, 88vw);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px 4px 16px;
  -webkit-overflow-scrolling: touch;
}
#reviewsTrack::-webkit-scrollbar { height: 8px; }
#reviewsTrack::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #6ea8ff33, #9b6bff33);
  border-radius: 99px;
}

/* Karte */
.review-card{
  scroll-snap-align: start;
  border-radius: 16px;
  padding: 16px 18px;
  background: radial-gradient(120% 120% at 0% 0%, #8bd2ff0f 0, transparent 45%) ,
              radial-gradient(120% 120% at 100% 100%, #a58bff0f 0, transparent 45%) ,
              rgba(16,18,28,.55);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(140,180,255,.04);
  backdrop-filter: blur(8px);
  min-height: 140px;
}

/* Head (Avatar + Name) */
.review-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.review-head img{
  width:42px; height:42px; border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.15);
  box-shadow: 0 0 0 3px rgba(120,160,255,.12);
}
.review-author{ font-weight:700; letter-spacing:.2px; }
.review-meta{ font-size:12px; opacity:.75; display:flex; align-items:center; gap:8px; }

/* Sterne (nutzt deine <i class="star"> Struktur) */
.stars{ display:inline-flex; gap:2px; line-height:1; }
.star::before{
  content: '★';
  font-size: 14px;
  color:#ffd479;
  text-shadow: 0 0 6px rgba(255,212,121,.55);
}
.star.dim::before{
  color: rgba(255,255,255,.25);
  text-shadow:none;
}

/* Text */
.review-text{
  color:#e8efff;
  line-height:1.55;
  opacity:.95;
}

/* Pfeile (schwebende, runde Buttons) */
.reviews-rail .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(18,22,34,.65);
  color:#cfe2ff;
  display:grid; place-items:center;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  transition: background .2s, transform .12s, color .2s;
}
.reviews-rail .nav:hover{ background: rgba(46,82,154,.7); color:#fff; }
.reviews-rail .nav:active{ transform:translateY(-50%) scale(.97); }
.reviews-rail .prev{ left:-6px; }
.reviews-rail .next{ right:-6px; }

/* Score rechts neben Überschrift hübscher */
.reviews-head .score{
  display:flex; align-items:center; gap:12px;
  font-size:14px; opacity:.9;
}
.reviews-head .score strong{
  font-size:28px; line-height:1; letter-spacing:.4px;
  color:#eaf2ff;
  text-shadow:0 0 10px rgba(120,180,255,.25);
}
.reviews-head .mini{ font-size:12px; opacity:.7; }

/* Add-on Grid */
.addon-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
  margin-top:10px;
}

/* Kachel-Look */
.addon-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:transform .15s ease, box-shadow .2s, background .2s, border-color .2s;
}

/* Hover */
.addon-item:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.06);
  border-color:rgba(124,92,255,.35);
}

/* Checkbox als pill */
.addon-item input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:22px;height:22px;
  border-radius:8px;
  border:1.5px solid rgba(255,255,255,.35);
  display:grid; place-items:center;
  background:transparent; outline:none; cursor:pointer;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.addon-item input[type="checkbox"]::before{
  content:"";
  width:12px;height:12px;border-radius:5px;
  background:transparent; transform:scale(.65);
  transition:background .15s;
}
.addon-item input[type="checkbox"]:checked{
  border-color:#7c5cff; background:rgba(124,92,255,.18);
  box-shadow:0 0 0 3px rgba(124,92,255,.12) inset;
}
.addon-item input[type="checkbox"]:checked::before{ background:#7c5cff; }

/* Textspalten */
.addon-item .name{
  flex:1 1 auto;
  font-weight:600;
  color:#e8eefb;
  letter-spacing:.1px;
}
.addon-item .price{
  font-weight:800;
  letter-spacing:.2px;
  white-space:nowrap;
}
.addon-item .price small{
  opacity:.8; font-weight:600; margin-left:4px;
  font-size:.9em;
}

/* Aktiver Zustand (mit JS gesetzt oder via :has in modernen Browsern) */
.addon-item.on,
.addon-item:has(input[type="checkbox"]:checked){
  border-color:rgba(124,92,255,.85);
  background:linear-gradient(180deg, rgba(124,92,255,.16), rgba(34,40,58,.30));
  box-shadow:
    0 2px 10px rgba(0,0,0,.20),
    0 0 0 1px rgba(124,92,255,.35);
}
.addon-item.on .name,
.addon-item:has(input:checked) .name{ color:#fff; }
.addon-item.on .price,
.addon-item:has(input:checked) .price{ color:#fff; }

/* Global smooth scroll für Anker & programmatic scrolls */
html {
  scroll-behavior: auto;
}

html { scroll-behavior: auto; }
[id] { scroll-margin-top: var(--header-h, 80px); } /* Anker unter fixem Header */


/* Fix für festen Header: springt nicht darunter */
[id] {                     /* oder gezielter: section[id], .anchor, h2[id] … */
  scroll-margin-top: var(--header-h, 80px);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  padding: 2rem;
  position: relative;
  z-index: 2; /* über Canvas */
}

.card {
  background: rgba(20, 20, 20, 0.7);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  color: #fff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.card img {
  max-width: 100%;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.card a {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.6rem 1.2rem;
  background: #28496f;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.3s;
}

.card a:hover {
  background: #3f7ed6;
}

/* Overlay, immer über Canvas/Starfield */

.preview.open {               /* geöffnet */
  display: flex;
  animation: preview-fade .25s ease-out;
}
@keyframes preview-fade { from {opacity: 0;} to {opacity: 1;} }

.preview.open .preview__content { transform: scale(1); opacity: 1; }



.preview__close:hover { opacity: 1; }

/* Body-Scroll sperren, wenn Overlay offen */
body.no-scroll { overflow: hidden; }

/* --- Demo-Section --- */
.section.demos { position: relative; z-index: 2; padding: 3rem 1.25rem; }
.section.demos h2 { font-size: 2rem; margin-bottom: .5rem; }
.section.demos .sub { opacity: .8; margin-bottom: 1.5rem; }

.demo-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 1.25rem;
}
.demo-card{
  background: rgba(20,20,25,.65);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 1.25rem;
  color:#e9eef6;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.demo-card h3{ margin: .25rem 0 .5rem; }
.demo-card .btn{
  display:inline-block; margin-top:.75rem; padding:.6rem 1rem;
  border-radius:8px; text-decoration:none; background:#5aaaff; color:#fff;
}
.demo-card .btn:hover{ background:#3f7ed6; }

/* --- Preview Overlay --- */
.preview.open{ display:flex; animation: preview-fade .25s ease-out; }
@keyframes preview-fade{ from{opacity:0} to{opacity:1} }

.preview.open .preview__content{ transform: scale(1); opacity:1; }


/* Body-Scroll sperren, wenn Overlay offen */
body.no-scroll{ overflow:hidden; }

/* Falls globale iframe-Defaults existieren (Bootstrap Embeds etc.) */
iframe{ max-width: none; }

/* Sicherstellen, dass dein Canvas darunter liegt */
#starfield{ position:fixed; inset:0; z-index:0; }

.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.demo-card {
  background: rgba(20,20,25,.65);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

.demo-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  background: #0a0f16;
  overflow: hidden;
}
.demo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.demo-meta {
  padding: 1rem;
  text-align: center;
}
.demo-meta h3 {
  margin: 0 0 .75rem;
  color: #e9eef6;
}
.demo-meta .btn {
  display: inline-block;
  padding: .6rem 1rem;
  border-radius: 8px;
  background: #5aaaff;
  color: #fff;
  border: 0;
  cursor: pointer;
}
.demo-meta .btn:hover {
  background: #3f7ed6;
}

.demo-card {
  display: flex;
  flex-direction: column;
  background: rgba(20,20,25,.65);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  overflow: hidden;          /* sorgt dafür, dass das Bild die Box sauber abdeckt */
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* Bild oben nimmt komplette Breite */
.demo-thumb {
  width: 100%;
  height: 200px;              /* feste Höhe für alle Previews, kannst du anpassen */
  overflow: hidden;
}

.demo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* Bild deckt den Container vollständig ab */
  display: block;
}


/* Meta-Bereich bleibt unten */
.demo-meta {
  padding: 1rem;
  text-align: center;
  background: rgba(10,10,15,.8);  /* optional dunkler Balken für Text */
}
.demo-meta h3 {
  margin: 0 0 .75rem;
  color: #fff;
  font-weight: 600;
}
.demo-meta .btn {
  display: inline-block;
  padding: .6rem 1rem;
  border-radius: 8px;
  background: #5aaaff;
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: background .2s;
}
.demo-meta .btn:hover {
  background: #3f7ed6;
}

.preview{ position:fixed; inset:0; display:none; justify-content:center; align-items:center; background:rgba(0,0,0,.88); z-index:9999; }
.preview.open{ display:flex; }
/* Body-Scroll sperren */
body.no-scroll{ overflow:hidden; }

.nav-toggle{
position: absolute;
right: 16px;
top: 14px;
width: 42px;
height: 42px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 12px;
background: rgba(11,14,22,.6);
backdrop-filter: blur(8px);
display: flex; /* wichtig /
flex-direction: column; / wichtig /
gap: 5px; / Abstand zwischen Strichen */
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 12;
}

.nav-toggle .bar{
all: unset; /* reset gegen globale .bar-Styles */
display: block;
position: static;
width: 22px;
height: 2px;
background: #cfe0ff;
border-radius: 2px;
}

.nav-open .nav-toggle .bar:nth-child(1){ transform: translateY(5px) rotate(45deg); }
.nav-open .nav-toggle .bar:nth-child(2){ opacity: 0; }
.nav-open .nav-toggle .bar:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

/* Track (Wrapper) mittig ausrichten */
#reviewsTrack,
.reviews-track {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Bewertungs-Karte mittig und responsive */
.review-card {
  margin: 0 auto;
  width: min(92vw, 720px);
  max-width: 720px;
  text-align: center;
}

@media (max-width: 768px) {
  .comparison {
    display: none;
  }
}

@media (max-width: 768px) {
  .mini {
    display: none;
  }
}

/* ========== Mobile Toggle (Hamburger) ========== */
.nav-toggle{
  position: fixed; inset: 16px 16px auto auto;
  width: 42px; height: 42px; border: 0; border-radius: 10px;
  background: color-mix(in srgb, var(--header-bg, rgba(32,32,36,.6)) 40%, transparent);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  cursor: pointer; z-index: 2000;
}
.nav-toggle .bar{
  display:block; width:24px; height:2px; margin:4px 0;
  background: currentColor; transition: transform .25s ease, opacity .2s ease;
}
body.nav-open .nav-toggle .bar:nth-child(1){ transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle .bar:nth-child(2){ opacity:0; }
body.nav-open .nav-toggle .bar:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }


@media (max-width: 768px){
  /* Panel */
  #site-menu.site-nav{
    position: fixed; inset: 0 0 0 auto;
    width: min(86vw, 360px); height: 100dvh;
    background: var(--nav-panel-bg, rgba(28,28,32,0.88)); /* passt zu deinem Style, nicht schwarz voll */
    backdrop-filter: blur(10px);
    border-left: 1px solid rgba(255,255,255,.08);
    transform: translateX(100%); transition: transform .3s ease;
    z-index: 1999; overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  body.nav-open #site-menu.site-nav{ transform: translateX(0); }

  /* Menüliste (dein HTML hat <ul> mit direkten <a>) */
  .mnav__menu{
    display: flex; flex-direction: column; gap: 8px;
    padding: 20px 16px 24px;
  }
  .mnav__menu > a{
    display: block; padding: 12px 10px; border-radius: 10px; text-decoration: none;
    line-height: 1.2; background: color-mix(in srgb, currentColor 8%, transparent);
  }

  /* Transparentes Overlay zum Schließen (kein Schwarzer Film) */
  .nav-backdrop{
    position: fixed; inset: 0; z-index: 1990;
    background: transparent; backdrop-filter: blur(2px); /* nur leicht, kein Verdunkeln */
    opacity: 1; transition: opacity .25s ease;
  }
  body:not(.nav-open) .nav-backdrop{ opacity: 0; pointer-events: none; }

  /* Button sichtbar nur mobil */
  .nav-toggle{ display: grid; }
}
/* Desktop: Toggle ausblenden, Nav normal lassen */
@media (min-width: 769px){
  .nav-toggle{ display: none; }
}

/* Scroll-Lock wenn offen */
body.nav-open{ overflow: hidden; }


/* === Anti-Blur-Patch für Mobile === */
@media (max-width: 768px){
  /* Overlay nur klickbar, kein Weichzeichnen */
  .nav-backdrop{
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Panel ohne Blur, nur leicht transparente, zu deinem Stil passende Fläche */
  #site-menu.site-nav{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(20,22,26,0.92) !important; /* ggf. feintunen */
  }
}

/* Optional: auch der Toggle-Button ohne Blur */
.nav-toggle{
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ==== Brand-Header Tweaks ==== */
:root{
  --accent: #22d3ee;                 /* an dein Akzent anpassen */
  --brand-gap: clamp(12px, 1.6vw, 22px);
}

/* Logo + Titel enger steuern */
header .brand{
  display: flex;
  align-items: center;
  gap: var(--brand-gap);              /* -> Titel rückt nach rechts */
}

/* Titel: dicker + Glow */
header .brand h1{
  margin: 0;
  font-weight: 900;                   /* dicker */
  letter-spacing: .2px;
  color: #eaf2ff;
  /* dezenter Dauer-Glow (ohne Blur-Filter) */
  text-shadow:
    0 0 6px rgba(34,211,238,.18),
    0 0 18px rgba(34,211,238,.12);
}

/* stärkere Leuchtwirkung bei Interaktion/Offcanvas offen */
header:hover .brand h1,
body.nav-open header .brand h1{
  text-shadow:
    0 0 10px rgba(34,211,238,.32),
    0 0 28px rgba(34,211,238,.22),
    0 0 46px rgba(34,211,238,.14);
}

/* optional: etwas mehr Abstand des ganzen Brand-Blocks vom linken Rand */
@media (min-width: 769px){
  header .wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding-left: clamp(12px, 3vw, 56px);  /* wenn du "weiter rechts" noch stärker willst */
  }
}

/* Mobile Feinheiten */
@media (max-width: 768px){
  header .brand h1{ font-size: 1.1rem; }
}


/* Lenis-Verträglichkeit: niemals zusätzlich CSS-smooth nutzen */
html { scroll-behavior: auto !important; }

/* Rail darf vertikal nicht sperren */
.reviews-section, .reviews-rail { 
  touch-action: pan-y;              /* vertikales Scrollen erlauben */
  overscroll-behavior: contain;     /* kein Browser-„Bounce“ in den Body */
}
.reviews-rail::before,
.reviews-rail::after,
.reviews-fader,
.reviews-overlay,
.reviews-hitbox { pointer-events: none !important; }


/* Close/X im Promo-Banner auf Mobile ausblenden */
@media (max-width: 768px){
  #promoBar .promo-close,
  #promoBar [data-promo-close],
  #promoBar .btn-close,
  #promoBar .close {
    display: none !important;
  }
  /* Falls rechts Platz für das X reserviert war */
  #promoBar { padding-right: 16px !important; }
}

/* === NAV: Glass-Style (Desktop) ======================================= */
:root{
  --brand: #2fc5ff;      /* Akzentfarbe für Hover/Active */
  --nav-max: 1200px;     /* maximale Breite des Inhalts */
  --nav-pad: 14px 20px;  /* Innenabstand der Leiste */
}

@media (min-width: 769px){
  /* Header-Leiste */
  header{
    position: sticky;
    top: 0;
    z-index: 40;
    background: linear-gradient(180deg, rgba(11,14,22,.55), rgba(11,14,22,.25));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 6px 24px rgba(0,0,0,.25);
  }
  /* wenn gescrollt: etwas dichter/undurchsichtiger */
  header.is-scrolled{
    background: rgba(11,14,22,.75);
  }

  /* Innen-Layout */
  header .wrap{
    max-width: var(--nav-max);
    margin: 0 auto;
    padding: var(--nav-pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  /* deine Navigation (#mnav-menu hat direkt <a> als Kinder) */
  nav.site-nav{ display: block; }
  #mnav-menu{
    display: flex;
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #mnav-menu > a{
    text-decoration: none;
    color: #e8f2ff;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: 10px;
    transition: background .2s ease, color .2s ease, opacity .2s ease;
  }
  #mnav-menu > a:hover{
    background: rgba(255,255,255,.10);
  }
  /* aktiver Link (falls du aria-current="page" setzt) */
  #mnav-menu > a[aria-current="page"],
  #mnav-menu > a.is-active{
    color: #fff;
    background: rgba(49,168,255,.18);
    box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
  }

  /* Burger-Button auf Desktop ausblenden */
  .nav-toggle{ display: none !important; }
}


/* === Demo-Sektion: zentriert & schmal ================================ */
.section.demos{
  --demos-max: 1100px;   /* hier Breite anpassen */
  --demos-pad: 20px;     /* seitlicher Innenabstand */
}

.section.demos > h2,
.section.demos > .sub{
  max-width: var(--demos-max);
  margin: 0 auto 12px;
  padding: 0 var(--demos-pad);
  text-align: center;
}

.section.demos > .demo-grid{
  max-width: var(--demos-max);
  margin: 0 auto;
  padding: 0 var(--demos-pad);
  display: grid;
  gap: 28px;

}

/* Responsive Stufen */
@media (max-width: 1100px){
  .section.demos > .demo-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px){
  .section.demos > .demo-grid{ grid-template-columns: 1fr; }
}

/* Karten-Feinschliff (nur in der Demos-Sektion) */
.section.demos .demo-card{ border-radius: 20px; overflow: hidden; }
.section.demos .demo-thumb img,
.section.demos .demo-thumb picture,
.section.demos .demo-thumb video{
  display: block; width: 100%; height: auto; object-fit: cover;
}


/* --- Preview Overlay (eine Quelle, kein Duplikat) --- */
.preview{
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
}
.preview[aria-hidden="false"]{ display:flex; }

.preview__content{
  position: relative;
  width: min(920px, 96vw);
  height: min(96vh, 800px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: #0b0e16;
  overflow: hidden;
}

.preview__frame{
  width: 100%;
  height: 100%;
  border: 0;
  background:#0b0e16;
}

.preview__close{
  position: absolute;
  top: 6px; right: 8px;
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.3);
  color: #cfe0f5;
  cursor: pointer;
}
.preview__close:hover{ background: rgba(255,255,255,.08); }


/* Text-Rotator */
.hero-title { font-weight: 700; font-size: clamp(28px, 4vw, 52px); line-height: 1.1; }
.rotator {
  --tr-duration: 600ms;      /* Übergang */
  --tr-interval: 1800ms;     /* Standzeit je Wort */
  --shadow: 0 0 .6em rgba(0,0,0,.25);
  position: relative; display: inline-block; vertical-align: bottom;
  height: 1.05em; overflow: hidden;
}
.rotator__track {
  display: flex; flex-direction: column; will-change: transform;
  transition: transform var(--tr-duration) cubic-bezier(.22,1,.36,1);
  gap: 0.2em;
}
.rotator__item {
 white-space: nowrap;
  text-shadow: var(--shadow);
  opacity: .98;
}
@media (prefers-reduced-motion: reduce) {
  .rotator__track { transition: none; }
}

/* Mini-Rotator-Animation (fade+slide) */
.rotator{ display:inline-block; will-change:opacity,transform; }
.rotator.is-in  { opacity:1; transform:translateY(0);     transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
.rotator.is-out { opacity:0; transform:translateY(-8px);  transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
@media (prefers-reduced-motion: reduce){
  .rotator,.rotator.is-in,.rotator.is-out{ transition:none; transform:none; opacity:1; }
}


/* Mobile-Nav Fix: Panel über Overlay heben */
header { z-index: 3000 !important; }            /* Header-Stacking erhöhen */
#site-menu.site-nav { z-index: 2999 !important; }  /* Panel knapp darunter */
.nav-backdrop { z-index: 2900 !important; }        /* Overlay darunter */


/* Mobile-Nav: links andocken (überschreibt die frühere Regel) */
@media (max-width: 768px){
  #site-menu.site-nav{
    inset: 0 auto 0 0;          /* links = 0, right = auto */
    transform: translateX(-100%);/* von links reinfahren */
  }
  body.nav-open #site-menu.site-nav{
    transform: translateX(0);
  }
}


/* services.html: aside.card im Handy-Modus unter den Inhalt schieben */
@media (max-width: 768px){

  /* Elterndiv mit aside.card vertikal stapeln (robust dank :has) */
  .content-wrap:has(> aside.card),
  .container:has(> aside.card),
  .row:has(> aside.card),
  .grid:has(> aside.card){
    display: flex;
    flex-direction: column;
  }

  /* aside nach unten, volle Breite */
  .content-wrap > aside.card,
  .container > aside.card,
  .row > aside.card,
  .grid > aside.card{
    order: 2;
    width: 100%;
    margin-top: 16px;
  }

  /* Hauptinhalt davor */
  .content-wrap > :not(aside.card),
  .container > :not(aside.card),
  .row > :not(aside.card),
  .grid > :not(aside.card){
    order: 1;
  }

  /* für alte Layouts mit Floats */
  aside.card{ float: none !important; clear: both; }
}

/* === Single WOW Card === */
.showcase { padding-block: clamp(24px, 4vw, 56px); }

.showcase-card{
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(16px, 3vw, 28px);
  padding: clamp(18px, 4vw, 36px);
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(120,140,220,.28), rgba(80,100,180,.22));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  overflow: hidden;
}

/* Aurora Glow */
.showcase-card::before{
  content:"";
  position:absolute; inset:-20% -10%;
  background:
    radial-gradient(40% 40% at 18% 28%, rgba(110,231,255,.20), transparent 60%),
    radial-gradient(38% 38% at 80% 20%, rgba(139,92,246,.20), transparent 60%);
  filter: blur(42px);
  z-index:-1;
}

/* Inhalt */
.showcase-text .eyebrow{
  color:#b8c0ff; letter-spacing:.12em; text-transform:uppercase; font-size:.9rem; margin:0 0 .35rem;
  opacity:.9;
}
.showcase-text h2{
  margin:0 0 1rem; line-height:1.05; font-size:clamp(1.8rem, 3.5vw, 3rem);
}
.showcase-text .btn{ margin-top:.5rem; }

/* Bild */
.showcase-media img{
  display:block; width:100%; height:auto;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.40);
}

/* Responsiv: einspaltig, Bild unten */
@media (max-width: 900px){
  .showcase-card{ grid-template-columns: 1fr; }
  .showcase-media{ order: 2; }
}


/* ===== Referenzen (2er Grid, Glas-Look, passt zu deinem Theme) ===== */
.refs{ position:relative; z-index:2; padding:28px 24px 60px; }
.refs .wrap{ max-width:1100px; margin:0 auto; }
.refs-head{ margin-bottom:14px; }
.refs-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* IMMER 2 pro Reihe */
  gap:16px;
}

.ref-card{
  position:relative;
  border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 40px rgba(3,10,20,.35);
  overflow:hidden;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.ref-card::before{
  content:"";
  position:absolute; inset:-20% -10%;
  background:
    radial-gradient(40% 40% at 18% 28%, rgba(110,231,255,.15), transparent 60%),
    radial-gradient(38% 38% at 80% 20%, rgba(139,92,246,.15), transparent 60%);
  filter: blur(40px);
  z-index:0;
}
.ref-card:hover{
  transform: translateY(-2px);
  border-color: rgba(124,92,255,.28);
  box-shadow: 0 16px 60px rgba(3,10,20,.45), var(--ring);
}

.ref-link{ display:grid; grid-template-rows:auto 1fr; height:100%; color:inherit; text-decoration:none; position:relative; z-index:1; }

.ref-media{ width:100%; aspect-ratio:16/9; background:#0a0f16; overflow:hidden; }
.ref-media img{ width:100%; height:100%; object-fit:cover; display:block; }

.ref-content{ padding:14px 16px 16px; background: rgba(10,10,15,.6); }
.ref-content h3{ margin:0 0 6px; color:#eaf2ff; font-weight:800; letter-spacing:.2px; }
.ref-tags{ margin:0 0 10px; color:#cfe4ff; opacity:.85; font-size:.95rem; }
.ref-cta{
  display:inline-block;
  padding:.5rem .8rem;
  border-radius:10px;
  background: linear-gradient(180deg, rgba(49,168,255,.28), rgba(124,92,255,.28));
  border:1px solid rgba(255,255,255,.10);
  font-weight:700;
}
.ref-card:hover .ref-cta{ box-shadow: var(--ring); }


/* === Referenzen (2 Cards pro Reihe, Glass + Glow) ====================== */
.gradient-text{
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.refs{ position:relative; z-index:2; padding: 28px 24px 56px; }
.refs .wrap{ max-width: 1100px; }
.refs-head{ margin: 8px 0 18px; }
.refs-head .sub{ max-width: 720px; }

/* Grid: immer 2 Spalten auf Desktop/Tablet, 1 Spalte auf Mobile */
.refs-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 768px){
  .refs-grid{ grid-template-columns: 1fr; }
}

/* Card */
.ref-card{
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 12px;
  padding: 18px;
  min-height: 120px;
  border-radius: 16px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(105,170,255,.10), transparent 45%),
    radial-gradient(120% 120% at 100% 100%, rgba(162,130,255,.10), transparent 45%),
    rgba(12,16,24,.55);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  overflow: hidden;
  isolation: isolate;
  transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Soft Glow ring on hover (wie dein Style) */
.ref-card:hover{
  transform: translateY(-2px);
  border-color: rgba(124,92,255,.22);
  box-shadow:
    0 16px 50px rgba(0,0,0,.42),
    0 0 40px 8px rgba(49,168,255,.20),
    0 0 80px 18px rgba(124,92,255,.10);
}

/* dezente “Aurora”-Fläche */
.ref-card::before{
  content:"";
  position: absolute; inset: -20% -10%;
  background:
    radial-gradient(40% 40% at 18% 28%, rgba(110,231,255,.14), transparent 60%),
    radial-gradient(38% 38% at 80% 20%, rgba(139,92,246,.14), transparent 60%);
  filter: blur(38px);
  z-index: -1;
}

/* Content */
.ref-meta h3{
  margin: 0 0 6px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #eaf2ff;
}
.ref-meta .tags{
  margin: 0;
  color: #bcd1ef;
  opacity: .9;
  font-size: .95rem;
}

/* Button kompakter */
.ref-btn.btn{
  padding: 10px 14px;
  border-radius: 12px;
  white-space: nowrap;
}

/* Unsichtbarer Full-Card-Link (macht die ganze Karte klickbar) */
.ref-link{
  position: absolute; inset: 0; z-index: 1;
}
.ref-btn{ position: relative; z-index: 2; } /* Button bleibt klickbar */

/* Optional: Bild-Placeholder – falls du pro Card ein Thumb willst */
.ref-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .08;                 /* nur leicht sichtbar */
  background-size: cover;
  background-position: center;
  pointer-events: none;
}
/* Beispiel: pro Karte eigene BG via nth-child (entfernen/ersetzen, wenn echte Bilder) */
.refs-grid .ref-card:nth-child(1) .ref-bg{ background-image: linear-gradient(#fff0,#fff0), url('https://images.pexels.com/photos/1024993/pexels-photo-1024993.jpeg'); }
.refs-grid .ref-card:nth-child(2) .ref-bg{ background-image: linear-gradient(#fff0,#fff0), url('beispielseiten/Ferienwohnungs-Webseite/images/hero/hero1.jpg'); }
.refs-grid .ref-card:nth-child(3) .ref-bg{ background-image: linear-gradient(#fff0,#fff0), url('https://images.pexels.com/photos/6234610/pexels-photo-6234610.jpeg'); }
.refs-grid .ref-card:nth-child(4) .ref-bg{ background-image: linear-gradient(#fff0,#fff0), url('https://cdn.pixabay.com/photo/2023/08/31/15/42/grill-8225405_1280.jpg'); }
.refs-grid .ref-card:nth-child(5) .ref-bg{ background-image: linear-gradient(#fff0,#fff0), url('https://cdn.pixabay.com/photo/2015/12/07/10/49/electrician-1080554_1280.jpg'); }
.refs-grid .ref-card:nth-child(6) .ref-bg{ background-image: linear-gradient(#fff0,#fff0), url('https://cdn.pixabay.com/photo/2016/12/24/16/16/massage-1929064_640.jpg'); }
.refs-grid .ref-card:nth-child(7) .ref-bg{ background-image: linear-gradient(#fff0,#fff0), url('https://cdn.pixabay.com/photo/2016/05/10/17/24/farm-shop-1384179_1280.jpg'); }
.refs-grid .ref-card:nth-child(8) .ref-bg{ background-image: linear-gradient(#fff0,#fff0), url('https://images.pexels.com/photos/3998421/pexels-photo-3998421.jpeg?auto=compress&cs=tinysrgb&w=1920'); }

/* Auf dieser Seite alte Demo-Section sicherheitshalber ausblenden */
.page-referenzen .section.demos,
.page-referenzen .demo-grid{ display:none !important; }


/* Abstand zwischen Überschrift und Button */
:where(h1,h2,h3,h4,h5,h6) + a.btn{
  display:inline-flex;         /* sichert, dass margin-top greift */
}

.reviews-section { display: none !important; }


/* Mehr Bildfläche + sichtbarer */
.ref-card{ 
  min-height: clamp(200px, 28vh, 320px);   /* vorher 120px */
}
.ref-card .ref-bg{
  opacity: .40;                            /* vorher .08 */
  transform: scale(1.06);                  /* Bild leicht vergrößern */
  transition: transform .3s ease, opacity .3s ease;
}
.ref-card:hover .ref-bg{
  opacity: .55;
  transform: scale(1.10);
}

/* Optional: nur die ERSTE Karte extra groß machen */
.refs-grid .ref-card:first-child{
  min-height: clamp(260px, 36vh, 420px);
}
.refs-grid .ref-card:first-child .ref-bg{
  opacity: .55;
  transform: scale(1.12);
}


/* ——— PRICING (isoliert; ändert NICHT deinen Seiten-Hintergrund) ——— */
.ic-pricing { padding: clamp(32px, 6vw, 72px) 16px; }
.ic-pricing__inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; gap: 20px;
  grid-template-columns: repeat(12, minmax(0,1fr));
}
.ic-plan {
  grid-column: span 12;
  background: #ffffff; color: #0b0e16;
  border: 1px solid #e6e9ef; border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding: 24px; display: flex; flex-direction: column; gap: 16px;
}
@media (min-width: 900px) {
  .ic-plan { grid-column: span 4; }
  .ic-plan--featured { transform: translateY(-6px); }
}

/* Header */
.ic-plan__head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ic-plan__title { margin:0; font-size: 1.25rem; font-weight: 700; letter-spacing:.2px; }
.ic-plan__tagline { margin:0; color:#687083; font-size:.95rem; }
.ic-plan__badge {
  margin-left:auto; padding:4px 10px; border-radius:999px;
  background:#eef6ff; color:#0667d0; font-weight:600; font-size:.8rem;
}

/* Price */
.ic-plan__price {
  display:flex; align-items:baseline; gap:8px;
  padding: 14px 16px; border-radius:12px; background:#f7f8fb; /* weißer Block */
  border:1px solid #edf0f5;
}
.ic-price__currency { font-size:1.25rem; font-weight:700; opacity:.8; }
.ic-price__value { font-size:2.5rem; font-weight:800; line-height:1; letter-spacing:.5px; }
.ic-price__period { font-size:.95rem; color:#687083; }

/* CTA */
.ic-plan__cta {
  display:inline-block; text-align:center; font-weight:700;
  padding:12px 16px; border-radius:10px; border:1px solid #d9e2f2;
  background:#1e5eff; color:#fff; text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ic-plan__cta:hover { transform: translateY(-1px); box-shadow:0 8px 20px rgba(30,94,255,.25); }
.ic-plan--featured .ic-plan__cta { background:#0a49ff; }

/* Features */
.ic-features { margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.ic-features li {
  position:relative; padding-left:26px; color:#2f3a4d; line-height:1.35;
}
.ic-features li::before{
  content:""; position:absolute; left:0; top:2px; width:18px; height:18px;
  border-radius:50%; border:2px solid #b7c6e6;
  box-shadow: inset 0 0 0 4px #ffffff;
}
.ic-plan--featured { border-color:#b9ccff; box-shadow:0 12px 32px rgba(10,73,255,.12); }


/* ===== Marketing-Optimiertes Card-Styling (Shop) ===== */
/* minimal-invasiv, nur für den Shop-Bereich */

/* Grundlayout */
.shop .grid{ align-items:start; gap:22px; }
.shop .card{
  background: linear-gradient(180deg, rgba(20,24,34,.92), rgba(12,16,26,.92));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.shop .card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.14);
}

/* Headline im Card-Header */
.shop .card > h3{
 align-items:center; gap:10px;
  margin: 4px 0 6px;
  font-weight: 800; letter-spacing:.2px; color:#f2f6ff;
}

/* Badge (Empfohlen/Beliebt) – dezenter Glow, hohe Wertigkeit */
.shop .card .badge{
  padding: 4px 10px; border-radius: 999px;
  background: rgba(49,168,255,.14);
  color: #d8e7ff; font-weight: 700; font-size: .78rem;
  border: 1px solid rgba(49,168,255,.28);
}

/* Nutzenzeile direkt unter dem Preis – emotionale Ebene */
.shop .card .card-sub{
  margin: 8px 0 10px;
  color: #b9c7dd; font-size: .95rem; line-height: 1.28;
  text-wrap: balance;
}

/* Preisblock (wird von JS gefüllt) – als „Wert-Kapsel“ */
.shop .card .price{
  display:inline-flex; align-items:baseline; gap:8px;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color:#fff; font-weight:900; letter-spacing:.2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  margin-bottom: 6px;
}

/* Featureliste – ruhiger, besser lesbar */
.shop .card .features{ margin: 8px 0 12px; padding-left: 18px; }
.shop .card .features li{
  color:#e4ecff; opacity:.92; line-height:1.35; margin: 6px 0;
}

/* CTA – wording stärker, volle Breite, klarer Hover */
.shop .card .btn.add{
  width:100%;
  background: linear-gradient(135deg, var(--brand,#31a8ff), var(--brand-2,#7c5cff));
  color:#fff; border:1px solid transparent;
  border-radius: 12px; height: 46px; font-weight: 800; letter-spacing:.2px;
  box-shadow: 0 14px 30px rgba(49,168,255,.28);
}
.shop .card .btn.add:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(49,168,255,.38);
}
.shop .card .btn.add:focus-visible{
  outline:2px solid #fff; outline-offset:2px;
}

/* „Empfohlen“-Karte mit subtiler Business-Rahmung */
.shop .card.popular{
  position: relative; z-index:0;
  border-color: rgba(124,92,255,.28);
}
.shop .card.popular::before{
  content:""; position:absolute; inset:-2px; border-radius:18px; z-index:-1;
  background: linear-gradient(135deg, var(--brand,#31a8ff), var(--brand-2,#7c5cff));
  filter: blur(.6px); opacity:.55;
}

/* Micro-Spacing Feinschliff */
.shop .card .price + .card-sub{ margin-top:10px }
.shop .card .features + .btn{ margin-top:6px }

/* Grid: gleiche Breite, gleiche Höhe pro Reihe */
.shop .grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(260px,1fr)); /* 3 Spalten desktop */
  gap:22px;
  align-items:stretch;        /* Cards füllen die Zeile */
}

/* Card als Spalte aufbauen */
.shop .card{
  display:flex;
  flex-direction:column;
  height:100%;                /* gleiche Höhe in der Zeile */
}

/* Inhalt darf wachsen – Button wird nach unten gedrückt */
.shop .card .features{ margin-bottom:auto; }     /* oder .card-sub {margin-bottom:auto;} */

/* Button: volle Breite, immer unten, gleiche Höhe */
.shop .card .btn.add{
  margin-top:auto;            /* schiebt ihn an das Card-Ende */
  width:100%;
  height:46px;
}

/* Responsive (2/1 Spalten) */
@media (max-width: 980px){
  .shop .grid{ grid-template-columns: repeat(2, minmax(240px,1fr)); }
}
@media (max-width: 640px){
  .shop .grid{ grid-template-columns: 1fr; }
}


/* ===== Nur Shop: Website-Pakete breiter & größer ===== */

/* Container etwas weiter aufziehen */
#shop .wrap.block{
  max-width: 1280px;          /* ggf. 1320/1400 testen */
  margin: 0 auto;
}

/* Karten breiter machen */
#shop .grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(340px, 1fr)); /* vorher kleiner */
  gap: 28px;
  align-items: stretch;
}

/* Karten etwas höher (gleich hoch) */
#shop .card{
  min-height: 560px;          /* bei Bedarf 580–600px */
  display: flex;
  flex-direction: column;
}

/* Inhalt nach oben, Button bleibt unten bündig */
#shop .card .features{ margin-bottom: auto; }
#shop .card .btn.add{ margin-top: auto; }

/* Responsiv beibehalten */
@media (max-width: 980px){
  #shop .grid{ grid-template-columns: repeat(2, minmax(300px,1fr)); }
  #shop .card{ min-height: 520px; }
}
@media (max-width: 640px){
  #shop .grid{ grid-template-columns: 1fr; }
  #shop .card{ min-height: unset; }
}


.co-risk{ margin:8px 0 0; color:var(--muted); font-size:.9rem; }
.co-alt{ margin-top:6px; }
.co-link{ font-size:.95rem; opacity:.85; text-decoration:underline; }
.co-link:hover{ opacity:1; }

.trustline{
  margin-top:10px; display:flex; align-items:center; gap:10px;
  font-size:.95rem; color:rgba(255,255,255,.8);
  padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  width:max-content; /* zentrieren? -> parent mit text-align:center */
}
.trustline .i{ width:16px; height:16px; opacity:.75; }
@media (max-width: 680px){
  .trustline{ font-size:.7rem; padding:7px 10px; }
}
.section-head{ text-align:center; }  /* parent von Überschrift/Subline/Pill */
.trustline{ margin:8px auto 0; }

/* Nur diese Überschrift in .wrap.block zentrieren */
.wrap.block > h2.headline.md{
  text-align:center !important;
}

/* 1) Container immer an Viewport anpassen */
.wrap{width:min(1200px,92vw);margin-inline:auto}

/* 2) Pricing-Grid flüssig (keine Breakpoint-Sprünge) */
#shop .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(14px,3vw,28px);
}

/* 3) Karten dürfen schrumpfen (kein fixed/min-width-Problem) */
#shop .card{min-width:0;width:auto}

/* 4) Fluid Typo/Abstände (optional, aber nice) */
h2.headline{font-size:clamp(28px,4vw,40px)}
.card p, .card li{font-size:clamp(14px,1.3vw,16px)}

/* 5) Medien stets responsiv */
img,video{max-width:100%;height:auto;display:block}

/* Sticky in den Pricing-Karten ausschalten */
#pricing .ic-plan__head,
#pricing .ic-plan__price,
#pricing [style*="position:sticky"]{
  position: static !important;
  top: auto !important;
}

.demos .chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px}
.demos .chips a{display:inline-block;padding:6px 10px;border:1px solid rgba(255,255,255,.15);
  border-radius:999px;font-size:.9rem;opacity:.9}
.demos .chips a:hover{opacity:1}
.demos .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.demos .btn--ghost{background:transparent;border:1px solid rgba(255,255,255,.25)}
.demos .micro{margin-top:10px;font-size:.95rem;opacity:.85}
.demos .trust{margin-top:4px;font-size:.9rem;opacity:.75}

/* ===== Preview Leadmagnet – neues Design ===== */
#vorschau{ scroll-margin-top:96px; } /* sticky-header offset */

/* Head + Sub zentriert */
.pv-lead .headline.md{ text-align:center; margin-bottom:6px; }
.pv-lead .sub{ text-align:center; opacity:.85; }

/* Trust-Pill */
.pv-trust{
  margin:12px auto 18px; padding:8px 14px; border-radius:999px;
  width:max-content; font-size:.95rem; color:rgba(255,255,255,.9);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(105,170,255,.10), transparent 45%),
    radial-gradient(120% 120% at 100% 100%, rgba(162,130,255,.10), transparent 45%),
    rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 6px 24px rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
}

/* Card rund um das Formular */
.pv-form{
  margin:14px auto 0; max-width:1000px;
  padding:clamp(16px,3vw,28px);
  border-radius:20px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(105,170,255,.08), transparent 45%),
    radial-gradient(120% 120% at 100% 100%, rgba(162,130,255,.08), transparent 45%),
    rgba(18,22,30,.65);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(8px) saturate(110%);
}

/* Grid: flüssig */
.pv-grid{
  display:grid;
  gap:clamp(10px,2vw,16px);
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom:12px;
}

.pv-form label{ display:block; font-size:.95rem; opacity:.95; }
.pv-form input,.pv-form textarea{
  width:100%; margin-top:6px; padding:14px 14px;
  border-radius:12px;
  background:rgba(53, 75, 117, 0.72);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.pv-form textarea{ min-height:110px; resize:vertical; }

/* Fokus-State (dezent, aber sichtbar) */
.pv-form input:focus,.pv-form textarea:focus{
  outline:none;
  border-color:rgba(120,170,255,.8);
  box-shadow:0 0 0 3px rgba(120,170,255,.25);
}

/* Checkbox hübsch */
.pv-dsgvo{ margin:12px 0; display:flex; align-items:center; gap:10px; opacity:.95; }
.pv-dsgvo input{ width:18px; height:18px; accent-color:#7caaff; }

/* Button groß, mit leichtem Glow – nutzt deine .btn, aber verstärkt hier */
.pv-lead .btn{
  width:100%; padding:14px 16px; font-weight:700; border-radius:12px;
  box-shadow:0 8px 26px rgba(80,120,255,.25);
  transform:translateZ(0);
}
.pv-lead .btn:hover{ transform: translateY(-1px); }

/* Kleingedrucktes & Messages */
.pv-micro{ margin-top:10px; font-size:.9rem; opacity:.75; text-align:left; }
.pv-msg{ margin-top:10px; font-weight:600; }

/* Honeypot unsichtbar */
.hp{ position:absolute; left:-9999px; opacity:0; }

/* Mobile Feinschliff */
@media (max-width: 640px){
  .pv-form{ padding:16px; border-radius:16px; }
  .pv-trust{ font-size:.7rem; }
}


/* ========== Showcase: Clean, tidy ========== */
#referenzen .showcase-card{
  display:grid; grid-template-columns: 1.1fr minmax(320px,420px);
  gap: clamp(20px,3vw,36px);
  padding: clamp(18px,3vw,28px);
  border-radius: 22px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
#referenzen .showcase-text{ align-self:center; }
#referenzen .eyebrow{
  letter-spacing:.12em; text-transform:uppercase; font-size:.9rem; opacity:.7; margin:0 0 8px;
}
#referenzen h3{ margin:0 0 10px; font-size: clamp(20px,2.2vw,26px); line-height:1.25; }

/* Chips schlicht */
#referenzen .chips{ display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 14px; padding:0; }
#referenzen .chips li{ list-style:none; }
#referenzen .chips a{
  display:inline-block; padding:7px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04);
  font-size:.9rem; opacity:.9;
}
#referenzen .chips a:hover{ opacity:1; }

/* Aktionen: genau 2 Buttons, Primary rechts leicht betont */
#referenzen .actions{ display:flex; gap:12px; flex-wrap:wrap; margin:6px 0 10px; }
#referenzen .actions .btn{ padding:11px 16px; border-radius:12px; }
#referenzen .actions .btn.btn--ghost{ background:transparent; border:1px solid rgba(255,255,255,.22); }
#referenzen .actions .btn-primary{ box-shadow:0 10px 24px rgba(90,130,255,.25); }

/* Micro-Proof & Trust: klein, gleiche Linie */
#referenzen .micro, #referenzen .trust{
  font-size:.95rem; opacity:.78; margin:6px 0 0;
}

/* Bild: einheitliches Format, ruhiger Schatten */
#referenzen .showcase-media{ align-self:center; }
#referenzen .showcase-media img{
  width:100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius:16px; display:block;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* Mobile: Stack */
@media (max-width: 860px){
  #referenzen .showcase-card{ grid-template-columns: 1fr; }
  #referenzen .showcase-media{ order:-1; }
}

/* ========== Responsive Compare Table (10/10) ========== */
.compare .headline { margin-bottom: 1rem; }
.cmp-card{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 12px 12px 6px;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}

.cmp-table{
  width:100%;
  border-collapse: collapse;
  color: #fff;
  --row-border: rgba(255,255,255,.10);
  --muted: rgba(255,255,255,.75);
  --good: #2bd576;
  --bad:  #ff5d5d;
  /* Labels für Mobile */
  --th-2: 'ilijaCodes';
  --th-3: 'Andere Anbieter';
}

.cmp-table th, .cmp-table td{
  padding: 14px 16px;
  border-top: 1px solid var(--row-border);
  vertical-align: top;
}
.cmp-table thead th{
  font-weight: 700;
  font-size: .98rem;
  color: var(--muted);
  border-top: 0;
}
.cmp-table tbody th[scope="row"]{
  font-weight: 700;
  width: 26%;
}
.cmp-table .with-ico{
 align-items: center; gap: 8px;
}
.cmp-table .ico{ width:18px; height:18px; }
.cmp-table .ico.good path{ fill: var(--good); }
.cmp-table .ico.bad  path{ fill: var(--bad); }

/* --- Mobile: Karten statt breite Tabelle --- */
@media (max-width: 720px){
  .cmp-card{ padding: 10px; }
  .cmp-table{ display:block; border:0; }
  .cmp-table thead{
    position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
  }
  .cmp-table tbody{ display:grid; gap:12px; }
  .cmp-table tr{
    display:block;
    padding:12px;
    border:1px solid var(--row-border);
    border-radius:14px;
    background: rgba(255,255,255,.045);
  }
  .cmp-table tbody th[scope="row"]{
    display:block; width:auto; padding:0 0 6px 0; border:0; font-weight:800;
  }
  .cmp-table td{ 
    display:block; 
    padding:8px 0 6px;
    border:0;
  }
  .cmp-table td:nth-child(2)::before,
  .cmp-table td:nth-child(3)::before{
    display:block;
    content: var(--th-2);
    font-size:.85rem; font-weight:600; color: var(--muted);
    margin-bottom: 2px;
  }
  .cmp-table td:nth-child(3)::before{ content: var(--th-3); }
}

@media (max-width: 720px){
  .cmp-card{ padding:12px; background: linear-gradient(180deg, rgba(124,170,255,.10), rgba(255,255,255,.03)); }

  .cmp-table{ display:block; }
  .cmp-table thead{ position:absolute; left:-9999px; }
  .cmp-table tbody{ display:grid; gap:14px; }

  .cmp-table tr{
    position: relative;
    display:block;
    padding:14px 12px 36px; /* Platz für Benefit unten */
    border:1px solid rgba(255,255,255,.12);
    border-radius:16px;
    background:
      linear-gradient(90deg, rgba(43,213,118,.12), rgba(43,213,118,0) 45%),
      rgba(255,255,255,.045);
    box-shadow:0 10px 28px rgba(0,0,0,.28);
  }

  .cmp-table tbody th[scope="row"]{
    display:block; padding:0 0 8px; border:0; font-weight:800; font-size:1.05rem;
  }
  .cmp-table td{ display:block; padding:8px 0 6px; border:0; }

  .cmp-table{ --th-2:'✅ ilijaCodes'; --th-3:'⚠️ Andere Anbieter'; }
  .cmp-table td:nth-child(2)::before,
  .cmp-table td:nth-child(3)::before{
    display:block; margin-bottom:2px; font-size:.86rem; font-weight:700; opacity:.8;
    content: var(--th-2);
  }
  .cmp-table td:nth-child(3)::before{ content: var(--th-3); }

  .cmp-table td:nth-child(2){
    background: rgba(43,213,118,.10);
    border:1px solid rgba(43,213,118,.25);
    padding:10px; border-radius:10px;
  }

  .cmp-table tr::after{
    content: attr(data-benefit);
    position:absolute; left:12px; right:12px; bottom:8px;
    font-size:.95rem; font-weight:700; color: rgba(255,255,255,.92);
  }

  .cmp-table tr::before{
    content:'Vorteil';
    position:absolute; top:10px; right:12px;
    font-size:.75rem; font-weight:700; letter-spacing:.02em;
    color:#1c2;
    background: rgba(43,213,118,.15);
    border:1px solid rgba(43,213,118,.30);
    padding:4px 8px; border-radius:999px;
  }
}

/* --- Hero Layout ruhiger & sauber --- */
.hero .inner{
  display:grid;
  grid-template-columns: minmax(0,1fr) 420px; /* Text | Box rechts */
  gap: 32px;
  align-items:center;
}
@media (max-width: 960px){
  .hero .inner{ grid-template-columns: 1fr; }
  .benefit-card{ display:none; } /* Box mobil komplett weg */
}

/* H1: kurze starke Zeilen, keine komischen Umbrüche */
.hero-title{
  font-size: clamp(28px, 7vw, 64px);
  line-height: 0.97;
  max-width: 18ch;          /* verhindert 3-Zeilen-Teppiche */
  text-wrap: balance;
  hyphens: none;
  word-break: normal;
}
/* Falls irgendwo Deko-Pseudoelemente aktiv sind → aus */
.hero-title::before,
.hero-title::after{ content: none !important; }

/* CTAs: klare Hierarchie */
.btn-primary{ box-shadow:0 10px 28px rgba(90,130,255,.28); }
.link-muted{ margin-left:12px; font-weight:600; text-decoration:underline; opacity:.85 }
.link-muted:hover{ opacity:1 }
@media (max-width:640px){ .cta .btn{ width:100% } }

/* Trust-Zeile unter den CTAs */
.micro-trust{ margin-top:8px; font-size:.9rem; opacity:.8 }

/* Rechte Nutzen-Box (nur Desktop sichtbar) */
.benefit-card{
  padding:16px 18px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
}
.benefit-card h3{ margin:0 0 6px; }
.benefit-card ul{ margin:8px 0 0; padding:0; list-style:none; }
.benefit-card li{ margin:8px 0; padding-left:14px; position:relative; }
.benefit-card li::before{ content:"•"; position:absolute; left:0; opacity:.55; }


/* ===== Kontakt (mobile-first) ===== */
.page-contact .headline.md{
  text-align:center; margin:6px auto 4px;
  font-size:clamp(26px,5vw,36px);
}
.page-contact .sub{
  text-align:center; opacity:.9; max-width:32ch;
  margin:0 auto 10px; line-height:1.45;
}

/* Layout */
.page-contact .contact-grid{
  margin:12px auto 0;
  display:grid; grid-template-columns:1fr;
  gap:12px; align-items:start;
}
@media (min-width:900px){
  .page-contact .contact-grid{
    grid-template-columns:1.15fr .85fr; gap:18px;
  }
}

/* Cards */
.page-contact .card{
  background:linear-gradient(180deg,rgba(22,26,38,.92),rgba(12,16,24,.92));
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px; box-shadow:0 12px 36px rgba(0,0,0,.35);
  padding:14px;
}
.page-contact .card h3{ margin:2px 0 8px; font-weight:800 }

/* Formular */
.page-contact .form-grid{
  display:grid; grid-template-columns:1fr; gap:10px;
}
@media (min-width:640px){
  .page-contact .form-grid{ grid-template-columns:1fr 1fr }
  .page-contact .form-grid .col-2{ grid-column:1 / -1 }
}
.page-contact .field{ width:100%; font-size:16px } /* iOS-Zoom-Fix */
.page-contact textarea.field{ min-height:120px }

/* Checkbox-Zeile – sauber umbrechen */
.page-contact .check{
  display:flex; align-items:flex-start; gap:8px;
  margin-top:6px; line-height:1.35;
}
.page-contact .check input{ margin-top:3px }
.page-contact .check a{
  color:#a8c7ff; text-decoration:underline;
  background:none !important; border:0 !important; padding:0 !important;
  border-radius:0 !important; display:inline !important;
}

/* Aktionen – auf Mobil einspaltig, Desktop zweispaltig */
.page-contact .actions{
  display:grid; grid-template-columns:1fr; gap:10px; margin-top:10px;
}
@media (min-width:560px){
  .page-contact .actions{ grid-template-columns:1fr 1fr }
}
.page-contact .actions .btn{
  width:100%; height:44px; border-radius:12px;
}

/* Rechte Spalte */
.page-contact .features{
  list-style:none; margin:8px 0 12px; padding-left:0;
}
.page-contact .features li{
  position:relative; padding-left:18px; margin:8px 0;
  color:#cfe4ff; opacity:.92
}
.page-contact .features li::before{
  content:"•"; position:absolute; left:0; opacity:.6
}

/* Mail-CTA */
.page-contact .btn.mail{
  display:inline-block; width:100%; text-align:center; margin-top:10px;
  height:44px; border-radius:12px;
  background:linear-gradient(135deg,#31a8ff,#7c5cff); border:0; color:#fff;
}

/* Kleinteile */
.page-contact .mini{ opacity:.85; margin-top:10px }
.page-contact .hint{ opacity:.8; margin-top:8px }


/* ===== Services Marketing Additions ===== */

/* Hero Feinschliff */
.hero .mini{ opacity:.8; margin-top:6px }

/* USP Belt */
.usp-belt{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (min-width:760px){ .usp-belt{ grid-template-columns:repeat(4,1fr) } }
.usp-belt .usp{
  display:flex; gap:8px; align-items:center; justify-content:center;
  padding:10px 12px; border:1px solid rgba(255,255,255,.10);
  border-radius:12px; background:rgba(12,16,24,.55);
}
.usp-belt .usp span{ font-size:18px; }

/* Services Grid */
.service-grid{ grid-template-columns:1fr; gap:14px }
@media (min-width:900px){ .service-grid{ grid-template-columns:repeat(4,1fr) } }
.card-cta{ margin-top:10px }

/* Sectors */
.sectors-grid{ grid-template-columns:1fr; gap:12px }
@media (min-width:760px){ .sectors-grid{ grid-template-columns:repeat(4,1fr) } }
.sectors .card.mini{ padding:14px }

/* Steps */
.steps .step-list{ counter-reset: s; list-style:none; padding:0; margin:10px 0 }
.steps .step-list li{
  counter-increment:s; padding:10px 10px 10px 38px; position:relative;
  border:1px solid rgba(255,255,255,.10); border-radius:12px; margin:8px 0;
  background:rgba(12,16,24,.55);
}
.steps .step-list li::before{
  content: counter(s); position:absolute; left:10px; top:10px;
  width:22px; height:22px; border-radius:999px; display:grid; place-items:center;
  background:linear-gradient(135deg,#31a8ff,#7c5cff); color:#fff; font-size:13px; font-weight:700;
}

/* Guarantee */
.guarantee .card{ text-align:left }
.guarantee .features li{ margin:6px 0 }

/* FAQ */
.faq .faq-list details{
  border:1px solid rgba(255,255,255,.10); border-radius:12px; padding:10px 12px; margin:8px 0;
  background:rgba(12,16,24,.55)
}
.faq summary{ cursor:pointer; font-weight:700 }
.faq details[open]{ background:rgba(12,16,24,.7) }

/* === Konsistente Containerbreite für ALLE Grids/Karten === */
:root{ --container: 1120px;   }

/* 1) Eine Breite für alle Sektionen mit Grids/Karten */
.wrap,
.hero .inner,
.shop .grid,
#shop .grid,
.refs .wrap,
.section.demos > .demo-grid,
.co-layout,
.ic-pricing__inner,
.pv-form{
  max-width: var(--container) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left: var(--sidepad);
  padding-right: var(--sidepad);
}

/* 2) Die späte, globale .grid-Regel neutralisieren (macht sonst alles unterschiedlich breit) */
.grid{ padding:0 !important; }

/* 3) 3-Spalten-Reihen überall exakt gleich breit */
.shop .grid,
#shop .grid{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
@media (max-width:980px){
  .shop .grid, #shop .grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width:640px){
  .shop .grid, #shop .grid{ grid-template-columns: 1fr !important; }
}

/* 4) Karten füllen die Spalte vollständig */
.grid > .card, .shop .grid > *{ width:100%; align-self:stretch; }

/* 5) Doppelte .wrap-Regel einfangen (sonst unterschiedliche Gesamtbreiten) */
.wrap{ max-width: var(--container) !important; width:auto !important; }

.hero-proof{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;list-style:none;padding:0}
.hero-proof li{padding:6px 10px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(12,16,24,.55);font-size:14px}


/* === Upsell (Danke-Seite) === */
.upsell-sec { padding: 18px 0 32px; }
.upsell-sec .wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

.upsell-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
@media (max-width:980px){ .upsell-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .upsell-grid{ grid-template-columns:1fr } }

.upsell-card{
  background:linear-gradient(180deg,rgba(22,26,38,.92),rgba(12,16,24,.92));
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px; box-shadow:0 10px 28px rgba(0,0,0,.35);
  padding:16px; display:flex; flex-direction:column; gap:10px;
}
.upsell-card.is-featured{ border-color:rgba(124,92,255,.45); box-shadow:0 14px 40px rgba(124,92,255,.18) }
.upsell-head{ display:flex; align-items:center; gap:10px; }
.upsell-badge{
  margin-left:auto; padding:4px 10px; border-radius:999px;
  background:rgba(49,168,255,.16); border:1px solid rgba(49,168,255,.28); font-weight:700; font-size:.78rem;
}
.upsell-price{ font-weight:800; font-size:1.25rem; }
.upsell-features{ margin:6px 0 0; padding-left:18px; opacity:.92 }
.upsell-features li{ margin:6px 0; line-height:1.35 }
.upsell-actions .btn{ width:100%; height:44px; border-radius:12px }

/* Visuelles Feedback für ungültige Felder */
.pv-form .is-invalid{
  border-color:#ff6b6b;
  box-shadow:0 0 0 2px rgba(255,107,107,.15);
}
.pv-form button[disabled],
.pv-form input[type="submit"][disabled]{
  opacity:.6;
  cursor:not-allowed;
}

/* ===== Pricing Polish (nur für die Karten mit data-plan) ===== */
article.card[data-plan]{
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 40%, rgba(0,0,0,.15) 100%);
  box-shadow: 0 8px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
article.card[data-plan]:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 38px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
}

/* Empfohlen-Karte hervorheben */
article.card[data-plan].popular{
  background:
    linear-gradient(180deg, rgba(124,58,237,.20), rgba(34,211,238,.12)) border-box,
    radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 40%, rgba(0,0,0,.15) 100%) border-box;
  border: 1px solid transparent;
  box-shadow: 0 10px 34px rgba(124,58,237,.35), 0 0 0 1px rgba(255,255,255,.05) inset;
}

/* Badge "Empfohlen" */
article.card[data-plan] .badge{
  display:inline-block;
  margin-left:.5rem;
  padding:.2rem .55rem;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.2px;
  color:#fff;
  background: linear-gradient(90deg,#7c3aed,#22d3ee);
  box-shadow: 0 2px 8px rgba(34,211,238,.35);
}

/* Preis-Pill */
article.card[data-plan] .price{
  display:inline-flex;
  align-items: baseline;
  gap:.5rem;
  margin:.35rem 0 1rem;
  padding:.55rem .8rem;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20);
}

/* Neuer Preis: prominent */
article.card[data-plan] .price .new-price{
  font-weight:800;
  font-size:1.6rem;
  line-height:1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

/* Alter Preis: dezent durchgestrichen */
article.card[data-plan] .price .old-price{
  text-decoration: line-through;
  opacity:.55;
  font-size:1rem;
}

/* CTA unten breiter & knackig */
article.card[data-plan] .btn{
  display:block;
  width:100%;
  font-weight:700;
  padding:.9rem 1rem;
  border-radius:12px;
  text-align:center;
  border:1px solid rgba(255,255,255,.18);
  background: linear-gradient(90deg, #22d3ee, #7c3aed);
  color:#fff;
  box-shadow: 0 8px 18px rgba(124,58,237,.35);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
article.card[data-plan] .btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(124,58,237,.45);
}

/* Headline der Karte etwas kräftiger */
article.card[data-plan] h3{
  font-weight:800;
  letter-spacing:.2px;
}

/* Mobile: Luft lassen */
@media (max-width: 860px){
  article.card[data-plan]{ margin-bottom: 1rem; }
  article.card[data-plan] .price .new-price{ font-size:1.4rem; }
}


/* ===== Footer-Links zentrieren + stylen ===== */
.site-footer {
  background:#0b0f16;
  border-top:1px solid rgba(14,165,233,.18);
}
.site-footer .wrap {
  display:flex;
  justify-content:center;
  padding:18px 8px;
}
.site-footer .legal-nav {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  line-height:1;
}
.site-footer .legal-nav a {
  color:#9fd7ee;
  text-decoration:none;
  font-weight:600;
}
.site-footer .legal-nav a:hover { text-decoration:underline; }
.site-footer .legal-nav a:focus-visible { outline:2px solid #38bdf8; outline-offset:2px; }
.site-footer .legal-nav span { opacity:.7; }


/* DSGVO-Link sichtbar machen */
.pv-form .pv-dsgvo a{
  color:#9fd7ee !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
  font-weight:600;
}
.pv-form .pv-dsgvo a:hover{
  color:#c9ecff !important;
}
.pv-form .pv-dsgvo a:focus-visible{
  outline:2px solid #38bdf8;
  outline-offset:2px;
  border-radius:3px;
}

/* Preise mittig, ohne Blase, kein Overlap */
.shop article.card[data-plan] .price{
  position: static !important;
  transform: none !important;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  margin: 10px auto 12px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: max-content;
  text-align: center;
}

.shop article.card[data-plan] h3{ text-align:center; }

.shop article.card[data-plan] .new-price{
  color: #ff3b5f;
  font-weight: 900;
  font-size: clamp(28px,3.6vw,44px);
  line-height: 1;
  letter-spacing: .2px;
  text-shadow: 0 0 14px rgba(255,59,95,.35);
}

.shop article.card[data-plan] .old-price{
  position: relative;
  font-size: clamp(14px,1.6vw,18px);
  color: #a7bdd6;
  text-decoration: line-through;
  text-decoration-thickness: 3px;
  text-decoration-color: rgba(255,59,95,.9);
  padding: 0 2px;
}

/* diagonaler Strich + leichter Glow */
.shop article.card[data-plan] .old-price::after{
  content:"";
  position:absolute;
  left:-3px; right:-3px; top:55%;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,59,95,.95),transparent);
  transform:rotate(-7deg);
  filter:drop-shadow(0 0 6px rgba(255,59,95,.45));
  pointer-events:none;
}

/* etwas Luft unter der Preiszeile */
.shop article.card[data-plan] .card-sub{ margin-top: 6px; }

/* Preis optisch dominanter, ohne Blase */
.shop article.card[data-plan] .price{
  position:relative;
  display:flex; justify-content:center; align-items:baseline;
  gap:10px; margin:14px auto 16px; padding:0 !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
  width:max-content; text-align:center;
}

/* Neuer Preis mit Verlauf als Blickmagnet */
.shop article.card[data-plan] .new-price{
  font-size:clamp(34px,4vw,56px);
  font-weight:900; line-height:1;
  background:linear-gradient(180deg,#ff99ad 0%,#ff3b5f 55%,#ff1e4d 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 22px rgba(255,59,95,.35);
}

/* Alter Preis größer und sichtbarer durchgestrichen */
.shop article.card[data-plan] .old-price{
  position:relative; padding:0 2px;
  font-size:clamp(16px,1.8vw,20px); color:#9fb2c8;
  text-decoration:line-through; text-decoration-thickness:3px;
  text-decoration-color:rgba(255,59,95,.9);
}
.shop article.card[data-plan] .old-price::after{
  content:""; position:absolute; left:-3px; right:-3px; top:55%; height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,59,95,.95),transparent);
  transform:rotate(-6deg); filter:drop-shadow(0 0 8px rgba(255,59,95,.5));
  pointer-events:none;
}

/* Leichter Halo hinter dem Preis für mehr Fokus */
.shop article.card[data-plan] .price::after{
  content:""; position:absolute; left:50%; top:50%;
  width:220px; height:120px; transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, rgba(255,59,95,.18), rgba(255,59,95,0) 60%);
  filter:blur(10px); pointer-events:none;
}

/* Spare X Prozent Sticker nur via CSS, kein HTML nötig */
.shop article.card[data-plan] .price::before{
  content:attr(data-save);                  /* falls du später data-save setzt */
  position:absolute; top:-22px; left:50%; transform:translateX(-50%) rotate(-4deg);
  font-size:12px; font-weight:800; letter-spacing:.3px;
  padding:4px 10px; border-radius:999px;
  background:linear-gradient(180deg,#ffe1e7,#ffc2cf); color:#47111b;
  box-shadow:0 6px 18px rgba(255,59,95,.35);
}
/* Fallback wenn kein data-save vorhanden ist, je Karte hart gesetzt */
.shop article.card:nth-of-type(1) .price::before{ content:"Spare 50%"; }
.shop article.card:nth-of-type(2) .price::before{ content:"Spare 62%"; }
.shop article.card:nth-of-type(3) .price::before{ content:"Spare 70%"; }

/* Hover Fokus */
.shop article.card[data-plan]:hover .new-price{ text-shadow:0 0 28px rgba(255,59,95,.6); }

/* iOS Scroll-Jank Fix (Safari) */
@supports (-webkit-touch-callout: none) {
  /* Blur auf fixed-UI neutralisieren (stabilere Compositing-Layers) */
  .nav-toggle,
  #site-menu.site-nav,
  .nav-backdrop {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* Header eigenes Layer geben -> weniger Flackern beim Hochscrollen */
  header {
    transform: translateZ(0);
    will-change: transform;
  }
}

/* Viewport-Unit für iOS-Toolbar-Shrink */
@media (max-width: 768px){
  #site-menu.site-nav { height: 100svh; } /* statt 100dvh für iOS */
}

:root{
  --bg:#0f1420;
  --surface:#151b2a;
  --line:#273046;
  --text:#e7ecf5;
  --muted:#a9b4c7;
  --ring:#6da2ff;
}

.card{
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  width: min(900px, 100%);
  margin: 0 auto;
}

.card h3{
  margin: 0 0 14px;
  color: var(--text);
  font-weight: 800;
  font-size: clamp(20px, 2.6vw, 26px);
  letter-spacing: .2px;
}

#Form{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px 18px;
}

#Form label{
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--muted);
  font-weight: 600;
  font-size: .95rem;
}

#Form input,
#Form textarea{
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  padding: 12px 14px;
  outline: 0;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

#Form textarea{
  min-height: 120px;
  resize: vertical;
}

#Form input::placeholder,
#Form textarea::placeholder{ color: #8b95a8; }

#Form input:focus,
#Form textarea:focus{
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 30%, transparent);
  transform: translateY(-1px);
}

/* Nachricht über volle Breite */
#Form label:has(textarea){ grid-column: 1 / -1; }

/* Submit-Button: greift auch, wenn du ein input[type=submit] nutzt */
#Form button,
#Form input[type=submit]{
  grid-column: 1 / -1;
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(90deg, #5b8cff, #8b5dff);
  box-shadow: 0 12px 28px rgba(91,140,255,.35);
  cursor: pointer;
}

#Form button:hover,
#Form input[type=submit]:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(91,140,255,.45);
}

@media (min-width: 800px){
  #Form{ grid-template-columns: 1fr 1fr; }
  /* Betreff und Name/E-Mail bleiben halbe Breite, Nachricht bleibt voll */
}
/* Referenzen sofort rendern */
.refs-grid, .ref-card { content-visibility: visible !important; contain-intrinsic-size: auto !important; }

/* Basis sichtbar, keine Fade/Translate-Voreinstellungen */
.refs .ref-card { opacity: 1 !important; transform: none !important; }

/* Höhe reservieren, bevor Bilder da sind */
.ref-card { position: relative; aspect-ratio: 16/11; overflow: hidden; }
.ref-bg   { position: absolute; inset: 0; background-size: cover; background-position: center; }

/* Mobile: keine Transition/Parallax */
@media (hover:none) and (pointer:coarse){
  .ref-card, .ref-bg { transition: none !important; }
  .ref-bg { background-attachment: scroll !important; }
}

/* HERO */
.refs-hero { padding-top: clamp(3rem, 6vw, 6rem); padding-bottom: 1rem; }
.refs-hero .cta-row { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1rem; }
.btn { display:inline-block; padding:.85rem 1.1rem; border-radius:12px; font-weight:700; text-align:center; }
.btn.primary { background:#0ea5e9; color:#fff; box-shadow:0 10px 25px rgba(14,165,233,.25); }
.btn.ghost { border:1px solid #2a2f3a; color:#e6e8ef; background:transparent; }
.trust-strip { display:flex; gap:1rem; flex-wrap:wrap; margin-top:1rem; font-size:.9rem; opacity:.85; }
.trust-strip span { padding:.35rem .6rem; border:1px solid #2a2f3a; border-radius:999px; }

/* FILTER */
.refs-filter { display:flex; flex-wrap:wrap; gap:.5rem; }
.chip { padding:.45rem .75rem; border:1px solid #2a2f3a; background:#0b0f16; color:#e6e8ef; border-radius:999px; font-weight:600; }
.chip.active { background:#111827; border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.2); }

/* GRID */
.refs-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem; }
@media (max-width: 820px){ .refs-grid { grid-template-columns:1fr; } }
.ref-card { position:relative; border-radius:16px; overflow:hidden; aspect-ratio: 16 / 10; background:#0f1420; isolation:isolate; }
.ref-bg { position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(8,11,20,.0), rgba(8,11,20,.55) 60%, rgba(8,11,20,.9)),
  radial-gradient(1200px 600px at 20% 10%, rgba(59,130,246,.25), transparent 60%),
  var(--bg, linear-gradient(120deg,#0f172a,#111827));
  background-size:cover;
  background-position:center;
  transition: transform .5s ease;
  will-change: transform;
  z-index:0;
}
.ref-card:hover .ref-bg { transform: scale(1.04); }

.ref-meta { position:absolute; left:1rem; right:1rem; bottom:1rem; z-index:1; color:#e6e8ef; }
.ref-meta h3 { margin:0 0 .25rem 0; font-size:1.15rem; }
.ref-meta .tags { margin:0; opacity:.85; font-size:.95rem; }

.ref-link { position:absolute; inset:0; z-index:2; }
.pill { position:absolute; top:.8rem; left:.8rem; z-index:1; background:rgba(17,24,39,.8); border:1px solid #2a2f3a; padding:.25rem .6rem; border-radius:999px; font-size:.8rem; backdrop-filter: blur(4px); color:#cfd3dd; }

.ref-card::after { /* Shine on hover */
  content:""; position:absolute; inset:auto -30% 0 auto; width:60%; height:120%;
  background: linear-gradient(120deg, rgba(255,255,255,.0), rgba(255,255,255,.15), rgba(255,255,255,.0));
  transform: translateX(-120%) rotate(8deg);
  transition: transform .6s ease;
  z-index:1; pointer-events:none;
}
.ref-card:hover::after { transform: translateX(120%) rotate(8deg); }

.below-grid-cta { text-align:center; margin-top:1.5rem; }
.below-grid-cta .tiny { margin-top:.5rem; opacity:.8; font-size:.9rem; }

/* Micro animation on reveal if du nutzt .in klasse bereits */
.ref-card { opacity:0; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease; }
.ref-card.in { opacity:1; transform:none; }

/* === Gleich hohe Karten in jeder Zeile (fix für Subpixel-Differenzen) === */
.refs-grid{
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1rem;
  grid-auto-rows: clamp(220px, 28vw, 340px); /* eine feste, responsive Zeilenhöhe */
  align-items: stretch; /* Items füllen die Zeile */
}

@media (max-width: 820px){
  .refs-grid{ grid-template-columns: 1fr; grid-auto-rows: clamp(200px, 55vw, 300px); }
}

/* override: keine feste aspect-ratio mehr, Karte füllt die Row */
.ref-card{
  aspect-ratio: auto !important;
  height: 100%;
  box-sizing: border-box;
  contain: layout paint; /* micro-perf + verhindert Layout-Leaks */
}
.ref-bg{ position:absolute; inset:0; background-size: cover; background-position: center; }

/* Alternative: 16:10 behalten, aber Zeilenhöhe exakt danach setzen */
.refs-grid{ grid-auto-rows: calc(100vw/2 * 10 / 16); } /* 2 Spalten → Breite/2 */
@media (max-width:820px){ .refs-grid{ grid-auto-rows: calc(100vw * 10 / 16); } }
.ref-card{ aspect-ratio:auto !important; height:100%; }

@media (max-width:540px){
  .refs-grid{ gap: 1.6rem !important; } /* mehr Abstand zwischen Karten */
}

/* Mobile: kein Sonderformat für die 1. Karte */
@media (max-width: 768px){
  .refs-grid .ref-card:first-child{
    min-height: clamp(200px, 28vh, 320px); /* Basiswert */
  }
}
/* 3px Innenabstand zum Rand der Formularbox */
.pv-form{ padding: 15px !important; }


/* Demo-Hinweis (scoped) */
.demo-strip{
  max-width:980px;
  margin:14px auto 20px;
  padding:10px 12px;
  border-radius:16px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(120,100,255,.14), rgba(0,0,0,0) 60%),
    rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  display:flex; justify-content:center;
}
.demo-pills{
  display:flex; flex-wrap:wrap; gap:8px;
  list-style:none; margin:0; padding:0;
}
.demo-pills li{
  display:flex; align-items:center; gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  font-weight:600; font-size:.95rem;
}

@media (max-width:720px){
  .demo-strip{padding:10px}
  .demo-pills{justify-content:flex-start}
}

/* Promo-Bar oben */
.promo-bar{
  position: sticky;
  top: 0;
  z-index: 9999;
  width: 100%;
  padding: .55rem .9rem;
  text-align: center;
  font: 600 .95rem/1.2 "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing: .2px;
  color: #fff;
  background: linear-gradient(90deg,#0ea5e9, #6366f1 55%, #a855f7 80%, #ec4899);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 10px 28px rgba(0,0,0,.35);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.promo-bar a{ color:#fff; text-decoration: underline; text-underline-offset: 2px; }
.promo-bar strong{ font-weight: 800; }

@media (max-width:640px){
  .promo-bar{ font-size:.88rem; padding:.45rem .6rem; }
}