:root{
  --bg-dark:#050615;
  --bg-darker:#02030b;
  --bg-card:rgba(16,18,40,.9);
  --accent:#7b5cff;
  --accent-soft:#5bd1ff;
  --text-main:#f5f5f7;
  --text-muted:#a3a5c4;
  --border-subtle:rgba(255,255,255,.08);
  --radius-lg:16px;
  --radius-xl:24px;
  --shadow-soft:0 18px 45px rgba(0,0,0,.6);
  --max-width:1080px;
  --transition-fast:.2s ease-out;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text-main);
  overflow-x: hidden;
  overflow-x: clip;
  background:radial-gradient(1200px 600px at 20% 0%, rgba(123,92,255,.20), transparent 60%),
             radial-gradient(900px 500px at 80% 10%, rgba(91,209,255,.14), transparent 55%),
             linear-gradient(180deg, var(--bg-darker), var(--bg-dark));
}

/* Global Scrollbar Theme (match style.css) */
*{
  scrollbar-width: thin;
  scrollbar-color: rgba(80, 121, 255, 0.9) rgba(4, 2, 11, 0.9);
}

*::-webkit-scrollbar{
  width:10px;
  height:10px;
}

*::-webkit-scrollbar-track{
  background:
    radial-gradient(18px 18px at 30% 25%, rgba(140, 0, 255, 0.10), transparent 60%),
    rgba(2, 3, 11, 0.55);
  border:1px solid var(--border-subtle);
  border-radius:999px;
  box-shadow: inset 0 0 0 1px rgba(245, 245, 247, 0.04);
}

*::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(123, 92, 255, 0.98), rgba(91, 209, 255, 0.82));
  border: 2px solid rgba(2, 3, 11, 0.55);
  border-radius: 999px;
  box-shadow:
    0 0 18px rgba(91, 209, 255, 0.22),
    0 0 36px rgba(123, 92, 255, 0.14);
}

*::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(123, 92, 255, 1), rgba(91, 209, 255, 0.92));
  box-shadow:
    0 0 22px rgba(91, 209, 255, 0.30),
    0 0 44px rgba(123, 92, 255, 0.20);
}

*::-webkit-scrollbar-thumb:active{
  background: linear-gradient(180deg, rgba(91, 209, 255, 0.95), rgba(123, 92, 255, 0.95));
  box-shadow:
    0 0 26px rgba(91, 209, 255, 0.38),
    0 0 52px rgba(123, 92, 255, 0.26);
}

*::-webkit-scrollbar-corner{
  background: rgba(2, 3, 11, 0.55);
}

a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max-width); margin:0 auto; padding:28px 18px 0}

/* Scroll reveal */
[data-reveal]{
  opacity:0;
  transform: translateY(10px);
  transition: opacity 450ms ease, transform 450ms ease;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal].is-visible{
  opacity:1;
  transform: translateY(0);
}

.header{
  position:sticky;
  top:0;
  z-index:50;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-top:-28px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  /* Keep content aligned to the existing centered layout */
  padding:0.9rem 18px;
  padding:0.9rem max(18px, calc((100vw - var(--max-width)) / 2 + 18px));

  border:none;
  border-bottom:1px solid var(--border-subtle);
  background:rgba(2, 3, 11, 0.65);
  border-radius:0;
  backdrop-filter: blur(14px);
  box-shadow:none;
}

.brand{display:flex; gap:10px; align-items:flex-start}
.brandMark{
  width:10px;
  height:10px;
  border-radius:999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  box-shadow:
    0 0 0 4px rgba(123, 92, 255, 0.12),
    0 0 28px rgba(123, 92, 255, 0.35);
  margin-top: 3px;
}
.brandText{line-height:1.1}
.brandText b{display:block; font-size:14px; letter-spacing:.3px}
.brandText span{display:block; font-size:12px; color:var(--text-muted)}

.lang{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.langBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  position:relative;
  padding:0.6rem 0.9rem;
  padding-right:42px;
  line-height:1;
  min-width:56px;
  white-space:nowrap;
  border-radius:999px;
  border:1px solid var(--border-subtle);
  background:rgba(245, 245, 247, 0.03);
  color:var(--text-main);
  cursor:pointer;
  font-weight:650;
  user-select:none;
  transition:transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.langBtn::after{
  content:'';
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  width:0;
  height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:7px solid rgba(245, 245, 247, 0.9);
  pointer-events:none;
}

.langBtn:hover{
  transform:translateY(-1px);
  border-color:rgba(245, 245, 247, 0.16);
  box-shadow:0 18px 55px rgba(0, 0, 0, 0.35);
}

.langBtn:active{transform:translateY(0)}

.langBtn:focus-visible{
  outline:3px solid rgba(80, 121, 255, 0.55);
  outline-offset:3px;
}

.langMenu{
  display:block;
  position:absolute; right:0; top:46px;
  min-width:160px;
  padding:8px;
  border-radius:16px;
  border:1px solid var(--border-subtle);
  background:rgba(10,12,28,.92);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);

  opacity:0;
  transform: translateY(-6px);
  visibility:hidden;
  pointer-events:none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}
.langMenu.open{
  opacity:1;
  transform: translateY(0);
  visibility:visible;
  pointer-events:auto;
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
}
.langItem{
  width:100%;
  text-align:left;
  padding:10px 10px;
  border-radius:12px;
  border:none;
  background:transparent;
  color:var(--text-main);
  cursor:pointer;
}
.langItem:hover{background:rgba(123,92,255,.14)}

.hero{
  margin-top:18px;
  padding:26px 18px;
  border-radius:var(--radius-xl);
  border:1px solid var(--border-subtle);
  background:linear-gradient(180deg, rgba(16,18,40,.85), rgba(10,12,28,.55));
  box-shadow: var(--shadow-soft);
}

.kicker{color:var(--accent-soft); font-size:12px; letter-spacing:.5px; text-transform:uppercase}
h1{margin:8px 0 10px; font-size:34px}
.sub{color:var(--text-muted); max-width:760px; line-height:1.55}

.actions{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-top:18px;
}

.actions > .btn{
  width:100%;
}

.actions > .btn:only-child{
  grid-column: 1 / -1;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--border-subtle);
  background:rgba(16,18,40,.55);
  transition:transform var(--transition-fast), border-color var(--transition-fast);
}
.btn:hover{transform:translateY(-1px); border-color:rgba(91,209,255,.35)}
.btnPrimary{
  background:linear-gradient(135deg, rgba(123,92,255,.95), rgba(91,209,255,.65));
  border-color:rgba(255,255,255,.12);
}
.btnPrimary:hover{border-color:rgba(255,255,255,.22)}

/* Go to top */
.to-top{
  position:fixed;
  right:1.25rem;
  bottom:1.25rem;
  z-index:60;

  width:44px;
  height:44px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border-subtle);
  background: rgba(245, 245, 247, 0.03);
  backdrop-filter: blur(14px);
  color:var(--accent-soft);
  box-shadow: 0 18px 45px rgba(0,0,0,.55);

  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:18px;
  line-height:1;
  cursor:pointer;

  opacity:0;
  transform: translateY(10px);
  pointer-events:none;
  transition: transform var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.to-top.is-visible{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

.to-top:hover{
  transform: translateY(-1px);
  border-color:rgba(245, 245, 247, 0.16);
  box-shadow:0 18px 55px rgba(0, 0, 0, 0.35);
}

.to-top:active{transform: translateY(0)}

.grid{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
}
.card{
  grid-column: span 6;
  padding:16px 16px;
  border-radius:var(--radius-xl);
  border:1px solid var(--border-subtle);
  background:rgba(16,18,40,.55);
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.card:hover{
  transform: translateY(-2px);
  border-color: rgba(245, 245, 247, 0.14);
  box-shadow: 0 22px 60px rgba(0,0,0,0.55);
}
.card h3{margin:0 0 6px; font-size:16px}
.card p{margin:0; color:var(--text-muted); line-height:1.55}

/* Tool-Sections: Inhalte sollen volle Breite nutzen (nicht 2-spaltig gequetscht) */
.section .grid{
  grid-template-columns: 1fr;
}

.section .grid > .card{
  grid-column: 1 / -1;
}

@media (max-width: 860px){
  .card{grid-column: span 12;}
  h1{font-size:28px}
}

.footer{
  margin-top:18px;
  position:relative;
  z-index:1;

  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);

  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:space-between;
  align-items:center;

  border-top: 1px solid var(--border-subtle);
  background: rgba(2, 3, 11, 0.5);
  backdrop-filter: blur(14px);

  color:var(--text-muted);
  font-size:12px;
  padding: 1.25rem 18px;
  padding: 1.25rem max(18px, calc((100vw - var(--max-width)) / 2 + 18px));
}
.footer a{color:var(--text-muted)}
.footer a:hover{color:var(--text-main)}

.section{margin-top:16px}
.sectionTitle{margin:0 0 10px; font-size:20px; letter-spacing:.2px}

/* FAQ Accordion */
.faq-list{
  margin-top:16px;
  display:grid;
  gap:12px;
}

.faq-item{
  border-radius:var(--radius-xl);
  border:1px solid var(--border-subtle);
  background:rgba(16,18,40,.55);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}

.faq-q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  cursor:pointer;
  font-weight:650;
  list-style:none;
  position:relative;
  padding-right:44px;
  --faq-rot: 0deg;
}

.faq-item[open] .faq-q{
  --faq-rot: 180deg;
}

.faq-q::-webkit-details-marker{display:none}
.faq-q::marker{content:""}

.faq-q::before,
.faq-q::after{
  content:"";
  position:absolute;
  right:16px;
  top:50%;
  width:14px;
  height:2px;
  border-radius:999px;
  background: rgba(163, 165, 196, 0.92);
  transform-origin:center;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease, background-color 260ms ease;
}

/* horizontal bar */
.faq-q::after{
  transform: translateY(-50%) rotate(var(--faq-rot));
}

/* vertical bar (forms the +). We'll hide it when open to become − */
.faq-q::before{
  transform: translateY(-50%) rotate(calc(90deg + var(--faq-rot)));
}

.faq-item[open] .faq-q::before{
  opacity:0;
  transform: translateY(-50%) rotate(90deg) scaleX(0);
}

.faq-a{
  /* Override UA default (details closes by display:none) so we can animate */
  display:grid;
  grid-template-rows: 0fr;
  padding:0 16px;
  color:var(--text-muted);
  line-height:1.55;
  opacity:0;
  transform: translateY(-2px);
  transition:
    grid-template-rows 420ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 260ms ease,
    transform 260ms ease,
    padding 420ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: grid-template-rows, opacity, transform, padding;
}

/* keep answer container present even when details is closed */
.faq-item:not([open]) > .faq-a{display:grid}

.faq-item[open] > .faq-a{
  grid-template-rows: 1fr;
  padding:0 16px 14px;
  opacity:1;
  transform: translateY(0);
}

.faq-a > *{
  overflow:hidden;
}

.faq-a p{margin:0}

@media (prefers-reduced-motion: reduce){
  .faq-a{transition:none}

  .faq-q::before,
  .faq-q::after{
    transition:none;
  }
}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn,
  .card,
  .to-top,
  .langBtn,
  .langMenu{
    transition: none;
  }

  .card:hover,
  .btn:hover,
  .to-top:hover,
  .langBtn:hover{
    transform: none;
  }
}