/* =============================================================
   OCHEBUDDY.CSS — Shared design system
   index.html · datenschutz.html · support.html
   en/index.html · en/privacy.html · en/support.html
   ============================================================= */

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  --bg:     #09090e;
  --bg2:    #0f0f18;
  --surf:   #14141e;
  --surf2:  #1a1a28;
  --lime:   #c8f000;
  --lime2:  #a8cc00;
  --white:  #f2eee8;
  --muted:  #d2d2da;
  --dim:    #4a4a60;
  --border: rgba(240,240,240,0.4);
  --bw:     rgba(255,255,255,0.07);
  --nav-h:  5.25rem;
  --r:      0.875rem;
  --r2:     1.25rem;
  --gut:    clamp(1.125rem, 5vw, 5rem);
  --fd:     'Raleway', sans-serif;
  --fb:     'DM Sans', sans-serif;
}

/* ── RESET ───────────────────────────────────────────────────── */
*, *::before, *::after { 
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { 
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  font-size: 16px;
}

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--fb);
  font-size: 1.1rem;
  line-height: 1.65;
  overflow-x: hidden;
}
/*
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .28;
}
*/

/* ── NAVIGATION ──────────────────────────────────────────────── */

.nav-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
}

.nav-bar {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 var(--gut);
  background: rgba(9,9,14,.92);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
}

.nav-logo { 
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo img {
  width: 280px;
  height: 60px;
  border:0;
}

.nav-wm {
  font-family: var(--fd);
  font-size: 1.5rem;
  letter-spacing: 0.125rem;
  color: var(--lime);
  line-height: 1;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  list-style: none;
  flex: 1;
  justify-content: center;
}

.nav-links a {
  display: block;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.375rem 0.75rem;
  border-radius: 0.4375rem;
  white-space: nowrap;
  transition: color .2s, background .2s;
}
.nav-links a:hover, .nav-links a.active {
  color: var(--white);
  background: var(--bw);
}
.nav-links .nc {
  background: var(--lime);
  color: #000 !important;
  border-radius: 2.5rem;
  padding: 0.375rem 1rem;
  margin-left: 0.25rem;
}
.nav-links .nc:hover {
  background: var(--white);
}

/* Language toggle — works as <span> (active) + <a> (link), no JS */
.nav-right {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}
.lang-toggle {
  display: flex;
  background: var(--surf2);
  border: 1px solid var(--border);
  border-radius: 2.5rem;
  overflow: hidden;
}
.lang-btn {
  font-family: var(--fb);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.0625rem;
  color: var(--muted);
  padding: 0.3125rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: all .2s;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  line-height: 1.5;
}
.lang-btn.active { 
  background: var(--lime);
  color: #000;
  border-radius: 2.5rem;
  cursor: default;
}
.lang-btn:not(.active):hover {
  color: var(--white);
}


/* Hamburger */
.nav-burger {
  display: none;
  flex-direction: column;
  gap: 0.28125rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  justify-content: center;
  align-items: center;
  background: var(--surf2);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 0.4375rem;
  position: absolute;
  right: 1rem;
  z-index: 9999;
  cursor: pointer;
}
.nav-burger span {
  display: block;
  width: 1rem;
  height: 0.09375rem;
  background: var(--white);
  border-radius: 0.125rem;
  transition: all .28s;
  transform-origin: center;
}
.nav-burger.open span:nth-child(1) { transform: translateY(0.375rem) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-burger.open span:nth-child(3) { transform: translateY(-0.375rem) rotate(-45deg); }

.nav-mobile {
  background: rgba(9,9,14,.97);
  backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  max-height: 0;
  transition: max-height .38s cubic-bezier(.4,0,.2,1);
}
.nav-mobile.open {
  max-height: 32.5rem;
}
.nav-mobile ul {
  list-style: none;
  padding: 0.75rem var(--gut) 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.nav-mobile a {
  display: block;
  color: var(--muted);
  text-decoration: none;
  font-size: 1.0625rem;
  font-weight: 500;
  padding: 0.625rem 0.875rem;
  border-radius: 0.5625rem;
  transition: all .2s;
}
.nav-mobile a:hover {
  color: var(--white);
  background: var(--bw);
}
.nav-mobile .nc {
  background: var(--lime);
  color: #000 !important;
  font-weight: 700;
  text-align: center;
  margin-top: 0.375rem;
  border-radius: 0.5625rem;
}
.nav-mobile .nc:hover {
  background: var(--white)
}


/* ── SECTION HELPERS ─────────────────────────────────────────── */
section {
  padding: clamp(4rem,9vw,7rem) var(--gut);
}
.s-lbl {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1875rem;
  color: var(--lime);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.s-ttl {
  font-family: var(--fd);
  font-size: clamp(2.5rem,6.5vw,5rem);
  line-height: 1;
  letter-spacing: 0.0625rem;
  color: var(--white);
  margin-bottom: 1rem;
}
.s-sub {
  color: var(--muted);
  font-size: clamp(1rem,2vw,1.25rem);
  max-width: 34rem;
  font-weight: 300;
  line-height: 1.8;
}


/* ── ANIMATIONS ──────────────────────────────────────────────── */
@keyframes fadeUp { from { opacity:0; transform:translateY(1.5rem); } to { opacity:1; transform:none; } }
@keyframes pls    { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }
@keyframes spin   { to { transform:translateY(-50%) rotate(360deg); } }

/* ── STORE BUTTONS ───────────────────────────────────────────── */
.store-btn {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  background: var(--surf2);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 0.75rem;
  padding: 0.8125rem 1.25rem;
  text-decoration: none;
  color: var(--white);
  min-width: 10.5rem;
  transition: all .24s;
}
.store-btn:hover { border-color: var(--lime); transform: translateY(-2px); box-shadow: 0 0.5rem 1.75rem rgba(200,240,0,.09); }
.store-btn-dk {
  display: flex; align-items: center; gap: 0.6875rem; background: #000;
  border-radius: 0.75rem; padding: 0.8125rem 1.25rem; text-decoration: none;
  color: var(--white); min-width: 10.5rem; transition: all .24s;
}
.store-btn-dk:hover { background: #111; transform: translateY(-2px); box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.35); }
.sbt { display: flex; flex-direction: column; }
.sbt small { font-size: 0.6875rem; color: var(--muted); line-height: 1; }
.sbt strong { font-size: 1rem; font-weight: 600; line-height: 1.3; }
.store-btn-dk .sbt small { color: rgba(255,255,255,.55); }

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: 0.125rem; }
.faq-item { background: var(--surf); border-radius: var(--r); overflow: hidden; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 1.125rem 1.25rem; background: none; border: none; cursor: pointer;
  text-align: left; gap: 0.875rem; font-family: var(--fb);
  font-size: 1rem;
  font-weight: 600; color: var(--white); transition: color .2s;
}
.faq-q:hover { color: var(--lime); }
.faq-icon {
  flex-shrink: 0; width: 1.375rem; height: 1.375rem; border-radius: 50%;
  border: 1.5px solid var(--dim); display: flex; align-items: center;
  justify-content: center; transition: all .26s;
}
.faq-icon::after { content: '+'; font-size: 0.875rem; color: var(--muted); line-height: 1; }
.faq-item.open .faq-icon { border-color: var(--lime); background: rgba(200,240,0,.08); }
.faq-item.open .faq-icon::after { content: '−'; color: var(--lime); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .36s ease; }
.faq-item.open .faq-a { max-height: 25rem; }
.faq-a p, .faq-a-inner {
  padding: 0 1.25rem 1rem; color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 300; line-height: 1.8;
}
.faq-a-inner a { color: var(--lime); }
.faq-a-inner ul, .faq-a-inner ol { padding-left: 1.125rem; margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
.faq-a-inner strong { color: var(--white); }


/* ── FOOTER ──────────────────────────────────────────────────── */
footer { background: var(--bg2); border-top: 1px solid var(--border); padding: 2.125rem var(--gut); }
.footer-in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.footer-logo { font-family: var(--fd); font-size: 1.25rem; letter-spacing: 0.125rem; color: var(--lime); }
.footer-leg { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer-leg a { color: var(--muted); text-decoration: none; font-size: 0.875rem; transition: color .2s; }
.footer-leg a:hover { color: var(--white); }
.footer-copy { color: var(--dim); font-size: 0.8125rem; }


/* ── SCROLL ANIMATIONS ───────────────────────────────────────── */
.anim { opacity: 0; transform: translateY(1.5rem); transition: opacity .48s ease, transform .48s ease; }
.anim.in { opacity: 1; transform: none; }


/* ── SHARED BUTTONS ──────────────────────────────────────────── */
.btn-outline {
  display: block; text-align: center; border: 1px solid var(--border);
  border-radius: 2.5rem; padding: 0.8125rem 1.25rem; color: var(--muted);
  text-decoration: none; font-weight: 600; font-size: 0.9375rem; transition: all .22s;
}
.btn-outline:hover { border-color: var(--white); color: var(--white); }
.btn-lime {
  display: block; text-align: center; background: var(--lime); border-radius: 2.5rem;
  padding: 0.8125rem 1.25rem; color: #000; text-decoration: none; font-weight: 700;
  font-size: 0.9375rem; transition: all .22s;
}
.btn-lime:hover { background: var(--white); }


/* =============================================================
   INDEX — page-specific
   ============================================================= */

/* Hero */
.hero {
  min-height: 100svh;
  display: flex;
  background: url("../images/ochebuddy-header.webp"), repeating-linear-gradient(to bottom,  #0b1725 0%,#0e1728 6%,#0d1625 8%,#0d1527 9%,#0d1623 10%,#0d1625 11%,#0a1825 11%,#0d1625 13%,#0d1527 23%,#0d1623 23%,#0a1825 25%,#0b1627 25%,#0b1723 26%,#0e1726 26%,#0e1728 28%,#0d1625 32%,#0d1529 33%,#0d1527 36%,#0a1825 36%,#0d1625 38%,#0c1524 59%,#0d1527 66%,#0a1825 69%,#0b1725 70%,#0b1629 71%,#0d1527 71%,#0d1625 76%,#0a1825 76%,#0a1825 77%,#0b1627 77%,#0b1627 84%,#0b1723 84%,#0b1627 87%,#0b1723 88%,#0b1627 91%,#0b1627 94%,#0b1723 95%,#0d1625 96%,#081825 96%,#0b1627 97%,#0b1723 98%,#0d1625 98%,#0a1825 99%,#0a1825 99%,#0b1627 99%,#0b1725 100%);
  background-position: left bottom;
/*  background-size: contain; */
  background-repeat: no-repeat, repeat;
  align-items: center;
  padding-top: calc(var(--nav-h) + 3.5rem);
  padding-bottom: 4.5rem;
  padding-left: var(--gut);
  padding-right: var(--gut);
  position: relative;
  overflow: hidden;
}
.hero-board {
  position: absolute;
  right: -5vw;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(17.5rem,50vw,42.5rem);
  height: clamp(17.5rem,50vw,42.5rem);
  opacity: .09;
  animation: spin 90s linear infinite;
  pointer-events: none;
}
.hero-glow {
  position: absolute; right: 10vw; top: 50%; transform: translateY(-50%);
  width: 27.5rem; height: 27.5rem; pointer-events: none;
  background: radial-gradient(circle, rgba(200,240,0,.06) 0%, transparent 70%);
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 40%;
  margin-left:55%;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 2.5rem;
  background: rgba(200,240,0,.08);
  border: 1px solid rgba(200,240,0,.25);
  padding: 0.375rem 0.9375rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.125rem;
  color: var(--lime);
  text-transform: uppercase;
  margin-bottom: 1.625rem;
  animation: fadeUp .5s ease both;
}
.hero-badge::before {
  content: '';
  width: 0.3125rem;
  height: 0.3125rem;
  background: var(--lime);
  border-radius: 50%;
  animation: pls 2s ease infinite;
}

.hero-title {
  font-family: var(--fd);
  font-size: clamp(4rem,11vw,8.5rem);
  text-transform:uppercase;
  line-height: .9;
  letter-spacing: 0.125rem;
  color: var(--muted);
  animation: fadeUp .5s .1s ease both;
}

.hero-title h1 {
  font-family: var(--fd);
  font-size: clamp(4rem,11vw,8.5rem);
  line-height: .9;
  letter-spacing: 0.125rem;
  color: var(--white);
  animation: fadeUp .5s .1s ease both;
}

.hero-title .ac {
  color: var(--lime);
}


.hero-sub {
  font-size: clamp(1.0625rem,2.2vw,1.25rem);
  color: var(--muted);
  margin-top: 1.5rem;
  max-width: 30.625rem;
  font-weight: 300;
  line-height: 1.8;
  animation: fadeUp .5s .2s ease both;
}
.hero-cta { 
  display: flex;
  flex-wrap: wrap;
  gap: 0.8125rem;
  margin-top: 2.5rem;
  animation: fadeUp .5s .3s ease both;
}
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  animation: fadeUp .5s .4s ease both;
}
.stat-n
{
  font-family: var(--fd);
  font-size: 2.375rem;
  color: var(--lime);
  line-height: 1;
}
.stat-l
{
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.1875rem;
}

/* USP strip */
.usp-strip
{
  background: var(--surf);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.25rem var(--gut);
}
.usp-inner
{
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: center;
}
.usp-item
{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
}
.usp-item span
{
  color: var(--lime);
  font-size: 1rem;
}

/* Features */
.features
{
  background: var(--bg2);
}
.feat-grid
{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.875rem,1fr));
  gap: 0.125rem;
  margin-top: 3.25rem;
}
.feat-card 
{
  background: var(--surf);
  padding: 2.125rem 1.875rem;
  position: relative;
  overflow: hidden;
  transition: background .28s;
  /* border: 1px solid var(--border); */
}
.feat-card:hover
{
  background: var(--surf2);
}
.feat-card::after
{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.125rem;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s;
}
.feat-card:hover::after
{
  transform: scaleX(1);
}

.feat-ico { width: 2.875rem; height: 2.875rem; background: rgba(200,240,0,.08); border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 1.125rem; }
.feat-ttl { font-family: var(--fd); font-size: 1.5rem; letter-spacing: 0.03125rem; color: var(--white); margin-bottom: 0.5rem; }
.feat-dsc { color: var(--muted); font-size: 0.9375rem; line-height: 1.75; font-weight: 300; }
.feat-note { display: inline-flex; align-items: center; gap: 0.3125rem; margin-top: 0.625rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05rem; text-transform: uppercase; padding: 0.1875rem 0.5625rem; border-radius: 1.25rem; background: rgba(200,240,0,.1); color: var(--lime); }

/* Display modes & Themes */
.display { background: var(--bg); }
.dm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.75rem,1fr)); gap: 1.125rem; margin-top: 1.25rem; }
.dm-card { border-radius: var(--r2); overflow: hidden; border: 1px solid transparent; transition: transform .28s, box-shadow .28s; }
.dm-card:hover { transform: translateY(-5px); box-shadow: 0 1.125rem 3.25rem rgba(0,0,0,.5); }

/* Dark themes (free) */
.dm-dark  { background: #0d0d0d; border-color: rgba(255,255,255,.5); }
.dm-hico  { background: #000;    border-color: rgba(255,255,255,.5); }
.dm-ocean { background: #0d1e38; border-color: rgba(255,255,255,.5); }
/* Light themes (free) */
.dm-light { background: #f0f0eb; border-color: rgba(0,0,0,.1); }
.dm-auto  { background: #e8e8f0; border-color: rgba(0,0,0,.08); }
/* Pro themes */
.dm-sage  { background: #F1F8F5; border-color: rgba(42,111,81,.25); }
.dm-rose  { background: #FFF5F7; border-color: rgba(168,50,83,.2); }

/* Subheader between free / pro theme groups */
.dm-subhead {
  display: flex; align-items: center; gap: 0.75rem;
  margin-top: 2.5rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15rem; text-transform: uppercase;
}
.dm-subhead:first-of-type { margin-top: 3.25rem; }
.dm-subhead span
{
  color: var(--lime);
}
.dm-pro-tag
{
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.07rem;
  text-transform: uppercase;
  background: var(--lime);
  color: #000;
  padding: 0.125rem 0.5rem;
  border-radius: 1rem;
}
.dm-subhead span.dm-pro-tag
{
  color: #000;
}
.dm-preview { padding: 1.25rem 1.25rem 0; height: 10.75rem; overflow: hidden; }
.dp-head { height: 1.5625rem; border-radius: 0.375rem 0.375rem 0 0; display: flex; align-items: center; padding: 0 0.625rem; gap: 0.375rem; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.0625rem; }
.dp-dot  { width: 0.34375rem; height: 0.34375rem; border-radius: 50%; }
.dp-body { padding: 0.5625rem 0.625rem; display: flex; flex-direction: column; gap: 0.375rem; }
.dp-score { font-family: var(--fd); font-size: 2.125rem; line-height: 1; }
.dp-sub   { font-size: 0.53125rem; letter-spacing: 0.0625rem; margin-top: -0.1875rem; }
.dp-bar   { height: 0.25rem; border-radius: 0.1875rem; }
.dp-keys  { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.25rem; margin-top: 0.125rem; }
.dp-key   { height: 1.1875rem; border-radius: 0.25rem; display: flex; align-items: center; justify-content: center; font-size: 0.5rem; font-weight: 600; }
.dm-dark .dp-head  { background: #181826; color: #c8f000; }
.dm-dark .dp-dot   { background: #c8f000; }
.dm-dark .dp-body  { background: #0e0e1a; }
.dm-dark .dp-score { color: #c8f000; }
.dm-dark .dp-sub   { color: #424258; }
.dm-dark .dp-bar   { background: #c8f000; }
.dm-dark .dp-key   { background: #1a1a2a; color: #a8a8be; }
.dm-dark .dp-key:first-child { background: rgba(200,240,0,.14); color: #c8f000; }
.dm-light .dp-head  { background: #e2e2dc; color: #1a1a1a; }
.dm-light .dp-dot   { background: #2a2a2a; }
.dm-light .dp-body  { background: #e8e8e2; }
.dm-light .dp-score { color: #0a0a0a; }
.dm-light .dp-sub   { color: #868680; }
.dm-light .dp-bar   { background: #1a1a1a; }
.dm-light .dp-key   { background: #d8d8d2; color: #2a2a2a; }
.dm-light .dp-key:first-child { background: #111; color: #fff; }
.dm-hico .dp-head  { background: #080808; color: #fff; border-bottom: 1px solid #fff; }
.dm-hico .dp-dot   { background: #fff; }
.dm-hico .dp-body  { background: #000; }
.dm-hico .dp-score { color: #fff; }
.dm-hico .dp-sub   { color: #777; }
.dm-hico .dp-bar   { background: #fff; }
.dm-hico .dp-key   { background: #0e0e0e; color: #fff; border: 1px solid #3a3a3a; }
.dm-hico .dp-key:first-child { background: #fff; color: #000; border-color: #fff; }

/* Auto mode (follows system – shown as light variant) */
.dm-auto .dp-head  { background: #dcdce8; color: #2a2a3a; }
.dm-auto .dp-dot   { background: #4a4a6a; }
.dm-auto .dp-body  { background: #e4e4f0; }
.dm-auto .dp-score { color: #2a2a3a; }
.dm-auto .dp-sub   { color: #8080a0; }
.dm-auto .dp-bar   { background: #4a4a6a; }
.dm-auto .dp-key   { background: #d0d0e0; color: #3a3a5a; }
.dm-auto .dp-key:first-child { background: #4a4a6a; color: #fff; }

/* Sage & Mint (Pro) */
.dm-sage .dp-head  { background: #d4ebe0; color: #113322; }
.dm-sage .dp-dot   { background: #2A6F51; }
.dm-sage .dp-body  { background: #e6f4ee; }
.dm-sage .dp-score { color: #113322; }
.dm-sage .dp-sub   { color: #7aaa92; }
.dm-sage .dp-bar   { background: #2A6F51; }
.dm-sage .dp-key   { background: #c8e8d8; color: #1a4a33; }
.dm-sage .dp-key:first-child { background: #2A6F51; color: #fff; }

/* Dusty Rose (Pro) */
.dm-rose .dp-head  { background: #f5d8e0; color: #3A0F18; }
.dm-rose .dp-dot   { background: #A83253; }
.dm-rose .dp-body  { background: #fce8ef; }
.dm-rose .dp-score { color: #3A0F18; }
.dm-rose .dp-sub   { color: #c08090; }
.dm-rose .dp-bar   { background: #A83253; }
.dm-rose .dp-key   { background: #f0c8d4; color: #5a1828; }
.dm-rose .dp-key:first-child { background: #A83253; color: #fff; }

.dm-info { padding: 1rem 1.25rem 1.25rem; }
.dm-dark  .dm-info { border-top: 1px solid rgba(200,240,0,.1); }
.dm-light .dm-info { border-top: 1px solid rgba(0,0,0,.07); background: #e4e4de; }
.dm-hico  .dm-info { border-top: 1px solid rgba(255,255,255,.2); }
.dm-auto  .dm-info { border-top: 1px solid rgba(0,0,0,.07); background: #dcdce8; }
.dm-sage  .dm-info { border-top: 1px solid rgba(42,111,81,.15); background: #e2f0e8; }
.dm-rose  .dm-info { border-top: 1px solid rgba(168,50,83,.12); background: #fce0e8; }
.dm-name { font-family: var(--fd); font-size: 1.375rem; letter-spacing: 0.03125rem; margin-bottom: 0.3125rem; }
.dm-dark  .dm-name { color: var(--lime); }
.dm-light .dm-name { color: #111; }
.dm-hico  .dm-name { color: #fff; }
.dm-auto  .dm-name { color: #2a2a3a; }
.dm-sage  .dm-name { color: #113322; }
.dm-rose  .dm-name { color: #3A0F18; }
.dm-desc { font-size: 0.8125rem; font-weight: 300; line-height: 1.65; }
.dm-dark  .dm-desc { color: #525268; }
.dm-light .dm-desc { color: #5a5a56; }
.dm-hico  .dm-desc { color: #888; }
.dm-auto  .dm-desc { color: #606080; }
.dm-sage  .dm-desc { color: #4a7a62; }
.dm-rose  .dm-desc { color: #8a4858; }

/* Game modes */
.gmodes { background: var(--bg2); }
.gm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.75rem,1fr)); gap: 0.75rem; margin-top: 3.25rem; }
.gm-chip { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r); padding: 1.125rem 1rem; display: flex; flex-direction: column; gap: 0.4375rem; transition: all .24s; cursor: default; }
.gm-chip:hover { border-color: var(--lime); background: var(--surf2); transform: translateY(-3px); box-shadow: 0 0.625rem 2rem rgba(0,0,0,.4); }
.gm-ico  { font-size: 1.5rem; }
.gm-name { font-family: var(--fd); font-size: 1.3125rem; letter-spacing: 0.03125rem; }
.gm-desc { color: var(--muted); font-size: 0.8125rem; font-weight: 300; line-height: 1.5; }
.gm-badge { display: inline-flex; align-items: center; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05rem; text-transform: uppercase; padding: 0.125rem 0.5rem; border-radius: 1.25rem; margin-top: 0.125rem; width: fit-content; }
.badge-free { background: rgba(200,240,0,.12); color: var(--lime); }
.badge-pro  { background: rgba(255,255,255,.07); color: var(--white); }
.badge-soon { background: rgba(255,160,0,.1); color: #ffa500; }

/* Pricing */
.pricing 
{
  background: var(--bg);
}
.price-grid 
{ 
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem,1fr));
  gap: 1.5rem;
  margin-top: 3.25rem;
  max-width: 64rem;
}
.price-card
{
  background: var(--surf);
  max-width: 90%;
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 2rem 1.75rem;
  position: relative;
}
.price-card.feat
{
  background: var(--surf2);
  border-color: var(--lime);
  box-shadow: 0 0 0 1px var(--lime), 0 1.5rem 4rem rgba(200,240,0,.08);
}
.price-tag
{
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09375rem;
  text-transform: uppercase;
  padding: 0.1875rem 0.625rem;
  border-radius: 1.25rem;
  margin-bottom: 1.125rem;
}
.pt-free { background: rgba(200,240,0,.1); color: var(--lime); border: 1px solid rgba(200,240,0,.2); }
.pt-pro  { background: var(--lime); color: #000; }
.price-name { font-family: var(--fd); font-size: 2rem; letter-spacing: 0.0625rem; color: var(--white); margin-bottom: 0.25rem; }
.price-amt { font-family: var(--fd); font-size: 3.5rem; color: var(--lime); line-height: 1; margin: 0.625rem 0 0.125rem; }
.price-amt small { font-family: var(--fb); font-size: 1.25rem; font-weight: 300; }
.price-note { font-size: 0.8125rem; color: var(--muted); margin-bottom: 1.5rem; font-weight: 300; }
.price-feats { list-style: none; display: flex; flex-direction: column; gap: 0.625rem; margin-bottom: 1.75rem; }
.price-feats li { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.9375rem; font-weight: 300; color: var(--white); }
.price-feats li::before { content: '✓'; color: var(--lime); font-weight: 700; flex-shrink: 0; margin-top: 0.0625rem; }
.price-feats li.no { color: var(--dim); }
.price-feats li.no::before { content: '–'; color: var(--dim); }
.price-feats li.soon::before { content: '◌'; color: #ffa500; }
.price-feats li.soon { color: var(--muted); }
.pricing-note { margin-top: 1.5rem; font-size: 0.875rem; color: var(--dim); font-weight: 300; max-width: 38.75rem; line-height: 1.7; }
.pricing-note a { color: var(--muted); }

/* How it works */
.how { background: var(--bg2); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.125rem,1fr)); gap: 2.25rem; margin-top: 3.25rem; }
.step { position: relative; }
.step-n { font-family: var(--fd); font-size: 5.375rem; color: rgba(200,240,0,.06); line-height: 1; position: absolute; top: -1rem; left: -0.375rem; user-select: none; }
.step-i { position: relative; z-index: 1; padding-top: 2.625rem; }
.step-badge { width: 2.25rem; height: 2.25rem; background: var(--lime); color: #000; font-weight: 700; font-size: 0.875rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.step-ttl { font-family: var(--fd); font-size: 1.5rem; letter-spacing: 0.03125rem; margin-bottom: 0.5rem; }
.step-dsc { color: var(--muted); font-size: 0.9375rem; font-weight: 300; line-height: 1.75; }

/* FAQ (index) */
.faq { background: var(--bg); }
.faq .faq-list { margin-top: 3.25rem; max-width: 60rem; }

/* Testimonials */
.testi { background: var(--bg2); }
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16.625rem,1fr)); gap: 1rem; margin-top: 3.25rem; }
.t-card { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r); padding: 1.625rem; }
.t-stars { color: var(--lime); font-size: 0.8125rem; margin-bottom: 0.8125rem; }
.t-text  { color: var(--white); font-size: 0.9375rem; font-weight: 300; line-height: 1.78; margin-bottom: 1.25rem; font-style: italic; }
.t-name  { font-weight: 600; font-size: 0.875rem; }
.t-plat  { color: var(--muted); font-size: 0.8125rem; }

/* CTA band */
.cta-band {
  background: var(--lime); color: #000; text-align: center;
  padding: clamp(3.5rem,9vw,6rem) var(--gut); position: relative; overflow: hidden;
}
.cta-band::before {
  content: 'OCHEBUDDY'; position: absolute; font-family: var(--fd);
  font-size: clamp(4.25rem,17vw,13.125rem); color: rgba(0,0,0,.06);
  white-space: nowrap; top: 50%; left: 50%; transform: translate(-50%,-50%);
  letter-spacing: 0.5rem; pointer-events: none; user-select: none;
}
.cta-band .s-ttl { color: #000; position: relative; }
.cta-sub { font-size: clamp(1rem,2vw,1.1875rem); color: rgba(0,0,0,.52); font-weight: 300; margin: 0 auto 2.125rem; max-width: 28.75rem; position: relative; }
.cta-stores { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.75rem; position: relative; }



/* =============================================================
   SUBPAGES — datenschutz, support, privacy
   ============================================================= */
.page-wrap { max-width: 87.5rem; margin: 0 auto; padding: calc(var(--nav-h) + 3.5rem) var(--gut) 5rem; }
.page-header { margin-bottom: 3rem; border-bottom: 1px solid var(--border); padding-bottom: 2rem; }
.page-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1875rem; color: var(--lime); text-transform: uppercase; margin-bottom: 0.75rem; }
.page-title { font-family: var(--fd); font-size: clamp(2.5rem,6.5vw,4.25rem); line-height: 1; letter-spacing: 0.0625rem; color: var(--white); margin-bottom: 0.875rem; }
.page-sub  { color: var(--muted); font-size: 1.0625rem; font-weight: 300; }
.page-meta { color: var(--dim); font-size: 0.875rem; }

.summary-box { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r); padding: 1.375rem 1.5rem; margin-bottom: 3rem; }
.summary-box strong { font-size: 0.9375rem; font-weight: 600; color: var(--white); display: block; margin-bottom: 0.5rem; }
.summary-box p { font-size: 0.9375rem; color: var(--muted); font-weight: 300; line-height: 1.75; }

.toc { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r); padding: 1.25rem 1.5rem; margin-bottom: 3rem; }
.toc-title { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.09375rem; color: var(--lime); text-transform: uppercase; margin-bottom: 0.75rem; }
.toc ol { padding-left: 1.125rem; display: flex; flex-direction: column; gap: 0.25rem; }
.toc a { color: var(--muted); text-decoration: none; font-size: 0.875rem; transition: color .2s; }
.toc a:hover { color: var(--white); }

.ds-section { margin-bottom: 3rem; }
.ds-section h2 { font-family: var(--fd); font-size: 1.75rem; letter-spacing: 0.03125rem; color: var(--white); margin-bottom: 0.875rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
.ds-section h3 { font-size: 1.0625rem; font-weight: 600; color: var(--white); margin: 1.25rem 0 0.5rem; }
.ds-section p  { color: var(--muted); font-size: 0.9375rem; font-weight: 300; line-height: 1.8; margin-bottom: 0.75rem; }
.ds-section ul { padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 0.75rem; }
.ds-section li { color: var(--muted); font-size: 0.9375rem; font-weight: 300; line-height: 1.7; }
.ds-section a  { color: var(--lime); }
.ds-section strong { color: var(--white); font-weight: 600; }


.note-box { background: var(--surf); border: 1px solid var(--border); border-radius: 0.625rem; padding: 1rem 1.25rem; margin: 1rem 0; }
.note-box p { color: var(--muted); font-size: 0.875rem; margin: 0; line-height: 1.75; }

.info-box { background: rgba(200,240,0,.06); border: 1px solid rgba(200,240,0,.18); border-radius: 0.625rem; padding: 0.875rem 1.125rem; margin: 0.875rem 0; }
.info-box p { color: var(--white); font-size: 0.9375rem; margin: 0; line-height: 1.75; }

.haftung-box { background: rgba(200,240,0,.05); border: 1px solid rgba(200,240,0,.2); border-radius: 0.625rem; padding: 1rem 1.25rem; margin: 1rem 0; }
.haftung-box p { font-size: 0.875rem; line-height: 1.8; color: var(--muted); margin: 0; font-weight: 400; }
.haftung-box strong { color: var(--white); }

.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.75rem,1fr)); gap: 0.75rem; margin-bottom: 3.25rem; }
.quick-card { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r); padding: 1.25rem 1.125rem; text-decoration: none; color: var(--white); display: flex; flex-direction: column; gap: 0.375rem; transition: all .22s; }
.quick-card:hover { border-color: var(--lime); background: var(--surf2); transform: translateY(-2px); }
.qc-ico  { font-size: 1.375rem; }
.qc-ttl  { font-family: var(--fd); font-size: 1.25rem; letter-spacing: 0.03125rem; }      /* was 18px → 20px */
.qc-dsc  { font-size: 0.875rem; color: var(--muted); font-weight: 300; }                  /* was 12.5px → 14px */

.sec-ttl { font-family: var(--fd); font-size: 1.875rem; letter-spacing: 0.03125rem; color: var(--white); margin-bottom: 1.25rem; padding-bottom: 0.625rem; border-bottom: 1px solid var(--border); } /* was 28px → 30px */
.support-faq { margin-bottom: 3.25rem; }

.contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem,1fr)); gap: 0.875rem; }
.contact-card { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r); padding: 1.375rem; }
.cc-ico  { font-size: 1.5rem; margin-bottom: 0.625rem; }
.cc-ttl  { font-family: var(--fd); font-size: 1.375rem; letter-spacing: 0.03125rem; margin-bottom: 0.375rem; } /* was 20px → 22px */
.cc-dsc  { font-size: 0.875rem; color: var(--muted); font-weight: 300; margin-bottom: 0.875rem; line-height: 1.65; } /* was 13px → 14px */
.cc-btn  { display: inline-block; background: var(--lime); color: #000; text-decoration: none; font-size: 0.875rem; font-weight: 700; padding: 0.5625rem 1.125rem; border-radius: 2.5rem; transition: background .2s; }
.cc-btn:hover { background: var(--white); }

.steps-inline { display: flex; flex-direction: column; gap: 0.625rem; margin: 0.75rem 0; }
.step-row { display: flex; align-items: flex-start; gap: 0.75rem; }
.step-row span { font-size: 0.9375rem; color: var(--muted); font-weight: 300; line-height: 1.7; } /* was 13.5px → 15px */
.step-num-sm { width: 1.5rem; height: 1.5rem; background: var(--lime); color: #000; border-radius: 50%; font-size: 0.8125rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.125rem; }

.art21-hinweis { background: rgba(200,240,0,.05); border: 1px solid rgba(200,240,0,.2); border-radius: 0.625rem; padding: 1rem 1.25rem; margin: 1rem 0; }
.art21-hinweis p { font-size: 0.875rem; line-height: 1.8; color: var(--muted); margin: 0; text-transform: uppercase; letter-spacing: 0.01em; }
.art21-hinweis strong { color: var(--lime); }

.access-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.access-table th, .access-table td { padding: 0.625rem 0.875rem; font-size: 0.875rem; text-align: left; border-bottom: 1px solid var(--border); }
.access-table th { color: var(--white); font-weight: 600; background: var(--surf2); }
.access-table td { color: var(--muted); font-weight: 300; }
.access-table tr:last-child td { border-bottom: none; }

.badge-yes { color: var(--lime); font-weight: 700; }
.badge-no  { color: var(--dim); }


.comming-soon
{
  background: rgba(200,240,0,.08);
  padding: 0.5rem;
  border: 1px solid rgba(200,240,0,.25);
  border-radius: 0.5rem;
  font-weight: 700;
}

#download .comming-soon
{
	background: rgba(200,240,0,.0);
  padding: 1.0rem;
  border: 1px solid #000;
  border-radius: 0.5rem;
  font-weight: 700;
}


.img-theme
{
	border-radius: 0.15rem;
	border: 0;
	width:100%;
	height:auto;
}


/* ── RESPONSIVE ──────────────────────────────────────────────── */

/* ── HERO: Tablet-Landscape & kleinere Desktops (860px–1220px) ── */
/* Gradient-Overlay: Bild bleibt sichtbar, Text wird lesbar       */
@media (max-width: 1220px) {

  .hero {
    background-size: cover;
    background-position: left center;
  }

  /* Gerichteter Dunkel-Gradient: links/oben dunkel (Text), rechts/unten Bild sichtbar */
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      110deg,
      rgba(9, 9, 14, 0.93) 0%,      /* linke Kante: fast undurchsichtig     */
      rgba(9, 9, 14, 0.82) 35%,     /* Text-Bereich: sicher lesbar          */
      rgba(9, 9, 14, 0.45) 65%,     /* Übergang: Bild schimmert durch       */
      rgba(9, 9, 14, 0.20) 100%     /* rechte Kante: Bild gut sichtbar      */
    );
  }

  .hero-content {
    position: relative;
    z-index: 2;
    max-width: 60%;
    margin-left: 5%;
  }

}

@media (max-width: 992px) {

  .nav-links  { display: none; }
  .nav-burger { display: flex; }

}


/* ── HERO: Tablet-Portrait & große Smartphones (600px–860px) ── */
@media (max-width: 860px) {

  /* Stärkerer, fast gleichmäßiger Overlay – Bild als subtile Textur */
  .hero::before {
    background: linear-gradient(
      180deg,
      rgba(9, 9, 14, 0.90) 0%,      /* oben (Nav-Bereich): dunkel          */
      rgba(9, 9, 14, 0.78) 40%,     /* Mitte (Text): gut lesbar            */
      rgba(9, 9, 14, 0.88) 100%     /* unten (Stats): wieder dunkel        */
    );
  }

  .hero-content {
    max-width: 90%;
    margin-left: 5%;
  }

}


@media (max-width: 580px) {

  .footer-in  {
    flex-direction: column;
    align-items: flex-start;
  }
  .store-btn, .store-btn-dk {
    min-width: 0;
    flex: 1;
  }

  .feat-card {
    padding: 1.125rem 0.875rem;
  }


  /* Erzwingt das Block-Verhalten für Mobilgeräte */
  .access-table, 
  .access-table thead, 
  .access-table tbody, 
  .access-table th, 
  .access-table td, 
  .access-table tr { 
    display: block; 
  }
  
  /* Versteckt die originale Kopfzeile barrierefrei */
  .access-table thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  /* Gestaltet jede Tabellenzeile als separate Karte */
  .access-table tr { 
    border: 0px solid #e2e8f0;
    border-radius: 0.625rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0.5rem;
    background: var(--surf);
  }
  
  /* Schafft Platz auf der linken Seite für die künstlichen Labels */
  .access-table td { 
    border: none;
    position: relative;
    padding-left: 40%; 
    text-align: left;
    margin-bottom: 8px;
    min-height: 24px;
  }
  
  /* Grundstyling für alle künstlichen Spaltenbeschriftungen */
  .access-table td:before { 
    position: absolute;
    top: 0;
    left: 0;
    width: 35%; 
    font-weight: bold;
    color: #F1F1F1; /* Leicht abgesetztes Grau für die Beschriftung */
  }

  /* ==========================================================================
     MEHRSPRACHIGKEIT (AUTOMATISCH ÜBER DAS LANG-ATTRIBUT)
     ========================================================================== */

  /* Standard / Deutsche Version (wenn lang="de" aktiv ist) */
  html[lang="de"] .access-table td:nth-of-type(1):before { content: "Berechtigung:"; }
  html[lang="de"] .access-table td:nth-of-type(2):before { content: "Erforderlich:"; }
  html[lang="de"] .access-table td:nth-of-type(3):before { content: "Zweck:"; }

  /* Englische Version (wird aktiv, wenn lang="en" im html-Tag steht) */
  html[lang="en"] .access-table td:nth-of-type(1):before { content: "Permission:"; }
  html[lang="en"] .access-table td:nth-of-type(2):before { content: "Required:"; }
  html[lang="en"] .access-table td:nth-of-type(3):before { content: "Purpose:"; }


}


/* ── HERO: Smartphones (< 480px) ── */
@media (max-width: 480px) {

  /* Bild ist zu klein und unscharf – als reinen Hintergrund behandeln */
  .hero {
    background-position: -220px bottom;
    background-size: cover;
  }

  /* Fast vollständig deckend: Bild dient nur als Textur */
  .hero::before {
    background: rgba(9, 9, 14, 0.90);
  }

  .hero-content {
    max-width: 96%;
    margin-left: 2%;
  }

  .lang-toggle { display: none; }

  .ds-section h2 {
    font-size: 1.5rem;
    margin-bottom: 0.675rem;
  }

}


@media (max-width: 350px) {

  .nav-logo img  {
    width: 250px;
    height: 54px;
  }

  .s-ttl {
    font-size: clamp(2.0rem,5.5vw,4rem);
  }

  .price-card {
    max-width: 85%;
  }

}