/* Kein Gummiband-Effekt: die Seite endet, wo sie endet. Dunkler
   html-Grund, falls ein Rest-Bounce doch etwas freilegt. */
html { overscroll-behavior: none; background: #17181c; }
body { overscroll-behavior: none; }

/* jd.Tools — gemeinsames Stylesheet, Design-Sprache der App:
   dunkler Grundton, orange Akzentfarbe, Phone-Rahmen für Screenshots. */

:root {
  --ne-accent: #e8862a;
  --ne-accent-soft: rgba(232, 134, 42, .12);
  --ne-bg: #17181c;
  --ne-bg-elevated: #1f2127;
  --ne-border: rgba(255, 255, 255, .08);
}

body { background: var(--ne-bg); overflow-x: hidden; }
.text-accent { color: var(--ne-accent) !important; }
a { color: var(--ne-accent); text-decoration: none; }
a:hover { color: #f39a44; }
footer a { color: rgba(255, 255, 255, .55); }
footer a:hover { color: var(--ne-accent); }
footer { border-color: var(--ne-border) !important; }

.site-nav {
  backdrop-filter: blur(14px);
  background: rgba(23, 24, 28, .82) !important;
  border-color: var(--ne-border) !important;
}
.site-nav a { color: rgba(255, 255, 255, .75); }
.site-nav a:hover, .site-nav .navbar-brand:hover { color: var(--ne-accent); }
.lang-select {
  width: auto;
  height: 38px;
  background-color: var(--ne-bg-elevated);
  border-color: var(--ne-border);
}

.btn-accent {
  --bs-btn-bg: var(--ne-accent);
  --bs-btn-border-color: var(--ne-accent);
  --bs-btn-hover-bg: #f39a44;
  --bs-btn-hover-border-color: #f39a44;
  --bs-btn-active-bg: #d2751d;
  --bs-btn-active-border-color: #d2751d;
  --bs-btn-color: #171009;
  --bs-btn-hover-color: #171009;
  --bs-btn-active-color: #171009;
  font-weight: 600;
}

.eyebrow {
  color: var(--ne-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
}

.hero {
  padding: 7.5rem 0 4rem;
  background:
    radial-gradient(1100px 520px at 78% -10%, rgba(232, 134, 42, .16), transparent 60%),
    radial-gradient(700px 420px at 10% 8%, rgba(232, 134, 42, .07), transparent 60%);
}
.hub-hero { padding: 8rem 0 3rem; }

.phone {
  border-radius: 2.2rem;
  border: 1px solid var(--ne-border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 8px #0c0d10,
              0 0 0 9px rgba(255, 255, 255, .07);
  overflow: hidden;
  background: #000;
}
.phone img { display: block; width: 100%; height: auto; }

.area.alt { background: var(--ne-bg-elevated); border-top: 1px solid var(--ne-border);
  border-bottom: 1px solid var(--ne-border); }

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { display: flex; gap: .6rem; margin-bottom: .55rem;
  color: rgba(255, 255, 255, .72); }
.ticks .tick { color: var(--ne-accent); flex: 0 0 auto; font-weight: 700; }

.app-card, .card-block, .pricecard, .stat {
  background: var(--ne-bg-elevated);
  border: 1px solid var(--ne-border);
  border-radius: 1.1rem;
}
.app-card { transition: transform .18s ease, border-color .18s ease; }
.app-card:hover { transform: translateY(-3px); border-color: rgba(232, 134, 42, .45); }
.min-w-0 { min-width: 0; }

.pricecard.pro { border-color: rgba(232, 134, 42, .55); }
.introbadge {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: var(--ne-accent); color: #171009; padding: .45rem .9rem;
}

.page { padding-top: 7rem; padding-bottom: 2rem; }

@media (max-width: 991.98px) {
  .hero { text-align: center; }
  .hero .lead { margin-inline: auto; max-width: 40rem; }
}