/* ==========================================================
   SYS SKILL — Components
   ========================================================== */

/* ============================================================
   CUSTOM EASINGS (Emil Kowalski)
   ============================================================ */
:root {
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 11, 10, 0.8);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.nav-logo img {
  width: 108px;
  height: 36px;
  object-fit: contain;
  border-radius: 0;
  flex-shrink: 0;
}
.nav-logo-text {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.nav-links {
  display: flex;
  gap: 2.5rem;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nav-links a {
  color: var(--ink-2);
  padding: 3px 0;
  position: relative;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--accent); }
.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--r-md);
  font-size: 0.8125rem;
  font-weight: 600;
  transition: transform 160ms var(--ease-out), box-shadow 200ms var(--ease-out);
  white-space: nowrap;
}
.nav-cta:active { transform: scale(0.97) !important; }
@media (hover: hover) and (pointer: fine) {
  .nav-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(118,188,33,0.3);
  }
}
.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink-2);
  border-radius: 2px;
  transition: all 0.25s;
}
.nav-mobile {
  display: none;
  flex-direction: column;
  background: var(--bg-1);
  border-top: 1px solid var(--line);
  padding: var(--sp-4) var(--sp-4) var(--sp-6);
  gap: var(--sp-3);
}
.nav-mobile a {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}
.nav-mobile a:last-child { border-bottom: 0; }
.nav-mobile.open { display: flex; }

@media (max-width: 1120px) {
  .nav-links, .nav-cta, .nav-lang { display: none; }
  .nav-burger { display: flex; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-md);
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 180ms var(--ease-out),
              transform  160ms var(--ease-out),
              box-shadow 200ms var(--ease-out),
              border-color 180ms var(--ease-out),
              color 180ms var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
/* Emil: tactile press feedback */
.btn:active { transform: scale(0.97); }

.btn-accent {
  background: var(--accent);
  color: var(--accent-ink);
}
@media (hover: hover) and (pointer: fine) {
  .btn-accent:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(118,188,33,0.28);
  }
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
@media (hover: hover) and (pointer: fine) {
  .btn-ghost:hover { background: var(--bg-2); border-color: var(--ink-4); }
}
.btn-blue {
  background: #2a66e0;
  color: #fff;
  border-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .btn-blue:hover { background: #3474f0; }
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color 0.22s, transform 0.22s, background 0.22s;
}
.card-interactive:hover {
  transform: translateY(-2px);
  border-color: rgba(118,188,33,0.35);
  background: var(--bg-2);
}
.card-icon {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--accent-soft);
  border: 1px solid rgba(118,188,33,0.25);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-6);
  color: var(--accent);
  flex-shrink: 0;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(118,188,33,0.04) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(118,188,33,0.04) 1px, transparent 1px) 0 0 / 48px 48px;
  mask-image: radial-gradient(80% 70% at 20% 40%, black, transparent 85%);
}
.hero-content {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
  padding: 5rem 0 4rem;
}
.hero-eyebrow { margin-bottom: 1.5rem; }
.hero h1 {
  font-size: clamp(2.75rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 1.5rem;
}
.hero h1 .accent { color: var(--accent); }
.hero-sub {
  font-size: 1.0625rem;
  color: var(--ink-2);
  max-width: 480px;
  margin-bottom: 2rem;
  line-height: 1.65;
}
.hero-ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.hero-pills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.hero-visual {
  position: relative;
  height: 480px;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
}
.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10,11,10,0.2) 0%, rgba(10,11,10,0.05) 100%);
}
.hero-status {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: rgba(16,18,16,0.88);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 0.75rem 1rem;
  font-family: var(--f-mono);
}
.hero-status-label {
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.hero-status-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}
.hero-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  margin-right: 6px;
  animation: pulse 2s ease-in-out infinite;
}
/* Time-based states */
.hero-status-dot.status-open    { background: var(--accent);  box-shadow: 0 0 8px var(--accent); }
.hero-status-dot.status-limited { background: #f0c040;        box-shadow: 0 0 8px #f0c040; }
.hero-status-dot.status-closed  { background: #ff6b6b;        box-shadow: 0 0 8px #ff6b6b; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ============================================================
   TAGS / PILLS
   ============================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
  background: var(--bg-3);
  color: var(--ink-3);
  border: 1px solid var(--line-2);
}
.tag-green {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: rgba(118,188,33,0.25);
}
.tag-blue {
  background: var(--blue-soft);
  color: var(--blue);
  border-color: rgba(111,168,255,0.25);
}
.pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.3125rem 0.875rem;
  border-radius: 100px;
  background: var(--surface-high);
  color: var(--ink-2);
  border: 1px solid var(--line);
}

/* ============================================================
   STATS STRIP
   ============================================================ */
.stats-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
}
.stats-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 2rem 0;
}
.stat-item {
  padding: 0 var(--sp-8);
  border-left: 1px solid var(--line);
}
.stat-item:first-child { border-left: 0; padding-left: 0; }
.stat-value {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.stat-label {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 0.25rem;
}

/* ============================================================
   SERVICES SECTION
   ============================================================ */
.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.services-col {
  background: var(--bg);
  padding: var(--sp-10);
}
.services-col-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.services-col-title {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.service-cards { display: flex; flex-direction: column; gap: var(--sp-3); }
.service-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
  cursor: pointer;
}
.service-card:hover { background: var(--bg-2); }
.service-card-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1px solid rgba(118,188,33,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}
.service-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 2px;
}
.service-card-sub {
  font-size: 0.8125rem;
  color: var(--ink-3);
}
.service-card-arrow {
  margin-left: auto;
  color: var(--ink-4);
  align-self: center;
  transition: transform 0.2s, color 0.2s;
  flex-shrink: 0;
}
.service-card:hover .service-card-arrow {
  transform: translateX(3px);
  color: var(--accent);
}
.services-col-footer {
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}

/* ============================================================
   REMOTE SECTION
   ============================================================ */
.remote-section {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.remote-bg {
  position: absolute;
  inset: 0;
}
.remote-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.12;
}
.remote-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10,11,10,0.95) 40%, rgba(10,11,10,0.7) 100%);
}
.remote-content {
  position: relative;
  z-index: 1;
  padding: var(--sp-20) 0;
}
.remote-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}
.remote-card {
  padding: var(--sp-8);
}
.remote-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: var(--sp-3);
}
.remote-card-text {
  font-size: 0.875rem;
  color: var(--ink-2);
  line-height: 1.65;
  margin-bottom: var(--sp-4);
}
.remote-card-badge {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-2);
}

/* ============================================================
   STEPS (Remote Ablauf)
   ============================================================ */
.steps-section { padding: var(--sp-20) 0; }
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: var(--sp-8);
}
.step {
  background: var(--bg);
  padding: var(--sp-10);
  position: relative;
  transition: background 0.2s;
}
.step:hover { background: var(--bg-1); }
.step-num {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  margin-bottom: var(--sp-4);
}
.step-icon {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--accent-soft);
  border: 1px solid rgba(118,188,33,0.25);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: var(--sp-5);
}
.step-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: var(--sp-2);
}
.step-text {
  font-size: 0.875rem;
  color: var(--ink-2);
  line-height: 1.65;
}
.steps-note {
  margin-top: var(--sp-6);
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.6;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-section { padding: var(--sp-20) 0; }
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}
.testimonial {
  padding: var(--sp-8);
  position: relative;
}
.testimonial::before {
  content: '"';
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-6);
  font-size: 5rem;
  line-height: 1;
  color: var(--accent-soft);
  pointer-events: none;
  font-weight: 700;
}
.testimonial-stars {
  color: var(--accent);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  margin-bottom: var(--sp-4);
}
.testimonial-text {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-2);
  font-style: italic;
  margin-bottom: var(--sp-6);
}
.testimonial-author { margin-top: auto; }
.testimonial-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ink);
}
.testimonial-company {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 3px;
}
.testimonials-cta {
  text-align: center;
  margin-top: var(--sp-8);
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-section { padding: var(--sp-20) 0; background: var(--bg-1); }
.faq-list {
  max-width: 860px;
  margin: var(--sp-8) auto 0;
}
.faq-item { border-bottom: 1px solid var(--line-2); }
.faq-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6) 0;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  transition: color 0.2s;
}
.faq-trigger:hover { color: var(--accent); }
.faq-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--ink-3);
  transition: transform 0.3s, color 0.2s;
}
.faq-trigger[aria-expanded="true"] .faq-icon {
  transform: rotate(180deg);
  color: var(--accent);
}
.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.faq-trigger[aria-expanded="true"] + .faq-body {
  grid-template-rows: 1fr;
}
.faq-body > div {
  overflow: hidden;
  padding-bottom: var(--sp-6);
  font-size: 0.9375rem;
  color: var(--ink-2);
  line-height: 1.7;
}

/* ============================================================
   BLOG PREVIEW
   ============================================================ */
.blog-section { padding: var(--sp-20) 0; }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}
.blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.blog-thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--bg-3);
}
.blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.blog-card:hover .blog-thumb img { transform: scale(1.04); }
.blog-body {
  padding: var(--sp-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.blog-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.blog-date {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}
.blog-title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: var(--sp-3);
  color: var(--ink);
}
.blog-excerpt {
  font-size: 0.875rem;
  color: var(--ink-2);
  line-height: 1.65;
  flex: 1;
  margin-bottom: var(--sp-4);
}
.blog-link {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s;
}
.blog-card:hover .blog-link { gap: 10px; }

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cta-banner-bg {
  position: absolute;
  inset: 0;
}
.cta-banner-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.08;
}
.cta-banner-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10,11,10,0.88);
}
.cta-banner-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-8);
  align-items: center;
  padding: var(--sp-16) 0;
}
.cta-banner h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: var(--sp-4);
}
.cta-phone {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  display: block;
  margin-bottom: var(--sp-2);
}
.cta-hours {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  padding: var(--sp-16) 0 var(--sp-8);
  border-top: 1px solid var(--line);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-10);
  margin-bottom: var(--sp-10);
}
.footer-brand img {
  display: block;
  width: 180px;
  height: auto;
  max-width: 100%;
  margin-bottom: var(--sp-4);
  object-fit: contain;
}
.footer-tagline {
  font-size: 0.875rem;
  color: var(--ink-3);
  line-height: 1.6;
  max-width: 280px;
}
.footer-col-title {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-4);
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.footer-links a {
  font-size: 0.875rem;
  color: var(--ink-2);
  transition: color 0.15s;
}
.footer-links a:hover { color: var(--ink); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--ink-3);
}
.footer-legal { display: flex; gap: var(--sp-6); }
.footer-legal a { color: var(--ink-3); transition: color 0.15s; }
.footer-legal a:hover { color: var(--ink); }

/* ============================================================
   SECTION HEADERS (shared)
   ============================================================ */
.section-header { margin-bottom: var(--sp-8); }
.section-header h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-top: var(--sp-3);
}
.section-header p {
  font-size: 1.0625rem;
  color: var(--ink-2);
  max-width: 560px;
  margin-top: var(--sp-3);
  line-height: 1.6;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hero-content { grid-template-columns: 1fr; }
  .hero-visual { height: 360px; }
  .services-grid { grid-template-columns: 1fr; }
  .remote-cards { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr 1fr; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .blog-grid .blog-card:last-child { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cta-banner-content { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .stats-inner { grid-template-columns: 1fr 1fr; row-gap: var(--sp-6); }
  .stat-item:nth-child(2) { border-left: 1px solid var(--line); }
  .stat-item:nth-child(3) { border-left: 0; padding-left: 0; }
  .steps-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-grid .blog-card:last-child { display: flex; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2.5rem; }
  .hero-visual { height: 260px; }
}

/* ============================================================
   DROPDOWN NAVIGATION
   ============================================================ */
.nav-dd { position: relative; }
.nav-dd::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }
.nav-dd-trigger { display: inline-flex; align-items: center; gap: 4px; }
.nav-chevron { transition: transform 0.2s; flex-shrink: 0; opacity: 0.6; }
.nav-dd:hover .nav-chevron { transform: rotate(180deg); opacity: 1; }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px) scale(0.97);
  transform-origin: top center;
  min-width: 460px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.3);
  padding: var(--sp-6);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 175ms var(--ease-out),
              transform 175ms var(--ease-out);
}
.nav-dd:hover .nav-dropdown,
.nav-dd:focus-within .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}
.nav-dropdown-sm {
  min-width: 220px;
  left: 0;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top left;
}
.nav-dd:hover .nav-dropdown-sm,
.nav-dd:focus-within .nav-dropdown-sm {
  transform: translateY(0) scale(1);
}

.nav-dropdown-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  margin-bottom: var(--sp-4);
}
.nav-dropdown-region {
  font-family: var(--f-mono);
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.nav-dropdown-link {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-2);
  padding: 0.3rem 0;
  transition: color 0.15s;
  text-decoration: none;
}
.nav-dropdown-link:hover { color: var(--accent); }
.nav-dropdown-all { padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.nav-dropdown-all a {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-decoration: none;
  transition: opacity 0.15s;
}
.nav-dropdown-all a:hover { opacity: 0.75; }
.nav-dropdown-divider { height: 1px; background: var(--line); margin: var(--sp-2) 0; }

.nav-mobile-section {
  display: flex;
  flex-direction: column;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}
.nav-mobile-label {
  font-family: var(--f-mono);
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-2);
}
.nav-mobile-cta { padding-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.nav-mobile-cta a { border-bottom: none !important; }

/* ============================================================
   PAGE HERO (Subpages)
   ============================================================ */
.page-hero {
  position: relative;
  padding: 5rem 0 4rem;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(118,188,33,0.04) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(118,188,33,0.04) 1px, transparent 1px) 0 0 / 48px 48px;
  mask-image: radial-gradient(70% 80% at 15% 50%, black, transparent 90%);
}
.page-hero .eyebrow { margin-bottom: 1rem; }
.page-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 1.25rem;
}
.page-hero h1 .accent { color: var(--accent); }
.page-hero-sub {
  font-size: 1.0625rem;
  color: var(--ink-2);
  max-width: 560px;
  margin-bottom: 2rem;
  line-height: 1.65;
}

/* ============================================================
   CONTENT SECTIONS (Subpages)
   ============================================================ */
.content-section { padding: var(--sp-20) 0; }

/* ---- Wissensartikel ---- */
.knowledge-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
}
.knowledge-grid .blog-card { min-width: 0; }
.article-page { padding: var(--sp-12) 0 var(--sp-20); }
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 820px) minmax(220px, 300px);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.article-main { min-width: 0; }
.article-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  margin-bottom: var(--sp-10);
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  color: var(--ink-3);
  font-family: var(--f-mono);
  font-size: .75rem;
  margin-bottom: var(--sp-6);
}
.article-lead {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  color: var(--ink-2);
  padding: 1.1rem 1.25rem;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin: 0 0 var(--sp-10);
  font-size: 1.075rem;
}
.article-content h2 {
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.2;
  margin: var(--sp-12) 0 var(--sp-4);
}
.article-content h3 {
  font-size: 1.15rem;
  line-height: 1.3;
  margin: var(--sp-8) 0 var(--sp-3);
}
.article-content p { color: var(--ink-2); margin-bottom: var(--sp-4); }
.article-content ul,
.article-content ol {
  color: var(--ink-2);
  margin: 0 0 var(--sp-6) 1.25rem;
  padding-left: .5rem;
}
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content li { margin-bottom: .55rem; padding-left: .2rem; }
.article-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.article-note {
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  padding: 1rem 1.15rem;
  border-radius: var(--r-md);
  margin: var(--sp-8) 0;
  color: var(--ink-2);
}
.article-note strong { color: var(--ink); }
.article-sources {
  border-top: 1px solid var(--line);
  margin-top: var(--sp-12);
  padding-top: var(--sp-6);
  font-size: .875rem;
}
.article-side {
  position: sticky;
  top: 6rem;
  border: 1px solid var(--line-2);
  background: var(--bg-1);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.article-side h2 { font-size: 1.15rem; margin-bottom: var(--sp-3); }
.article-side p { color: var(--ink-3); font-size: .9rem; margin-bottom: var(--sp-5); }
.article-side .btn { width: 100%; justify-content: center; }

@media (max-width: 980px) {
  .knowledge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-layout { grid-template-columns: 1fr; }
  .article-side { position: static; }
}
@media (max-width: 640px) {
  .knowledge-grid { grid-template-columns: 1fr; }
  .article-page { padding-top: var(--sp-8); }
  .article-cover { border-radius: var(--r-lg); }
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}
.feature-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  transition: border-color 0.2s, background 0.2s;
}
.feature-card:hover { border-color: rgba(118,188,33,0.3); background: var(--bg-2); }
.feature-card-icon {
  width: 2.5rem; height: 2.5rem;
  background: var(--accent-soft);
  border: 1px solid rgba(118,188,33,0.2);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  margin-bottom: var(--sp-5);
}
.feature-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: var(--sp-2); }
.feature-card p { font-size: 0.875rem; color: var(--ink-2); line-height: 1.65; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  align-items: start;
  margin-top: var(--sp-8);
}
.two-col-text h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-4);
  line-height: 1.2;
}
.two-col-text p { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.7; margin-bottom: var(--sp-4); }
.two-col-text ul { list-style: none; margin-bottom: var(--sp-6); }
.two-col-text ul li {
  font-size: 0.9375rem; color: var(--ink-2); line-height: 1.6;
  padding: 0.3rem 0 0.3rem 1.5rem; position: relative;
}
.two-col-text ul li::before { content: '→'; position: absolute; left: 0; color: var(--accent); font-weight: 600; }

.process-list { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-8); }
.process-item {
  display: flex;
  gap: var(--sp-6);
  align-items: flex-start;
  padding: var(--sp-6);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.process-num {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  flex-shrink: 0;
  width: 2.5rem;
  padding-top: 2px;
}
.process-content h3 { font-size: 1rem; font-weight: 600; margin-bottom: var(--sp-2); }
.process-content p { font-size: 0.875rem; color: var(--ink-2); line-height: 1.65; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  margin-top: var(--sp-10);
}
.contact-info-item { display: flex; gap: var(--sp-4); align-items: flex-start; margin-bottom: var(--sp-6); }
.contact-info-icon {
  width: 2.5rem; height: 2.5rem; flex-shrink: 0;
  background: var(--accent-soft);
  border: 1px solid rgba(118,188,33,0.2);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.contact-info-label {
  font-family: var(--f-mono); font-size: 0.5625rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px;
}
.contact-info-value { font-size: 1rem; font-weight: 600; }
.contact-form {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-10);
}
.form-group { margin-bottom: var(--sp-6); }
.form-label {
  display: block;
  font-family: var(--f-mono); font-size: 0.5625rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--sp-2);
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-2);
  padding: var(--sp-3) 0;
  font-size: 0.9375rem; color: var(--ink);
  font-family: var(--f-sans);
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-bottom-color: var(--accent); }
.form-input::placeholder, .form-textarea::placeholder { color: var(--ink-4); }
.form-textarea { resize: vertical; min-height: 120px; }
.form-select { cursor: pointer; color: var(--ink); color-scheme: dark; }
.form-select option {
  background: var(--bg-1);
  color: var(--ink);
}

/* Some English service grids use the generic card component directly. */
.feature-grid > .card {
  padding: var(--sp-8);
}

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal-content { max-width: 760px; margin: var(--sp-12) auto var(--sp-20); }
.legal-content h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700; letter-spacing: -0.02em;
  margin-bottom: var(--sp-8); padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.legal-content h2 { font-size: 1.125rem; font-weight: 600; margin-top: var(--sp-8); margin-bottom: var(--sp-3); }
.legal-content p, .legal-content li { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.75; margin-bottom: var(--sp-3); }
.legal-content a { color: var(--accent); }
.legal-content a:hover { text-decoration: underline; }
.legal-content h3 { font-size: 1rem; font-weight: 600; margin-top: var(--sp-6); margin-bottom: var(--sp-2); color: var(--ink); }

/* contact-item aliases for kontakt page */
.contact-item { display: flex; gap: var(--sp-4); align-items: flex-start; margin-bottom: var(--sp-8); }
.contact-item-icon {
  width: 2.5rem; height: 2.5rem; flex-shrink: 0;
  background: var(--accent-soft); border: 1px solid rgba(118,188,33,0.2);
  border-radius: var(--r-md); display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.contact-item-label {
  font-family: var(--f-mono); font-size: 0.5625rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px;
}
.contact-item-value { font-size: 1rem; font-weight: 600; line-height: 1.5; }
.contact-item-value a { color: var(--accent); text-decoration: none; }
.contact-item-value a:hover { text-decoration: underline; }

@media (max-width: 1024px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .feature-grid { grid-template-columns: 1fr; }
  .page-hero { padding: 3.5rem 0 3rem; }
}

/* ============================================================
   LANGUAGE SWITCH (Nav)
   ============================================================ */
.nav-lang {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  padding: 4px;
  border-radius: var(--r-md);
  transition: background 150ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav-lang:hover { background: var(--bg-2); }
}
.nav-lang-pill {
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid transparent;
  color: var(--ink-4);
  transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out), background 150ms var(--ease-out);
}
.nav-lang-pill--active {
  background: var(--bg-3);
  color: var(--ink);
  border-color: var(--line-2);
}
@media (hover: hover) and (pointer: fine) {
  .nav-lang:hover .nav-lang-pill:not(.nav-lang-pill--active) {
    border-color: rgba(118,188,33,0.4);
    color: var(--accent);
  }
}
@media (max-width: 768px) { .nav-lang { display: none; } }

/* Membership pricing */
.membership-pricing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
}
.membership-plan {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}
.membership-plan--featured {
  border-color: rgba(118,188,33,.55);
  background: linear-gradient(145deg, var(--bg-1), rgba(118,188,33,.08));
}
.membership-plan h3 { font-size: clamp(2rem, 4vw, 3rem); margin: 0; }
.membership-plan h3 small { display: inline-block; font-size: .8rem; line-height: 1.45; color: var(--ink-3); font-weight: 500; }
.membership-plan p:not(.eyebrow) { color: var(--ink-2); flex: 1; }
.membership-terms {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  color: var(--ink-3);
  font-size: .875rem;
  line-height: 1.7;
}
@media (max-width: 720px) { .membership-pricing { grid-template-columns: 1fr; } }

/* ============================================================
   MOBILE NAV ACCORDION
   ============================================================ */
.nav-mobile-accordion { border-bottom: 1px solid var(--line); }
.nav-mobile-accordion-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 150ms var(--ease-out);
}
.nav-mobile-accordion-trigger:hover { color: var(--ink-2); }
.nav-mobile-accordion-trigger .nav-chevron {
  transition: transform 200ms var(--ease-out);
}
.nav-mobile-accordion-trigger[aria-expanded="true"] .nav-chevron {
  transform: rotate(180deg);
}
.nav-mobile-accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms var(--ease-out);
}
.nav-mobile-accordion-trigger[aria-expanded="true"] + .nav-mobile-accordion-body {
  grid-template-rows: 1fr;
}
.nav-mobile-accordion-body > div {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--sp-2);
}
.nav-mobile-accordion-body a {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 0.4rem 0 0.4rem var(--sp-4);
  border-bottom: none !important;
  transition: color 150ms var(--ease-out);
  text-decoration: none;
}
.nav-mobile-accordion-body a:hover { color: var(--accent); }

.nav-mobile-lang-row {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}
.nav-mobile-lang-btn {
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid var(--line-2);
  color: var(--ink-3);
  text-decoration: none;
  transition: all 150ms var(--ease-out);
}
.nav-mobile-lang-btn--active {
  background: var(--bg-3);
  color: var(--ink);
  border-color: var(--ink-4);
}
.nav-mobile-lang-btn:not(.nav-mobile-lang-btn--active):hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}
.breadcrumb a {
  color: var(--ink-3);
  transition: color 150ms var(--ease-out);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb-sep { color: var(--ink-4); }
.breadcrumb-current { color: var(--ink-2); }

/* ============================================================
   TEAMVIEWER DOWNLOAD SECTION
   ============================================================ */
.tv-section {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: var(--sp-8);
}
.tv-section-header {
  padding: var(--sp-5) var(--sp-8);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.tv-section-title {
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tv-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
}
.tv-card {
  background: var(--bg);
  padding: var(--sp-8);
}
.tv-card-badge {
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-2);
}
.tv-card-title {
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: var(--sp-3);
}
.tv-card-text {
  font-size: 0.875rem;
  color: var(--ink-2);
  line-height: 1.65;
  margin-bottom: var(--sp-5);
}
.tv-download-btns {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  align-items: center;
}
.tv-os-hint {
  margin-top: var(--sp-3);
  font-family: var(--f-mono);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  color: var(--ink-4);
}
.tv-footer-note {
  padding: var(--sp-4) var(--sp-8);
  font-family: var(--f-mono);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  border-top: 1px solid var(--line);
}

/* ============================================================
   PAYPAL SECTION
   ============================================================ */
.paypal-info {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-top: var(--sp-4);
}
.paypal-info-icon {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  background: #003087;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: 0.625rem;
  color: #fff;
  letter-spacing: -0.03em;
}
.paypal-info-body strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
}
.paypal-info-body p {
  font-size: 0.8125rem;
  color: var(--ink-3);
  line-height: 1.55;
}
.paypal-info-body a {
  color: var(--accent);
  text-decoration: underline;
}

/* ============================================================
   LEAD QUALIFICATION FORM
   ============================================================ */
.type-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}
.type-selector-btn {
  padding: var(--sp-4) var(--sp-3);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  text-align: center;
  cursor: pointer;
  transition: border-color 160ms var(--ease-out),
              background   160ms var(--ease-out);
  -webkit-user-select: none;
  user-select: none;
}
@media (hover: hover) and (pointer: fine) {
  .type-selector-btn:hover { border-color: rgba(118,188,33,0.4); }
}
.type-selector-btn.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.type-selector-btn:active { transform: scale(0.98); }
.type-selector-icon { font-size: 1.25rem; margin-bottom: 4px; }
.type-selector-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  display: block;
}
.type-selector-sub {
  font-family: var(--f-mono);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.type-selector-btn.active .type-selector-label { color: var(--accent); }

.form-fields-segment { display: none; }
.form-fields-segment.active { display: block; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}
.form-consent {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: 0.875rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin-top: var(--sp-2);
}
.form-consent input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}
.form-consent a { color: var(--accent); text-decoration: underline; }

/* Cookie- und Datenschutz-Einstellungen */
.consent-layer { position:fixed; inset:0; z-index:10000; display:flex; align-items:flex-end; justify-content:center; padding:1rem; background:rgba(6,18,22,.62); backdrop-filter:blur(3px); }
.consent-box { width:min(860px,100%); max-height:calc(100vh - 2rem); overflow:auto; background:#fff; color:var(--ink); border:1px solid rgba(0,152,158,.25); border-radius:18px; box-shadow:0 24px 80px rgba(0,0,0,.28); padding:1.5rem; }
.consent-kicker { color:var(--accent); font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.consent-main h2 { margin:.35rem 0 .6rem; font-size:clamp(1.35rem,3vw,1.8rem); }
.consent-main p { margin:0 0 .5rem; color:var(--ink-2); line-height:1.55; }
.consent-main a { color:var(--accent); text-decoration:underline; }
.consent-options { display:grid; gap:.65rem; margin:1.1rem 0; }
.consent-option { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1rem; border:1px solid rgba(0,0,0,.11); border-radius:10px; cursor:pointer; }
.consent-option span { display:grid; gap:.15rem; }
.consent-option small { color:var(--ink-3); line-height:1.35; }
.consent-option input { width:1.25rem; height:1.25rem; accent-color:var(--accent); flex:0 0 auto; }
.consent-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.65rem; }
.consent-btn { border:1px solid transparent; border-radius:9px; padding:.72rem 1rem; font:inherit; font-weight:700; cursor:pointer; }
.consent-btn--primary { background:var(--accent); color:#fff; }
.consent-btn--secondary { color:var(--accent); border-color:var(--accent); background:#fff; }
.consent-btn--ghost { color:var(--ink-2); background:#f2f5f5; }
.consent-settings-button { position:fixed; z-index:9000; left:.7rem; bottom:.7rem; padding:.45rem .65rem; border:1px solid rgba(0,0,0,.18); border-radius:7px; background:#fff; color:var(--ink-2); box-shadow:0 4px 16px rgba(0,0,0,.12); font:inherit; font-size:.72rem; cursor:pointer; }
@media (max-width:600px) { .consent-box { padding:1.1rem; } .consent-actions { display:grid; } .consent-btn--primary { order:-1; } .consent-settings-button { font-size:.65rem; } }
.form-honeypot { display: none !important; visibility: hidden; }
.form-submit-btn { width: 100%; justify-content: center; margin-top: var(--sp-6); font-size: 0.9375rem; padding: 0.875rem 2rem; }
.form-error { color: var(--error); font-size: 0.8125rem; margin-top: var(--sp-2); display: none; }
.form-success {
  display: none;
  text-align: center;
  padding: var(--sp-12) var(--sp-8);
}
.form-success-check {
  width: 3rem;
  height: 3rem;
  background: var(--accent-soft);
  border: 1px solid rgba(118,188,33,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-5);
  color: var(--accent);
}
.form-success h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: var(--sp-3); }
.form-success p  { font-size: 0.9375rem; color: var(--ink-2); }

/* ============================================================
   REGION HUB CARDS
   ============================================================ */
.region-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}
.region-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  transition: border-color 220ms var(--ease-out),
              background   220ms var(--ease-out),
              transform    220ms var(--ease-out);
  text-decoration: none;
  color: inherit;
  display: block;
}
@media (hover: hover) and (pointer: fine) {
  .region-card:hover {
    border-color: rgba(118,188,33,0.35);
    background: var(--bg-2);
    transform: translateY(-2px);
  }
}
.region-card:active { transform: scale(0.99); }
.region-card-label {
  font-family: var(--f-mono);
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-3);
}
.region-card h3 {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-4);
}
.region-card-services {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.region-card-service {
  font-size: 0.875rem;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-left: 1.25rem;
  position: relative;
}
.region-card-service::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 600;
}
.region-card-cta {
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 5px;
  transition: gap 180ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .region-card:hover .region-card-cta { gap: 9px; }
}

/* ============================================================
   SUITABLE / NOT SUITABLE BLOCKS
   ============================================================ */
.suitable-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}
.suitable-block {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.suitable-block--yes { border-top: 2px solid var(--accent); }
.suitable-block--no  { border-top: 2px solid var(--error); }
.suitable-block-title {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: var(--sp-4);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.suitable-item {
  font-size: 0.875rem;
  color: var(--ink-2);
  padding: 0.2rem 0 0.2rem 1.375rem;
  position: relative;
  line-height: 1.55;
}
.suitable-block--yes .suitable-item::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.suitable-block--no  .suitable-item::before { content: '✗'; position: absolute; left: 0; color: var(--error); }

/* ============================================================
   THANK YOU / 404 PAGES
   ============================================================ */
.system-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-20) var(--sp-8);
}
.system-page-inner { max-width: 560px; }
.system-page-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto var(--sp-6);
  background: var(--accent-soft);
  border: 1px solid rgba(118,188,33,0.25);
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.system-page h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-4);
}
.system-page p {
  font-size: 1.0625rem;
  color: var(--ink-2);
  line-height: 1.65;
  margin-bottom: var(--sp-8);
}
.system-page-links {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   PREFERS-REDUCED-MOTION (Emil: bewegungslos, nicht animationslos)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn, .nav-cta, .nav-dropdown, .region-card, .card {
    transition: background 150ms, color 150ms, border-color 150ms;
    transform: none !important;
  }
  .nav-mobile-accordion-body {
    transition: none;
  }
}

/* ============================================================
   RESPONSIVE ADDITIONS
   ============================================================ */
@media (max-width: 1024px) {
  .tv-cards { grid-template-columns: 1fr; }
  .membership-callout { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  .region-cards   { grid-template-columns: 1fr; }
  .suitable-grid  { grid-template-columns: 1fr; }
  .form-row       { grid-template-columns: 1fr; }
  .type-selector  { grid-template-columns: 1fr; }
}

/* ============================================================
   PREMIUM UPGRADE — High-End Visual Design
   ============================================================ */

/* --- Token Extensions --- */
:root {
  --surface-low:     #191b17;
  --surface-mid:     #20221e;
  --surface-high:    #282a25;
  --surface-highest: #31332e;
  --sp-5:   1.25rem;
  --sp-7:   1.75rem;
  --r-2xl:  1.5rem;
  --r-full: 9999px;
  --ease-spring: cubic-bezier(0.22, 0.84, 0.34, 1);
  --ease-sharp:  cubic-bezier(0.32, 0.72, 0,    1);
}

/* --- Nav: Glass Upgrade --- */
.nav {
  background: rgba(12, 15, 12, 0.88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 4px 20px rgba(0,0,0,0.3);
}

/* --- Hamburger: X Morph --- */
.nav-burger span {
  transition:
    transform 0.42s cubic-bezier(0.22, 0.84, 0.34, 1),
    opacity   0.3s  ease,
    background 0.3s ease;
  transform-origin: center;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  background: var(--ink);
}
.nav-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  background: var(--ink);
}

/* --- Mobile Nav: Deeper Glass --- */
.nav-mobile {
  background: rgba(10, 12, 10, 0.97);
  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* --- Reveal: Blur-Fade Upgrade --- */
.reveal {
  filter: blur(5px);
  transition:
    opacity   0.75s cubic-bezier(.2,.7,.2,1),
    transform 0.75s cubic-bezier(.2,.7,.2,1),
    filter    0.75s cubic-bezier(.2,.7,.2,1);
}
.reveal.in {
  filter: blur(0);
}

/* --- Buttons: Spring Physics --- */
.btn {
  border-radius: var(--r-full);
  transition:
    background    0.38s cubic-bezier(0.22, 0.84, 0.34, 1),
    color         0.38s cubic-bezier(0.22, 0.84, 0.34, 1),
    border-color  0.38s cubic-bezier(0.22, 0.84, 0.34, 1),
    box-shadow    0.38s cubic-bezier(0.22, 0.84, 0.34, 1),
    transform     0.38s cubic-bezier(0.22, 0.84, 0.34, 1);
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: scale(0.97) translateY(0); transition-duration: 0.12s; }

/* --- .btn-accent: Glow Pill --- */
.btn-accent {
  border-radius: var(--r-full);
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow:
    0 0 0 1px rgba(118,188,33,0.35),
    0 4px 16px rgba(118,188,33,0.2),
    0 1px 0 rgba(255,255,255,0.2) inset;
}
.btn-accent:hover {
  box-shadow:
    0 0 0 1px rgba(118,188,33,0.55),
    0 8px 28px rgba(118,188,33,0.35),
    0 1px 0 rgba(255,255,255,0.25) inset;
}

/* --- .btn-ghost: Glass Treatment --- */
.btn-ghost {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-full);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
}

/* --- .btn-icon-circle: Button-in-Button --- */
.btn-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: rgba(0,0,0,0.14);
  flex-shrink: 0;
  transition:
    transform  0.38s cubic-bezier(0.22, 0.84, 0.34, 1),
    background 0.38s ease;
}
.btn:hover .btn-icon-circle {
  transform: translate(2px, -1px) scale(1.1);
  background: rgba(0,0,0,0.22);
}

/* --- Hero: Typography Upgrade --- */
.hero h1 {
  font-size: clamp(2.75rem, 7vw, 5.25rem);
  letter-spacing: -0.035em;
  font-weight: 800;
}

/* --- Hero Grid: Glow Layer --- */
.hero-grid-bg {
  background:
    radial-gradient(ellipse 55% 65% at 72% 42%, rgba(118,188,33,0.09) 0%, transparent 60%),
    radial-gradient(ellipse 35% 40% at 15% 70%, rgba(118,188,33,0.04) 0%, transparent 55%),
    linear-gradient(rgba(118,188,33,0.04) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(118,188,33,0.04) 1px, transparent 1px) 0 0 / 48px 48px;
  mask-image: radial-gradient(90% 85% at 45% 45%, black 20%, transparent 90%);
}

/* --- Hero Visual: Bezel Upgrade --- */
.hero-visual {
  border-radius: var(--r-2xl);
  border-color: rgba(255,255,255,0.07);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 0 0 6px rgba(118,188,33,0.05),
    0 28px 72px rgba(0,0,0,0.55),
    0 8px 24px rgba(0,0,0,0.35);
}

/* --- Hero Status: Glass Pill --- */
.hero-status {
  background: rgba(16, 20, 16, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-full);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.07) inset,
    0 6px 20px rgba(0,0,0,0.35);
  padding: 0.5rem 1rem;
}

/* --- Page Hero: Typography Upgrade --- */
.page-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  line-height: 1.07;
  letter-spacing: -0.03em;
  font-weight: 800;
}

/* --- Page Hero Grid: Glow Layer --- */
.page-hero-grid {
  background:
    radial-gradient(ellipse 55% 60% at 50% 80%, rgba(118,188,33,0.07) 0%, transparent 65%),
    linear-gradient(rgba(118,188,33,0.03) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(118,188,33,0.03) 1px, transparent 1px) 0 0 / 48px 48px;
  mask-image: radial-gradient(90% 85% at 50% 80%, black, transparent 90%);
}

/* --- Section Headers: Upgrade --- */
.section-header h2 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  font-weight: 800;
}
.section-header .eyebrow,
.section-header .tag {
  background: rgba(118,188,33,0.08);
  border: 1px solid rgba(118,188,33,0.2);
  color: var(--accent);
  border-radius: var(--r-full);
  padding: 0.25rem 0.875rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: inline-flex;
  width: fit-content;
}

/* --- Stats: Typography Upgrade --- */
.stat-value {
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.04em;
  font-weight: 800;
  line-height: 1;
}

/* --- Feature Cards: Spring Hover --- */
.feature-card {
  border-radius: var(--r-xl);
  transition:
    background    0.42s cubic-bezier(0.22, 0.84, 0.34, 1),
    border-color  0.42s cubic-bezier(0.22, 0.84, 0.34, 1),
    transform     0.42s cubic-bezier(0.22, 0.84, 0.34, 1),
    box-shadow    0.42s cubic-bezier(0.22, 0.84, 0.34, 1);
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(118,188,33,0.25);
  box-shadow:
    0 12px 36px rgba(0,0,0,0.4),
    0 0 0 1px rgba(118,188,33,0.07);
  background: var(--bg-2);
}

/* --- Service Items: Spring Hover --- */
.service-item {
  transition:
    background   0.42s cubic-bezier(0.22, 0.84, 0.34, 1),
    border-color 0.42s cubic-bezier(0.22, 0.84, 0.34, 1),
    transform    0.42s cubic-bezier(0.22, 0.84, 0.34, 1),
    box-shadow   0.42s cubic-bezier(0.22, 0.84, 0.34, 1);
}
.service-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}

/* --- Testimonial Cards: Spring Hover --- */
.testimonial-card {
  transition:
    transform    0.42s cubic-bezier(0.22, 0.84, 0.34, 1),
    box-shadow   0.42s cubic-bezier(0.22, 0.84, 0.34, 1),
    border-color 0.42s cubic-bezier(0.22, 0.84, 0.34, 1);
}
.testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.4);
  border-color: rgba(255,255,255,0.08);
}

/* --- Blog Cards: Spring Hover --- */
.blog-card {
  transition:
    transform  0.42s cubic-bezier(0.22, 0.84, 0.34, 1),
    box-shadow 0.42s cubic-bezier(0.22, 0.84, 0.34, 1);
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.45);
}

/* --- TV Cards: Spring Hover --- */
.tv-card {
  transition:
    transform    0.42s cubic-bezier(0.22, 0.84, 0.34, 1),
    border-color 0.42s cubic-bezier(0.22, 0.84, 0.34, 1),
    box-shadow   0.42s cubic-bezier(0.22, 0.84, 0.34, 1);
}
.tv-card:hover {
  transform: translateY(-3px);
  border-color: rgba(118,188,33,0.15);
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}

/* --- CTA Banner: Typography Upgrade --- */
.cta-banner h2 {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  letter-spacing: -0.03em;
  font-weight: 800;
}
.cta-phone {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  letter-spacing: -0.025em;
  font-weight: 800;
}

/* --- CTA Banner: Accent Glow --- */
.cta-banner-bg::after {
  background:
    radial-gradient(ellipse 65% 80% at 50% 120%, rgba(118,188,33,0.11) 0%, transparent 60%),
    rgba(10,11,10,0.86);
}

/* --- Pricing Blocks --- */
.pricing-block {
  background: var(--surface-mid);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--r-xl);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 4px 20px rgba(0,0,0,0.28);
}
.pricing-block-featured {
  border-color: rgba(118,188,33,0.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 0 0 1px rgba(118,188,33,0.07),
    0 8px 32px rgba(0,0,0,0.4),
    0 0 40px rgba(118,188,33,0.06);
}
.pricing-price {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.03em;
  font-weight: 800;
}

/* --- Footer: Refined Border --- */
.footer {
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* --- Reduce Motion Safety --- */
@media (prefers-reduced-motion: reduce) {
  .reveal { filter: none !important; }
  .btn,
  .feature-card,
  .service-item,
  .testimonial-card,
  .blog-card,
  .tv-card {
    transition: background 150ms, color 150ms, border-color 150ms;
    transform: none !important;
  }
}

/* --- Mobile: Premium Responsive Overrides --- */
@media (max-width: 768px) {
  .hero h1          { font-size: clamp(2.25rem, 8vw, 3.25rem); letter-spacing: -0.025em; }
  .page-hero h1     { font-size: clamp(2rem, 7.5vw, 2.75rem); }
  .section-header h2 { font-size: clamp(1.75rem, 7vw, 2.25rem); }
  .cta-banner h2    { font-size: clamp(1.75rem, 6.5vw, 2.25rem); }
  .hero-status      { padding: 0.4rem 0.75rem; }
}
.vor-ort-hinweis {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin: 0 0 2rem;
    padding: 1.25rem 1.5rem;
    color: var(--ink-1, #ffffff);
    background: rgba(0, 152, 158, 0.12);
    border: 1px solid rgba(0, 152, 158, 0.45);
    border-left: 5px solid #00989e;
    border-radius: 10px;
}

.vor-ort-hinweis__icon {
    display: flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.1rem;
    background: #00989e;
    border-radius: 50%;
}

.vor-ort-hinweis h2 {
    margin: 0 0 0.5rem;
    color: #00989e;
    font-size: 1.2rem;
}

.vor-ort-hinweis p {
    margin: 0;
    line-height: 1.6;
}

.vor-ort-hinweis__en {
    margin-top: 0.75rem !important;
    padding-top: 0.75rem;
    opacity: 0.85;
    border-top: 1px solid rgba(0, 152, 158, 0.25);
}

@media (max-width: 600px) {
    .vor-ort-hinweis {
        padding: 1rem;
    }
}