/* Effekt-Seiten von jd.Edit — Design-Sprache der App: dunkler Grund,
   Orange als Akzent, Phone-Rahmen für Screenshots. */
html { overscroll-behavior: none; background: #17181c; }
body { overscroll-behavior: none; background: #17181c; overflow-x: hidden; }
: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);
}
.text-accent { color: var(--ne-accent) !important; }
a { color: var(--ne-accent); }
.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;
}
.btn-outline-accent {
  --bs-btn-color: var(--ne-accent); --bs-btn-border-color: var(--ne-accent);
  --bs-btn-hover-bg: var(--ne-accent-soft); --bs-btn-hover-color: var(--ne-accent);
  --bs-btn-hover-border-color: var(--ne-accent); --bs-btn-active-bg: var(--ne-accent-soft);
  --bs-btn-active-color: var(--ne-accent); --bs-btn-active-border-color: var(--ne-accent);
}
.navbar { backdrop-filter: blur(14px); background: rgba(23, 24, 28, .82) !important; }
.navbar .nav-link { color: rgba(255,255,255,.75); }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--ne-accent); }
.lang-select { width: auto; height: 38px; background-color: var(--ne-bg-elevated); border-color: var(--ne-border); }
.eyebrow { color: var(--ne-accent); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; }
.section-title { font-weight: 750; letter-spacing: -.015em; }
.page-head { padding: 7.5rem 0 2.5rem;
  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%); }
.page-head .lead { color: rgba(255,255,255,.72); }
.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; }
.fx-tag { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ne-accent); border: 1px solid rgba(232,134,42,.45); border-radius: 999px;
  padding: .2rem .55rem; white-space: nowrap; }
.fx-badge { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: #171009; background: var(--ne-accent); border-radius: 999px; padding: .2rem .55rem; white-space: nowrap; }
.fx-row { border: 1px solid var(--ne-border); border-radius: 1.4rem;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)); }
.fx-row .phone { max-width: 230px; margin-inline: auto; }
.fx-row h2 a { color: inherit; text-decoration: none; }
.fx-row h2 a:hover { color: var(--ne-accent); }
.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; }
.use-card, .param-wrap, .tip-card { border: 1px solid var(--ne-border); border-radius: 1.1rem;
  background: var(--ne-bg-elevated); height: 100%; }
/* Die Tabelle endet mit ihrer letzten Zeile — nicht auf Höhe der Tipps. */
.param-wrap { overflow: hidden; height: auto; }
.param-table { margin: 0; }
.param-table th { color: var(--ne-accent); font-weight: 600; white-space: nowrap; width: 12rem; }
.param-table td, .param-table th { padding: .75rem 1rem; border-color: var(--ne-border); }
.param-table tr:last-child > * { border-bottom: 0; }
.breadcrumb a { color: rgba(255,255,255,.6); text-decoration: none; }
.breadcrumb a:hover { color: var(--ne-accent); }
.breadcrumb-item.active { color: rgba(255,255,255,.85); }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.35); }
.cta-panel { background: radial-gradient(720px 320px at 50% -40%, rgba(232,134,42,.22), transparent 65%), var(--ne-bg-elevated);
  border: 1px solid var(--ne-border); border-radius: 1.4rem; }
.cost-note { border-left: 3px solid var(--ne-accent); padding-left: .9rem; color: rgba(255,255,255,.72); }
footer a { color: rgba(255,255,255,.55); text-decoration: none; }
footer a:hover { color: var(--ne-accent); }
/* Schmale Geräte: nichts darf breiter sein als der Schirm. Der
   Bootstrap-Container behält seine Breitenstufen wie auf der Startseite. */
img, .phone { max-width: 100%; }
p, li, td, h1, h2, h3 { overflow-wrap: anywhere; }
@media (max-width: 767.98px) {
  .page-head { padding-top: 6rem; }
  .page-head .display-5 { font-size: 2.2rem; }
  .fx-row { padding: 1.25rem !important; }
  .param-table th { width: auto; white-space: normal; }
}