/* Farben Gelb= #D7FE16 RGBA rgba(215, 254, 22, 1); */

:root{
  /* Layout */
  --radius:16px;
  --radius2:24px;
  --max:1120px;
  --pad:22px;
  --pad2:34px;

  /* Typography */
  --h1:clamp(28px, 3.1vw, 48px);
  --h2:clamp(20px, 2.2vw, 34px);
  --h3:clamp(16px, 1.6vw, 22px);
  --p: clamp(13px, 1.15vw, 17px);

  /* USA Theme */
  --bg:#ffffff;
  --text: rgba(10,14,24,0.92);
  --muted:#9A9A99;
  --muted2: #032538;
  --muted3: #050514C;

  --line:rgba(10,14,24,0.10);

  --usaBlue:#1d4ed8;
  --usaRed:#dc2626;
  --companyGelb: rgba(215, 254, 22, 1);
  --companyWeis: #ffffff;

  /* Glass surfaces */
  --surface:rgba(160, 160, 160, 0.62);
  --surface2:rgba(160, 160, 160, 0.46);

  /* Cards (mehr transparent) */
  --card: rgba(160, 160, 160, 0.42);
  --cardBorder: rgba(255,255,255,0.55);

  --shadow:0 26px 80px rgba(10,20,40,0.14);
  --shadow2:0 12px 34px rgba(10,20,40,0.11);

  /* Glass blur */
  --glassBlur: 16px;
}



.randLi {

margin-left: 12px;

}

*{box-sizing:border-box}
html,body{width:100%;max-width:100%;overflow-x:hidden;}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: #8CD3FF;
  line-height:1.55;
  position: relative;
  min-height: 100%;
  background:
    radial-gradient(1100px 700px at 12% -10%, rgba(29,78,216,0.10), transparent 60%),
    radial-gradient(900px 600px at 92% 0%, rgba(220,38,38,0.08), transparent 55%),
    radial-gradient(900px 700px at 70% 115%, rgba(29,78,216,0.06), transparent 60%),
    var(--bg);
}

/* Global Background Image (sichtbarer, weniger blur / weniger wash) */
/* Global Background Image (sichtbarer, weniger blur / weniger wash) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url("../images/bg_1.png") center / cover no-repeat;
  filter: blur(7px) saturate(1.05) contrast(1.02) brightness(1.06);
  transform: scale(1.03);
}

/* leichter “Wash”, aber deutlich reduziert */
@media (max-width: 680px){
body::after{
  margin-top: 150px;
}
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url("../images/bg_1.png") center / cover no-repeat;
  filter: blur(7px) saturate(1.05) contrast(1.02) brightness(1.06);
  transform: scale(1.03);
}

a{color:inherit;text-decoration:none}
a:hover{text-decoration: underline;}
img, svg, video { max-width: 100%; height: auto; }

.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}



.black1{

  color: #000000;
}

/* ===== Topbar ===== */
.topbar{
  position:fixed;top:0;z-index:50;
  border-bottom:1px solid var(--line);
  color: #ffffff;
  border-color: #ffffff;
  width: 100%;
  background: rgba(160, 160, 160,0.22);
  backdrop-filter: blur(var(--glassBlur));
  -webkit-backdrop-filter: blur(var(--glassBlur));

}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 0;
  flex-wrap: nowrap; /* verhindert “auseinanderziehen” */
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-weight:700;letter-spacing:0.2px;
  min-width: 0;
}
.brand-text{min-width:0}
.brand-title{font-size:16px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width: 280px;}
.brand .logo{
  width:60px;height:60px;border-radius:10px;
  background: var(--companyGelb);
  box-shadow: 0 10px 26px rgba(29,78,216,0.18);
  display:flex;align-items:center;justify-content:center;
  font-weight:900; color:#ffffff;
  flex: 0 0 auto;
}

.nav{
  display:flex;align-items:center;gap:14px;
  font-size:14px;color:var(--muted);
  color: #111111;
  flex-wrap:wrap;

}
.nav a{padding:8px 10px;border-radius:12px;text-decoration:none;}
.nav a:hover{color: yellow;text-decoration:none; border: 1px solid rgba(215, 254, 22, 1);}

.cta{display:flex;align-items:center;gap:10px}

/* ===== Buttons ===== */
.btn{
  border:0.2px solid #808080;border-radius:14px;
  padding:11px 14px;
  font-weight:800;font-size:14px;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  transition: transform .10s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  user-select:none;
  white-space:nowrap;
  text-decoration:none;

}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background: rgba(215, 254, 22, 1);
  color: #000000;
  box-shadow: 0 14px 44px rgba(29,78,216,0.22);
}
.btn-primary:hover{box-shadow:0 18px 60px rgba(29,78,216,0.28);text-decoration:none;}
.btn-ghost{
  background: rgba(255,255,255,0.75);
  border-color: rgba(10,14,24,0.14);
  color: var(--text);
}
.btn-ghost:hover{background:rgba(255,255,255,0.90);border-color:rgba(10,14,24,0.18);text-decoration:none;}

.badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(10,14,24,0.12);
  background: rgba(255,255,255,0.62);
  color: rgba(10,14,24,0.72);
  white-space:nowrap;
}

/* ===== HERO ===== */
.hero{padding: 24px 0 10px}
.hero-wrap{
  position:relative;
  border-radius:var(--radius2);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.22);
  box-shadow: var(--shadow);
  margin-top: 50px;
}

.hero-bg{
  position:absolute;inset:0;
  background-image:url("/assets/images/");
  background-size:cover;
  background-position:center;
  filter: blur(1px) saturate(1.08) contrast(1.05) brightness(1.02);
  transform: scale(1.03);
}

/* Overlay für Lesbarkeit, aber “Bild bleibt sichtbar” */
.hero-overlay{
  position:absolute;inset:0;
  background: linear-gradient(90deg,
    rgba(246,248,252,0.84) 0%,
    rgba(246,248,252,0.68) 44%,
    rgba(246,248,252,0.40) 72%,
    rgba(246,248,252,0.18) 100%);
}
@media (max-width:920px){
  .hero-overlay{
    background: linear-gradient(180deg,
      rgba(246,248,252,0.86) 0%,
      rgba(246,248,252,0.72) 55%,
      rgba(246,248,252,0.45) 100%);
  }
}

.hero-inner{
  position:relative;
  padding: clamp(22px, 4vw, 44px);
  display:grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap:18px;
}
@media (max-width:920px){
  .hero-inner{grid-template-columns:1fr}
}

h1{font-size:var(--h1);margin:10px 0 10px;line-height:1.12;letter-spacing:-0.3px}
h2{font-size:var(--h2);margin:0 0 10px;letter-spacing:-0.2px}
h3{font-size:var(--h3);margin:0 0 10px; color: var(--companyWeis);}
p{font-size:var(--p);margin:10px 0;color:var(--muted)}
.hero-lead{font-size:clamp(15px,1.3vw,18px);color:rgba(10,14,24,0.76)}

.pill-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}

.hero-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:14px}
.price{font-size:30px;font-weight:900;letter-spacing:-0.3px;color:rgba(10,14,24,0.92)}
.price small{font-size:14px;font-weight:750;color:rgba(10,14,24,0.64)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}

/* Hero Points */
.hero-points{display:grid;gap:10px;margin-top:18px}
.point{
  display:flex;gap:10px;align-items:flex-start;
  padding:10px 12px;border-radius:14px;
  background: rgba(255,255,255,0.36);
  border:1px solid rgba(255,255,255,0.55);
  backdrop-filter: blur(var(--glassBlur));
  -webkit-backdrop-filter: blur(var(--glassBlur));
}
.check{
  width:22px;height:22px;border-radius:7px;
  background: rgba(29,78,216,0.14);
  border: 1px solid rgba(29,78,216,0.28);
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;margin-top:1px;
}
.check svg{width:14px;height:14px;fill: rgba(10,14,24,0.90)}
.point b{display:block;color:rgba(10,14,24,0.92);font-weight:900}
.point span{display:block;color:rgba(10,14,24,0.70);font-size:14px;margin-top:2px}

.hero-card{
  background: var(--card);
  border:1px solid rgba(255,255,255,0.55);
  border-radius: var(--radius);
  padding:16px;
  display:flex;flex-direction:column;gap:12px;
  backdrop-filter: blur(var(--glassBlur));
  -webkit-backdrop-filter: blur(var(--glassBlur));
  box-shadow: var(--shadow2);
}
.mini{
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  padding:12px;border-radius:14px;
  background: rgba(255,255,255,0.34);
  border:1px solid rgba(255,255,255,0.55);
}
.mini .k{font-size:12px;color:var(--muted2)}
.mini .v{font-size:14px;color:var(--text);font-weight:900}

/* ===== Sections ===== */
section{padding:22px 0}
.anchor{scroll-margin-top:90px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:900px){.grid2{grid-template-columns:1fr}}
.grid2 > *{min-width:0;}

.card{
  background: var(--card);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius);
  padding: var(--pad2);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(var(--glassBlur));
  -webkit-backdrop-filter: blur(var(--glassBlur));
}
.card:hover{
  background: rgba(255,255,255,0.48);
}
.small{font-size:13px;color: #ffffff;}
.muted{color:var(--muted)}
.list{display:grid;gap:10px;margin:14px 0 0;padding:0;list-style:none}
.li{
  display:flex;gap:10px;align-items:flex-start;
  padding:10px 12px;border-radius:14px;
  border:1px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.30);
}
.li .dot{
  width:10px;height:10px;border-radius:999px;margin-top:7px;
  background: var(--companyGelb);
  box-shadow: 0 0 0 4px rgba(29,78,216,0.12);
  flex:0 0 auto;
}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:12px}
@media (max-width:980px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{
  border-radius:16px;padding:16px;
  border:1px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.30);
  backdrop-filter: blur(var(--glassBlur));
  -webkit-backdrop-filter: blur(var(--glassBlur));
}
.step .n{
  width:30px;height:30px;border-radius:10px;
  background: rgba(220,38,38,0.12);
  border: 1px solid rgba(220,38,38,0.22);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;color:rgba(10,14,24,0.92);
  margin-bottom:10px;
}

/* Note */
.note{
  font-size:12.5px;color:var(--muted);
  padding:12px;border-radius:14px;
  border: 1px dashed rgba(10,14,24,0.18);
  background: rgba(255,255,255,0.30);
  backdrop-filter: blur(var(--glassBlur));
  -webkit-backdrop-filter: blur(var(--glassBlur));
}

/* FAQ */
.faq{margin-top:10px}
.faq-item{
  border:1px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.30);
  border-radius:16px;
  overflow:hidden;
  margin-bottom:10px;
  backdrop-filter: blur(var(--glassBlur));
  -webkit-backdrop-filter: blur(var(--glassBlur));
}
.faq-q{
  width:100%;
  background:transparent;border:0;
  color:var(--text);font-weight:900;font-size:15px;
  padding:16px;
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;text-align:left;
}
.faq-a{display:none;padding:0 16px 16px;color:var(--muted);font-size:14px}
.faq-q svg{width:18px;height:18px;opacity:0.9;transition:transform .15s ease}
.faq-item.open .faq-a{display:block}
.faq-item.open .faq-q svg{transform:rotate(180deg)}

/* Form */
form{display:grid;gap:12px;margin-top:12px;max-width:100%}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:780px){.row{grid-template-columns:1fr}}
label{font-size:13px;color:var(--muted2);display:block;margin-bottom:6px;font-weight:800;line-height:1.25}
input,select,textarea{
  width:100%;
  max-width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(10,14,24,0.14);
  background: rgba(255,255,255,0.84);
  color: var(--text);
  outline:none;
  font-size:16px;
  font-family: inherit; /* Fix: Textarea gleiche Schrift */
}
input:focus,select:focus,textarea:focus{
  border-color: rgba(29,78,216,0.55);
  box-shadow: 0 0 0 4px rgba(29,78,216,0.12);
}
textarea{min-height:110px;resize:vertical}
input[type="file"]{padding:10px}
.form-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:4px}
.fineprint{font-size:12px;color:var(--muted2);line-height:1.4}

/* Footer */
footer.site{
  padding:26px 0 36px;
  border-top:1px solid var(--line);
  border-color: #ffffff;
  background: rgba(255,255,255,0.22);
  margin-top:30px;
  backdrop-filter: blur(var(--glassBlur));
  -webkit-backdrop-filter: blur(var(--glassBlur));

}
.footer-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:18px}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr}}

.founder-card{padding:22px}
.founder-head{display:flex;align-items:center;gap:12px}
.founder-avatar{
  width:44px;height:44px;border-radius:999px;
  object-fit:cover;
  border: 2px solid rgba(255,255,255,0.65);
  box-shadow: 0 10px 26px rgba(10,20,40,0.14);
}

.founder-avatar-1{
  width:140px;height:140px;border-radius:999px;
  object-fit:cover;
  border: 2px solid rgba(255,255,255,0.65);
  box-shadow: 0 10px 26px rgba(10,20,40,0.14);
}

@media (max-width:680px){
  .founder-avatar-1{width:95px;height:95px;
}

}

.founder-highlight{
  display:inline-block;
  margin-top:8px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(29,78,216,0.10);
  border: 1px solid rgba(29,78,216,0.18);
  color: rgba(10,14,24,0.88);
  font-weight:800;
}

/* Testimonials */
.testimonials{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}
@media (max-width: 980px){
  .testimonials{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 680px){
  .testimonials{grid-template-columns: 1fr; gap: 12px;}
}
.t-card{
  margin:0;
  padding: 18px;
  border-radius: 16px;
  background: rgba(255,255,255,0.30);
  border:1px solid var(--line);
  backdrop-filter: blur(var(--glassBlur));
  -webkit-backdrop-filter: blur(var(--glassBlur));
  box-shadow: var(--shadow2);
  max-width: 100%;
  min-width: 0;
}
.t-card blockquote{
  margin:0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.t-card figcaption{
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}
.t-card b{color: var(--text);}

/* ===== Mobile Menu ===== */
.mobile-actions{display:none;align-items:center;gap:10px;flex-wrap:nowrap}
.mobile-cta{padding:11px 12px;border-radius:14px}

@media (max-width: 820px){
  .nav{display:none !important;}
  .cta{display:none !important;}
  .mobile-actions{display:flex !important;}
  .hero{padding-top:14px;}
  .brand-title{max-width: 180px;}
}

/* Hamburger: nicht abgeschnitten */
.hamburger{
  width:44px;height:44px;
  background: rgba(10,14,24,0.08);
  border: 1px solid rgba(10,14,24,0.14);
  border-radius: 14px;
  padding: 10px;
  color: rgba(10,14,24,0.92);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex: 0 0 auto;
}
.hamburger svg{width:26px;height:26px}
.hamburger:active{transform:scale(0.96)}

.mobile-drawer{
  position: fixed; inset: 0; z-index: 9999;
  display: none;
  background: rgba(0,0,0,0.58);
  backdrop-filter: blur(4px);
}
.mobile-drawer.open{display:block}
.mobile-drawer-inner{
  position:absolute; top:0; right:0;
  width:min(88vw, 360px); height:100%;
  background: rgba(10,14,24,0.94);
  border-left:1px solid rgba(255,255,255,0.14);
  box-shadow: 0 30px 90px rgba(0,0,0,0.55);
  padding:16px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.drawer-close{
  width:48px;height:48px;
  border-radius:14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
}
.mobile-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.mobile-brand-title{font-size:14px;line-height:1.1;color:#ffffff;font-weight:800}
.mobile-brand-sub{color:rgba(255,255,255,0.62)}
.mobile-nav{display:flex;flex-direction:column;gap:12px}
.mobile-nav a{
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  color:#fff;
  font-weight:900;
  text-align:center;
  text-decoration:none;
}
.mobile-nav a:hover{text-decoration:none;background:rgba(255,255,255,0.14);}

/* ===== Mobile Cleanup (Padding, Pills, Cards) ===== */
@media (max-width: 680px){
  :root{ --pad: 14px; --pad2: 18px; }
  .hero-inner{padding: 18px;}
  .badge{font-size:11px;padding:5px 9px;white-space:normal}
  .btn{padding:11px 12px}
  section{padding:18px 0}
  .card{padding: var(--pad2)}
  .hero-card{padding:14px}
  .mini{padding:10px}
  .hero {
margin-top: 70px;

  }
}

/* ===== Global Safety Fixes ===== */
html, body{
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
  min-height: 100%;
}

/* verhindert abgeschnittene Inhalte in Grids/Flex */
.grid2 > *,
.testimonials > *,
.row > *{
  min-width: 0;
}

/* lange Texte umbrechen */
p, li, a, span, .fineprint, .small, .muted{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Bilder/Videos nie größer als Container */
img, svg, video{
  max-width:100%;
  height:auto;
  display:block;
}

/* Buttons dürfen umbrechen auf Mobile */
.btn, .badge{
  white-space: normal;
  text-align:center;
}

/* ===== Mobile Header Cleanup ===== */
@media (max-width: 680px){
  .topbar-inner{
    padding: 10px 0;
  }

  .brand-title{
    font-size: 13px;
    max-width: 150px;
  }

  .hamburger{
    width:40px;
    height:40px;
  }
}

/* ===== Hero Final Polish ===== */
.hero-wrap{
  background: rgba(255,255,255,0.18);
}

/* Bild noch etwas präsenter */
.hero-bg{
  filter: blur(0.8px) saturate(0.5) contrast(1.08) brightness(0.5);
}

/* Overlay minimal transparenter */
.hero-overlay{
  background: linear-gradient(90deg,
    rgba(246,248,252,0.78) 0%,
    rgba(246,248,252,0.60) 45%,
    rgba(246,248,252,0.34) 75%,
    rgba(246,248,252,0.14) 100%);
}

/* ===== Cards extra Glas ===== */
.card,
.hero-card,
.t-card,
.step,
.faq-item{
  background: rgba(255,255,255,0.34);
  border:1px solid var(--line);
}

/* Hover subtil */
.card:hover,
.t-card:hover{
  background: rgba(255,255,255,0.42);
}

/* ===== Founder Card ===== */
.founder-card{
  display:flex;
  flex-direction:column;
  gap:12px;
}


.priceballoon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:60px;
  min-height:60px;
  padding:12px 16px;
  border-radius:20px;
  background: green;
  color:#ffffff;
  font-size:22px;
  line-height:1.1;
  text-align:center;
  box-shadow:
    0 14px 40px rgba(220,38,38,0.45),
    inset 0 0 0 4px rgba(255,255,255,0.85);
  position:relative;
}

/* kleiner "Sticker"-Effekt */
.priceballoon::after{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:999px;

  pointer-events:none;
}

/* Responsive */
@media (max-width:680px){
  .priceballoon{
    min-width:30px;
    min-height:30px;

    font-size:20px;
    padding:14px 16px;
  }
}

/* ===== Form Layout ===== */
form input,
form select,
form textarea{
  font-family: inherit;
}

/* ===== Footer Mobile ===== */
@media (max-width: 680px){
  footer.site{
    padding-bottom: 24px;
  }
}


/* ===========================
   LEGAL / IMPRESSUM / DSGVO / AGB
   (für .legal-container im Footer-Accordion)
   =========================== */

.legal-container{
  padding: 12px 0 0;
  max-width: 100%;
}

.legal-container h3{
  font-size: 16px;
  margin: 14px 0 8px;
  color: var(--text);
  letter-spacing: -0.1px;
}

.legal-container p{
  margin: 10px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.legal-container ul{
  margin: 10px 0 12px 18px;
  padding: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.legal-container li{
  margin: 6px 0;
}

.legal-container strong{
  color: var(--text);
}

.legal-container .note{
  margin-top: 14px;
}

/* Footer-Accordion: lange Inhalte besser lesbar */
footer.site .faq-a{
  padding-bottom: 18px;
}

/* ===========================
   FAQ / ACCORDION FINETUNING
   =========================== */

/* Button: Klickfläche + Fokus sichtbar */
.faq-q{
  border-radius: 0;
}
.faq-q:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(29,78,216,0.14);
}

/* Antwort: saubere Typo für lange Textblöcke */
.faq-a{
  line-height: 1.65;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.faq-a h4{
  margin: 12px 0 8px;
  font-size: 14px;
  color: var(--text);
}
.faq-a ul.list{
  margin-top: 10px;
}

/* Optional: leichte Trennlinie innerhalb eines offenen FAQ-Blocks */
.faq-item.open{
  box-shadow: 0 18px 60px rgba(10,20,40,0.10);
}



/* Footer Grid Karten: bei sehr schmalen Geräten keine Überläufe */
.footer-grid > *{min-width:0;}

/* Links in legal/faq optisch sauber */
.faq-a a,
.legal-container a{
  color: var(--usaBlue);
  text-decoration: underline;
}
.faq-a a:hover,
.legal-container a:hover{
  text-decoration: none;
}

/* Mobile: Accordion-Text etwas größer lesbar */
@media (max-width: 680px){
  .legal-container p,
  .legal-container ul,
  .faq-a{
    font-size: 14.5px;
  }
}



/* ===========================
   LEGAL / IMPRESSUM / DSGVO / AGB
   (für .legal-container im Footer-Accordion)
   =========================== */

.legal-container{
  padding: 12px 0 0;
  max-width: 100%;
}

.legal-container h3{
  font-size: 16px;
  margin: 14px 0 8px;
  color: var(--text);
  letter-spacing: -0.1px;
}

.legal-container p{
  margin: 10px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.legal-container ul{
  margin: 10px 0 12px 18px;
  padding: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.legal-container li{
  margin: 6px 0;
}

.legal-container strong{
  color: var(--text);
}

.legal-container .note{
  margin-top: 14px;
}

/* Footer-Accordion: lange Inhalte besser lesbar */
footer.site .faq-a{
  padding-bottom: 18px;
}

/* ===========================
   FAQ / ACCORDION FINETUNING
   =========================== */

/* Button: Klickfläche + Fokus sichtbar */
.faq-q{
  border-radius: 0;
}
.faq-q:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(29,78,216,0.14);
}

/* Antwort: saubere Typo für lange Textblöcke */
.faq-a{
  line-height: 1.65;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.faq-a h4{
  margin: 12px 0 8px;
  font-size: 14px;
  color: var(--text);
}
.faq-a ul.list{
  margin-top: 10px;
}

/* Optional: leichte Trennlinie innerhalb eines offenen FAQ-Blocks */
.faq-item.open{
  box-shadow: 0 18px 60px rgba(10,20,40,0.10);
}



/* Footer Grid Karten: bei sehr schmalen Geräten keine Überläufe */
.footer-grid > *{min-width:0;}

/* Links in legal/faq optisch sauber */
.faq-a a,
.legal-container a{
  color: var(--usaBlue);
  text-decoration: underline;
}
.faq-a a:hover,
.legal-container a:hover{
  text-decoration: none;
}

/* Mobile: Accordion-Text etwas größer lesbar */
@media (max-width: 680px){
  .legal-container p,
  .legal-container ul,
  .faq-a{
    font-size: 14.5px;
  }
}


@media (max-width: 820px){
  .topbar-inner{
    flex-wrap: wrap;
  }

  .mobile-actions{
    width:100%;
    justify-content: center;
    margin-top: 8px;
  }

  .mobile-cta{
    width: 90%;
    justify-content: center;
  }
}

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 10px; /* Place the button at the bottom of the page */
  right: 10px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: #ffffff; /* Remove outline */
  background-color: #000000; /* Set a background color */
  box-shadow: 1px 1px #000000;
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 5px; /* Rounded corners */
  font-size: 22px; /* Increase font size */
}

#myBtn:hover {
  background-color: #1d4ed8; /* Add a dark-grey background on hover */
}

@media (max-width: 680px){
  #myBtn {
    padding: 5px;
    font-size: 18px;
    bottom: 10px; /* Place the button at the bottom of the page */
    right: 7px; /* Place the button 30px from the right */
  }
}



.topText {
  font-family: black;
  fontsize: 34px;
  }


  .underText {
    fontsize: 20px;
    }



    /* ===== PREMIUM GLASS CARDS ===== */
    .card,
    .hero-card,
    .t-card,
    .faq-item,
    .note {
      background: linear-gradient(
        135deg,
        rgba(255,255,255,0.22),
        rgba(255,255,255,0.08)
      );
      border: 1px solid rgba(255,255,255,0.28);
      border-radius: 20px;

      backdrop-filter: blur(22px) saturate(1.3);
      -webkit-backdrop-filter: blur(10px) saturate(1.3);

      box-shadow:
        0 20px 60px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.25);

      color: rgba(10,14,24,0.92);
    }

    /* Hover = etwas mehr „Glow“ */
    .card:hover,
    .hero-card:hover,
    .t-card:hover {
      background: linear-gradient(
        135deg,
        rgba(255,255,255,0.28),
        rgba(255,255,255,0.12)
      );
      box-shadow:
        0 28px 80px rgba(0,0,0,0.32),
        inset 0 1px 0 rgba(255,255,255,0.35);
    }


    /* dezente Lichtkante oben */
.card::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.35),
    transparent 40%
  );
}



body::before{
  filter: blur(0px) saturate(1.15) contrast(1.12) brightness(0.8);
}


body::after{
  background:
    radial-gradient(900px 600px at 90% 10%, rgba(255,255,255,0.08), transparent 55%),
    linear-gradient(180deg, rgba(246,248,252,0.12), rgba(246,248,252,0.22));
}

.logo-digsoin {
  height: 42px;
  width: auto;
  display: block;
}


footer .logo-digsoin {
  height: 36px;
}

.impressum-logo-digsoin {
  height: 52px;
  width: auto;
  display: block;
}



.leftspace {
  margin-left: 15px;
}

top-up {
  margin-top: -50px;
}


.hero-img {
width: 100%;
height: 100%;

}


/* ===== HERO SLIDER ===== */
.hero-slider{
  position: relative;
  border-radius: var(--radius2, 24px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 26px 80px rgba(10,20,40,0.14);
  min-height: clamp(420px, 52vw, 560px);
}

.hero-slider__track{
  display: flex;
  width: 100%;
  height: 100%;
  transform: translateX(0);
  transition: transform 700ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

.hero-slide{
  position: relative;
  max-width: 1120px;
  height: auto;
  min-height: clamp(420px, 52vw, 560px);
  background: var(--bg) center/cover no-repeat;
  transform: translateZ(0);
}

/* leichte Lesbarkeits-Layer (Bild bleibt sichtbar) */
.hero-slide::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 600px at 10% 15%, rgba(255,255,255,0.28), transparent 55%),
    linear-gradient(90deg, rgba(246,248,252,0.70), rgba(246,248,252,0.12));
  pointer-events:none;
}

@media (max-width: 920px){
  .hero-slide::before{
    background:
      radial-gradient(900px 600px at 40% 10%, rgba(255,255,255,0.26), transparent 55%),
      linear-gradient(180deg, rgba(246,248,252,0.72), rgba(246,248,252,0.10));
  }
}

/* Overlay Box */
.hero-slide__overlay{
  position:absolute;
  left: calc(var(--x, 10%) + var(--ox, 0px));
  top:  calc(var(--y, 18%) + var(--oy, 0px));
  transform: translate(0,0);
  max-width: min(520px, 86vw);
  padding: 18px 18px;
  border-radius: 22px;

  background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08));
  border: 1px solid rgba(255,255,255,0.30);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.25);
}

/* Alignment pro Slide */
.hero-slide[data-align="center"] .hero-slide__overlay{ transform: translateX(-50%); }
.hero-slide[data-align="right"]  .hero-slide__overlay{ transform: translateX(-100%); }

/* Text Styles */
.hero-slide__pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(10,14,24,0.12);
  background: rgba(255,255,255,0.62);
  color: rgba(10,14,24,0.72);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 10px;
  white-space: nowrap;
}

.hero-slide__title{
  margin: 0 0 6px;
  font-size: clamp(24px, 3.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.3px;
  color: rgba(10,14,24,0.92);
  font-weight: 900;
}
.hero-slide__subtitle{
  margin: 0 0 10px;
  font-size: clamp(14px, 1.4vw, 18px);
  color: rgba(10,14,24,0.78);
  font-weight: 800;
}
.hero-slide__text{
  margin: 0 0 14px;
  font-size: 14.5px;
  color: rgba(10,14,24,0.72);
  line-height: 1.6;
}

.hero-slide__actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* NAV Buttons */
.hero-slider__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 44px rgba(0,0,0,0.20);
  color: rgba(10,14,24,0.85);
  font-size: 28px;
  cursor: pointer;
  z-index: 5;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-slider__prev{ left: 14px; }
.hero-slider__next{ right: 14px; }

.hero-slider__nav:hover{
  background: rgba(255,255,255,0.26);
}

/* Dots */
.hero-slider__dots{
  position:absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display:flex;
  gap: 8px;
  z-index: 6;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.hero-dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.30);
  cursor:pointer;
}
.hero-dot.is-active{
  background: rgba(29,78,216,0.95);
  border-color: rgba(29,78,216,0.40);
  box-shadow: 0 0 0 4px rgba(29,78,216,0.14);
}

/* Mobile: Overlay mittiger & etwas größer */
@media (max-width: 680px){
  .hero-slide__overlay{
    max-width: 92vw;
    padding: 16px;
  }
  .hero-slider__prev{ left: 10px; }
  .hero-slider__next{ right: 10px; }
}

/* Motion */
@media (prefers-reduced-motion: reduce){
  .hero-slider__track{ transition: none !important; }
}

@media (max-width: 768px) {
#loginBtnDesktop { display: none !important; }
}




/* FIX: Mobile Menü-Button bleibt oben rechts (keine neue Zeile, kein Zentrieren) */
@media (max-width: 820px){
  .topbar-inner{
    flex-wrap: nowrap !important;
  }

  .mobile-actions{
    width: auto !important;
    justify-content: flex-end !important;
    margin-top: 0 !important;
    margin-left: auto !important;
  }
}



@media (max-width: 820px){
  .hamburger{
    position: relative;
    z-index: 10001 !important;
    pointer-events: auto !important;
  }
}





/* MOBILE: Video Buttons nebeneinander unten im Video */
@media (max-width: 680px){

  /* beide Buttons zuerst resetten */
  #restartBtn,
  #soundBtn{
    position:absolute !important;
    bottom:2px !important;
    right:auto !important;
    left:50% !important;

    /* kleiner machen */
    padding:4px 8px !important;
    font-size:12px !important;
    border-radius:12px !important;
    min-width:135px;

    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* linker Button */
  #restartBtn{
    transform:translateX(-105%);
  }

  /* rechter Button */
  #soundBtn{
    transform:translateX(5%);
  }
}



.cardMesh{width: 240px; height: 225px;}

@media (max-width: 680px){
.cardMesh{width: 100%; height: auto;}}



.mTop{
color: #000000; margin-top: 40px;

}

@media (max-width: 680px){
  .mTop{
margin-top: 0px;}}