/* ============================================================
   Synervia – Design-Ebene v2
   Wird NACH synervia.css geladen und bringt Seiten, die noch auf
   dem alten Stylesheet basieren, auf das neue Design (Space Grotesk,
   warme Flächen, dunkler Hero mit Raster). Nur Tokens, Typografie
   und gemeinsame Bausteine – keine seitenspezifischen Layouts.
   ============================================================ */

:root {
  --red-soft: #FBEAE8;
  --ink: #131316;
  --ink-2: #2B2A2F;
  --muted: #5B5A62;
  --muted-2: #8B8990;
  --line: #E7E4DF;
  --line-2: #D8D4CC;
  --bg-2: #F6F4EF;
  --bg-3: #EEEBE3;
  --r: 14px;
  --r-lg: 20px;
  --font-head: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

body { font-family: var(--font-body); line-height: 1.6; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; letter-spacing: -0.01em; }

.h2 { font-family: var(--font-head); font-size: clamp(28px, 3.6vw, 42px); font-weight: 600; letter-spacing: -0.01em; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; }
.lead { font-size: 17.5px; line-height: 1.65; }

/* Buttons */
.btn { border-radius: 8px; font-family: var(--font-body); }
.btn-outline-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.28); }
.btn-outline-light:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); }

/* Navigation */
.logo { font-family: var(--font-head); }
.mobile-nav > a, .mobile-nav-trigger { font-family: var(--font-head); font-weight: 600; }

/* Dokumentations-Hero: gleiche Bildsprache wie der Seiten-Hero */
.doc-hero { background: #0C0C0F; border-bottom: none; padding: 150px 0 72px; }
.doc-hero::before {
  background: none; opacity: 0.5;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
}
.doc-hero::after { display: none; }
.doc-hero .breadcrumb { color: rgba(234,234,239,0.5); margin-bottom: 22px; }
.doc-hero .breadcrumb a { color: rgba(234,234,239,0.5); }
.doc-hero .breadcrumb a:hover { color: #fff; }
.doc-hero .breadcrumb .current { color: rgba(234,234,239,0.82) !important; }
.doc-hero h1 { font-family: var(--font-head); font-size: clamp(34px, 4.4vw, 54px); font-weight: 560; line-height: 1.08; letter-spacing: -0.01em; margin-bottom: 18px; }
.doc-hero .hero-sub { font-size: 17px; line-height: 1.65; max-width: 640px; margin-bottom: 30px; color: rgba(234,234,239,0.68) !important; }
.doc-pill { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); border-radius: 100px; padding: 8px 17px; font-size: 13px; font-weight: 500; color: #E9E8EC; margin-bottom: 22px; }
.doc-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
.doc-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.12); list-style: none; }
.doc-facts li { font-size: 13.5px; font-weight: 500; color: rgba(234,234,239,0.82); }
.doc-facts li strong { color: #fff; font-weight: 600; margin-right: 6px; }

/* CTA / Footer */
.cta-box h2, .booking-section .h2 { font-family: var(--font-head); font-weight: 600; }
footer { background: #0E0E11; }

@media (max-width: 620px) {
  .doc-hero { padding: 128px 0 52px; }
}

/* ─── Seiten-Hero der Unterseiten ─── */
.page-hero { background: #0C0C0F; border-bottom: none; padding: 150px 0 92px; }
.page-hero::before {
  background: none; opacity: 0.5;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
}
.page-hero::after { display: none; }
.page-hero .breadcrumb { color: rgba(234,234,239,0.5); margin-bottom: 22px; }
.page-hero .breadcrumb a { color: rgba(234,234,239,0.5); }
.page-hero .breadcrumb a:hover { color: #fff; }
.page-hero .eyebrow { color: #FF8A7E; }
.page-hero h1 { font-family: var(--font-head); font-size: clamp(36px, 4.6vw, 58px); font-weight: 560; line-height: 1.08; letter-spacing: -0.01em; }
.page-hero h1 .accent { background: none; -webkit-text-fill-color: currentColor; color: #FF6B62; animation: none; }
.page-hero p { font-size: 17px; line-height: 1.65; color: rgba(234,234,239,0.68); max-width: 620px; }
.page-hero .btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,0.28); }
.page-hero .btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); }

/* ─── Überschriften: gleiche Gewichtung wie auf den neuen Seiten ─── */
.hero h1 { font-family: var(--font-head); font-weight: 560; letter-spacing: -0.01em; }
.feat-card h3, .feat h3, .pcard h3, .tcard h4, .blog-card-body h3, .web-ref-info h4, .app-info h3,
.theme-info h3, .theme-info-sm h3, .article-body h3, .modal-box h2 { font-family: var(--font-head); font-weight: 600; letter-spacing: -0.01em; }
.article-body h2, .cta-box h2 { font-family: var(--font-head); font-weight: 600; letter-spacing: -0.01em; }
.stat .n, .price { font-family: var(--font-head); font-weight: 600; letter-spacing: -0.01em; }
.cta-box .eyebrow { color: #FF8A7E; }
.cta-box::before { opacity: 0.6; }

/* Lange Code-Schnipsel in Artikeln dürfen auf Mobilgeräten umbrechen */
.article-body code, .docs-article code { overflow-wrap: anywhere; }