/* ============================================================
       FONTS (self-hosted Inter, was fonts.googleapis.com — audit 2026-09-29)
       Only the weights actually used in this stylesheet/markup (400
       default body weight, 500/600/700/800 explicit) — not the full
       300-900 range the old Google Fonts <link> requested. Inter ships
       as a variable font, so one file per subset covers that whole
       400-800 span; declaring font-weight as a range (not a fixed
       value) lets each of those weights resolve from the same file,
       same as Google's own served CSS did.
    ============================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
       DESIGN TOKENS (adapted from hotelwulf, accent swapped to eventwulf green)
    ============================================================ */

:root {
      --bg:          #0e1525;
      --bg-card:     #1e2d4a;
      --bg-elevated: #273d60;
      --accent:      #156e47;
      --accent-hover:#1a8055;
      --accent-icon: #3fbf87;
      --cta:         #996C1E; /* Gold für CTA-Buttons (wie im Admin-Bereich) */
      --cta-hover:   #b07d24;
      --cta-glow:    rgba(153,108,30,0.30);
      --accent-glow: rgba(21,110,71,0.22);
      --accent-rgb:  21,110,71;
      --text:        #f5f8ff;
      --subtext:     #b8c8e0;
      --subtext-dark:#7a8fa8;
      --border:      rgba(255, 255, 255, 0.12);
      --card-shadow: 0 4px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
      --radius:      12px;
      --radius-sm:   8px;
      --radius-lg:   20px;
      --font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --nav-h:       68px;
      --nav-offset:  100px; /* nav-h + top spacing */
      --t:           0.2s ease;
      --shadow:      0 4px 20px rgba(0, 0, 0, 0.4);
      --shadow-lg:   0 20px 60px rgba(0, 0, 0, 0.5);
      --shadow-acc:  0 8px 32px rgba(21,110,71,0.28);
    }

/* ============================================================
       RESET
    ============================================================ */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
      font-family: var(--font);
      background-color: var(--bg);
      background-image:
        radial-gradient(ellipse 90% 50% at 15% 0%,   rgba(21,110,71,0.09) 0%, transparent 60%),
        radial-gradient(ellipse 70% 40% at 85% 100%, rgba(21,110,71,0.05) 0%, transparent 60%);
      background-attachment: fixed;
      color: var(--text);
      line-height: 1.6;
      min-height: 100vh;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

a    { color: inherit; text-decoration: none; }

button { font-family: var(--font); cursor: pointer; border: none; background: none; }

img, svg { display: block; max-width: 100%; }

ul { list-style: none; }

/* Skip link */

.skip-link {
      position: absolute;
      top: -100%;
      left: 50%;
      transform: translateX(-50%);
      background: var(--accent);
      color: #fff;
      padding: 8px 18px;
      border-radius: 0 0 var(--radius-sm) var(--radius-sm);
      font-weight: 600;
      font-size: 14px;
      z-index: 9999;
      transition: top var(--t);
    }

.skip-link:focus { top: 0; }

/* Focus */

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
      html { scroll-behavior: auto; }
    }

/* ============================================================
       TYPOGRAPHY
    ============================================================ */

h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }

h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 800; }

h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }

h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); }

p  { line-height: 1.7; }

/* ============================================================
       LAYOUT
    ============================================================ */

.container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

/* ============================================================
       BUTTONS
    ============================================================ */

.btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 22px;
      border-radius: var(--radius);
      font-size: 15px;
      font-weight: 600;
      line-height: 1;
      transition: all var(--t);
      white-space: nowrap;
      cursor: pointer;
      border: none;
      font-family: var(--font);
    }

.btn-primary {
      position: relative;
      overflow: hidden;
      background: var(--cta);
      color: #fff;
      box-shadow: 0 8px 32px var(--cta-glow);
    }

.btn-primary::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 60%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
      animation: btn-shimmer 3.5s infinite;
    }

@keyframes btn-shimmer {
      0%   { left: -60%; }
      22%  { left: 110%; }
      100% { left: 110%; }
    }

.btn-primary:hover {
      background: var(--cta-hover);
      transform: translateY(-1px);
      box-shadow: 0 12px 40px rgba(153,108,30,0.42);
    }

.btn-primary:active { transform: translateY(0); }

.btn-ghost {
      background: rgba(255, 255, 255, 0.06);
      color: var(--text);
      border: 1px solid rgba(255, 255, 255, 0.22);
    }

.btn-ghost:hover {
      background: rgba(255, 255, 255, 0.11);
      border-color: rgba(255, 255, 255, 0.32);
    }

.btn-lg {
      padding: 15px 32px;
      font-size: 16px;
      border-radius: var(--radius-lg);
    }

/* ============================================================
       NAVIGATION
    ============================================================ */

.nav {
      position: fixed;
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 48px);
      max-width: 1200px;
      height: var(--nav-h);
      z-index: 1000;
      background: rgba(10, 15, 30, 0.55);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid var(--border);
      border-radius: 16px;
      transition: background var(--t), box-shadow var(--t), top var(--t), height var(--t), max-width var(--t);
    }

.nav.scrolled {
      top: 8px;
      height: 52px;
      max-width: 1080px;
      background: rgba(10, 15, 30, 0.88);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255,255,255,0.05);
    }

.nav.scrolled .nav-logo { font-size: 0.92rem; }

.nav .container { height: 100%; }

.nav-inner {
      display: grid;
      grid-template-columns: 1fr auto 1fr; /* Links exakt mittig, unabhängig von Logo-/Button-Breite */
      align-items: center;
      height: 100%;
      gap: 4px;
    }

/* Logo */

.nav-logo {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-shrink: 0;
      color: #fff;
      font-size: 1.05rem;
      font-weight: 700;
      text-decoration: none;
      transition: opacity var(--t), font-size var(--t);
    }

.nav-logo:hover { opacity: 0.85; }

.logo-icon { width: 1em; height: 1em; flex-shrink: 0; overflow: visible; }
.logo-text { line-height: 1; }

/* Nav links */

.nav-links {
      display: flex;
      align-items: center;
      gap: 2px;
      justify-content: center;
    }

.nav-link {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 8px 12px;
      border-radius: var(--radius-sm);
      font-size: 14px;
      font-weight: 500;
      color: var(--subtext);
      transition: color var(--t), background var(--t);
      cursor: pointer;
      background: none;
      border: none;
      font-family: var(--font);
    }

.nav-link:hover, .nav-link.active {
      color: var(--text);
      background: rgba(255, 255, 255, 0.06);
    }

/* Nav CTA */

.nav-cta {
      justify-self: end;
      display: flex;
      align-items: center;
      gap: 10px;
    }

/* Hamburger */

.nav-burger {
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 38px;
      height: 38px;
      gap: 5px;
      border-radius: var(--radius-sm);
      transition: background var(--t);
      flex-shrink: 0;
      color: var(--text);
    }

.nav-burger:hover { background: rgba(255,255,255,0.07); }

.nav-burger span {
      display: block;
      width: 20px;
      height: 1.5px;
      background: currentColor;
      border-radius: 2px;
      transition: transform 0.25s ease, opacity 0.25s ease;
      transform-origin: center;
    }

.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }

.nav-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }

.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 880px) {
      .nav-inner { display: flex; }
      .nav-cta { margin-left: auto; }
      .nav-links { display: none; }
      .nav-burger { display: flex; }
      .nav-cta .btn-primary.nav-cta-desktop { display: none; }
      .nav-cta .nav-login { display: none; }
    }

/* ============================================================
       MOBILE MENU
    ============================================================ */

.mobile-menu {
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(8, 12, 24, 0.97);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      z-index: 999;
      overflow-y: auto;
      padding: 96px 16px 40px;
      gap: 4px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
      transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
      pointer-events: none;
    }

.mobile-menu.open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }

.mobile-menu-link {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 13px 16px;
      border-radius: var(--radius);
      font-size: 15px;
      font-weight: 500;
      color: var(--subtext);
      transition: all var(--t);
    }

.mobile-menu-link:hover { background: rgba(255,255,255,0.06); color: var(--text); }

.mobile-menu-cta {
      margin-top: 20px;
      padding: 0 16px;
      display: flex;
    }

.mobile-menu-cta .btn { width: fit-content; }

/* ============================================================
       HERO — video background variant
    ============================================================ */

.hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding-top: var(--nav-offset);
    }

.hero-video-wrap {
      position: absolute;
      inset: 0;
      overflow: hidden;
      z-index: 0;
    }

.hero-video {
      position: absolute;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      transform: translate(-50%, -50%);
      object-fit: cover;
      filter: brightness(0.95) saturate(1.1) contrast(1.15);
    }

.hero-scrim {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(9,13,25,0.25) 0%, rgba(9,13,25,0.42) 55%, var(--bg) 100%),
        radial-gradient(ellipse 60% 55% at 20% 35%, rgba(9,13,25,0.55) 0%, transparent 65%);
    }

.hero-content {
      position: relative;
      z-index: 1;
      width: 100%;
      padding: 80px 24px 100px;
    }

.hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(21,110,71,0.14);
      border: 1px solid rgba(21,110,71,0.32);
      color: #4fcf9a;
      font-size: 13px;
      font-weight: 500;
      padding: 6px 16px;
      border-radius: 100px;
      margin-bottom: 32px;
      letter-spacing: 0.01em;
      animation: fadeUp 0.5s ease 0.1s both;
    }

.badge-dot {
      width: 6px;
      height: 6px;
      background: var(--accent);
      border-radius: 50%;
      animation: pulse 2.2s ease infinite;
      flex-shrink: 0;
    }

.hero h1 {
      background: linear-gradient(160deg, #ffffff 40%, rgba(184,200,224,0.75) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 24px;
      animation: fadeUp 0.55s ease 0.2s both;
    }

@keyframes fadeUp {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }

@keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.35; }
    }

/* ============================================================
       SECTIONS – SHARED
    ============================================================ */

.section { padding: 96px 0; }

.section-label {
      display: inline-block;
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--accent);
      margin-bottom: 14px;
    }

.section-headline { margin-bottom: 16px; }

.section-sub {
      font-size: 1.1rem;
      color: var(--subtext);
      max-width: 560px;
    }

.section-header { margin-bottom: 56px; }

.section-header.centered { text-align: center; }

.section-header.centered .section-sub { margin: 0 auto; }

/* scroll-reveal */

.reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity 0.55s ease, transform 0.55s ease;
    }

.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-d1 { transition-delay: 0.08s; }

.reveal-d2 { transition-delay: 0.16s; }

.reveal-d3 { transition-delay: 0.24s; }

/* ============================================================
       GLOBAL CARD SHADOW
    ============================================================ */

.feat-card, .plan-card, .faq-item, .step-card, .usecase-card, .screenshot-box {
      box-shadow: var(--card-shadow);
    }

/* ============================================================
       FEATURES
    ============================================================ */

.features-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

.feat-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 24px 22px;
      transition: border-color var(--t), box-shadow var(--t), transform var(--t);
    }

.feat-card:hover {
      border-color: rgba(21,110,71,0.32);
      box-shadow: 0 8px 28px rgba(0,0,0,0.22);
      transform: translateY(-2px);
    }

.feat-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: rgba(21,110,71,0.14);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent-icon);
      margin-bottom: 14px;
      line-height: 1;
    }

.feat-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }

.feat-desc { font-size: 13px; color: var(--subtext); line-height: 1.65; }

@media (max-width: 980px) {
      .features-grid { grid-template-columns: 1fr 1fr; }
    }

@media (max-width: 560px) {
      .features-grid { grid-template-columns: 1fr; }
    }

/* ============================================================
       SCREENSHOTS
    ============================================================ */

.screenshots-row {
      display: flex;
      gap: 20px;
      align-items: stretch;
      flex-wrap: wrap;
    }

.screenshot-box {
      flex: 1 1 220px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: border-color var(--t), transform var(--t);
    }

.screenshot-box:hover {
      border-color: rgba(21,110,71,0.3);
      transform: translateY(-2px);
    }

.screenshot-bar {
      height: 34px;
      background: var(--bg-elevated);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 0 14px;
      flex-shrink: 0;
    }

.s-dot { width: 9px; height: 9px; border-radius: 50%; }

.s-dot:nth-child(1) { background: rgba(255,95,87,.5); }

.s-dot:nth-child(2) { background: rgba(255,189,46,.5); }

.s-dot:nth-child(3) { background: rgba(40,201,64,.5); }

.screenshot-label {
      font-size: 10px;
      color: var(--subtext-dark);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-left: 6px;
    }

.screenshot-body {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: #eef2f9;
    }

.screenshot-body img {
      width: 100%;
      height: auto;
      aspect-ratio: 1.28 / 1;
      object-fit: contain;
    }

@media (max-width: 900px) {
      .screenshots-row { flex-direction: column; }
    }

/* ============================================================
       SO FUNKTIONIERT'S — numbered steps (new section)
    ============================================================ */

.steps-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }

.step-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 28px 22px;
      position: relative;
      transition: border-color var(--t), transform var(--t);
    }

.step-card:hover {
      border-color: rgba(21,110,71,0.3);
      transform: translateY(-2px);
    }

.step-badge {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--accent);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 18px;
      box-shadow: 0 6px 18px rgba(21,110,71,0.35);
    }

.step-title { font-size: 15px; font-weight: 600; margin-bottom: 8px; }

.step-text { font-size: 13px; color: var(--subtext); line-height: 1.65; }

.step-connector {
      display: none;
    }

@media (max-width: 980px) {
      .steps-grid { grid-template-columns: 1fr 1fr; }
    }

@media (max-width: 560px) {
      .steps-grid { grid-template-columns: 1fr; }
    }

/* ============================================================
       USE CASES
    ============================================================ */

.usecases-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

.usecase-card:hover {
      border-color: rgba(21,110,71,0.28);
      box-shadow: 0 8px 32px rgba(0,0,0,0.25);
      transform: translateY(-2px);
    }

.usecase-title {
      font-size: 17px;
      font-weight: 700;
      margin-bottom: 10px;
      letter-spacing: -0.01em;
    }

.usecase-desc {
      font-size: 14px;
      color: var(--subtext);
      line-height: 1.65;
    }

@media (max-width: 900px) {
      .usecases-grid { grid-template-columns: 1fr; }
    }

/* ============================================================
       PRICING
    ============================================================ */

.pp-plans-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

.plan-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 32px;
      position: relative;
      display: flex;
      flex-direction: column;
    }

.plan-card.recommended {
      border-color: rgba(21,110,71,0.4);
      background: linear-gradient(160deg, rgba(21,110,71,0.14) 0%, rgba(21,110,71,0.06) 100%);
    }

.plan-tag {
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--accent);
      color: #fff;
      font-size: 11px;
      font-weight: 600;
      padding: 3px 12px;
      border-radius: 100px;
      white-space: nowrap;
    }

.plan-name { font-size: 14px; font-weight: 600; color: var(--subtext); margin-bottom: 4px; }

.plan-price {
      font-size: 2.6rem;
      font-weight: 800;
      letter-spacing: -0.04em;
      margin: 10px 0 2px;
    }

.plan-price.on-request { font-size: 1.9rem; }

.plan-period { font-size: 13px; color: var(--subtext); margin-bottom: 22px; }

.plan-divider { height: 1px; background: var(--border); margin: 0 0 20px; }

.plan-features {
      display: flex;
      flex-direction: column;
      gap: 9px;
      flex: 1;
      margin-bottom: 24px;
    }

.plan-feat {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      font-size: 13px;
      color: var(--subtext);
    }

.pf-check { color: var(--accent); flex-shrink: 0; font-size: 13px; margin-top: 1px; }

/* Billing toggle */

.billing-toggle {
      display: flex;
      align-items: center;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 100px;
      padding: 4px;
      width: fit-content;
      margin: 0 auto 36px;
    }

.billing-btn {
      background: none;
      border: none;
      border-radius: 100px;
      padding: 9px 22px;
      font-size: 14px;
      font-weight: 500;
      color: var(--subtext);
      cursor: pointer;
      transition: background .2s, color .2s;
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: inherit;
    }

.billing-btn.active { background: var(--accent); color: #fff; }

.billing-save {
      font-size: 11px;
      font-weight: 700;
      background: rgba(5,150,105,0.15);
      color: #34d399;
      border-radius: 100px;
      padding: 2px 7px;
    }

.billing-btn.active .billing-save { background: rgba(255,255,255,0.22); color: #fff; }

/* Billing toggle: sliding pill. JS sets --pill-x/--pill-w and adds .has-pill; without JS the active button keeps its own background. */
.billing-toggle { position: relative; }
.billing-toggle.has-pill::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--pill-w); transform: translateX(var(--pill-x)); border-radius: 100px; background: var(--accent); pointer-events: none; }
.billing-toggle.has-pill.animate::before { transition: transform .3s cubic-bezier(.4, 0, .2, 1), width .3s cubic-bezier(.4, 0, .2, 1); }
.billing-toggle.has-pill .billing-btn { position: relative; z-index: 1; }
.billing-toggle.has-pill .billing-btn.active { background: none; }
@media (prefers-reduced-motion: reduce) { .billing-toggle.has-pill.animate::before { transition: none; } }

@media (max-width: 900px) {
      .pp-plans-grid { grid-template-columns: 1fr; }
    }

/* ============================================================
       PAGE CTA
    ============================================================ */

.page-cta h2 { margin-bottom: 14px; }

.page-cta-sub { color: var(--subtext); font-size: 1.05rem; margin-bottom: 36px; }

.page-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
       FAQ
    ============================================================ */

.faq-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-width: 720px;
      margin: 0 auto;
    }

.faq-item {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      transition: border-color var(--t);
    }

.faq-item.open { border-color: rgba(21,110,71,0.32); }

.faq-q {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 20px 24px;
      cursor: pointer;
      font-size: 15px;
      font-weight: 600;
      user-select: none;
    }

.faq-q:hover { color: var(--accent); }

.faq-chevron { flex-shrink: 0; transition: transform 0.22s ease; color: var(--subtext); }

.faq-item.open .faq-chevron { transform: rotate(180deg); }

.faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.28s ease;
    }

.faq-a-inner {
      padding: 0 24px 20px;
      font-size: 14px;
      color: var(--subtext);
      line-height: 1.75;
    }

.faq-item.open .faq-a { max-height: 260px; }

/* ============================================================
       FOOTER
    ============================================================ */

.footer {
      padding: 64px 0 32px;
      border-top: 1px solid var(--border);
    }

.footer-grid {
      display: grid;
      grid-template-columns: 1.6fr repeat(3, 1fr);
      gap: 32px;
      margin-bottom: 48px;
    }

.footer-logo {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 16px;
      color: #fff;
      font-size: 1rem;
      font-weight: 700;
      text-decoration: none;
    }

.footer-desc {
      font-size: 14px;
      color: var(--subtext);
      line-height: 1.65;
      max-width: 320px;
    }

.footer-col-heading {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 16px;
    }

.footer-links { display: flex; flex-direction: column; gap: 11px; }

.footer-links a { font-size: 14px; color: var(--subtext); transition: color var(--t); }

.footer-links a:hover { color: var(--text); }

.footer-bottom {
      display: grid;
      grid-template-columns: 1fr auto 1fr; /* Copyright links, Made-with exakt mittig, Rechtliches rechts */
      align-items: center;
      gap: 24px;
      padding-top: 28px;
      border-top: 1px solid var(--border);
    }

.footer-copy { font-size: 13px; color: var(--subtext-dark); }

.made-with { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 13px; color: var(--subtext-dark); }

.footer-legal { justify-self: end; }

@media (max-width: 760px) {
      .footer-bottom { display: flex; flex-direction: column; align-items: flex-start; }
      .footer-legal { justify-self: auto; }
    }

.made-heart { color: #fff; fill: #fff; stroke: #fff; stroke-width: 1; stroke-linejoin: round; flex-shrink: 0; }

.made-flag { flex-shrink: 0; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,0.18); }

.footer-legal { display: flex; gap: 20px; }

.footer-legal a { font-size: 13px; color: var(--subtext-dark); transition: color var(--t); }

.footer-legal a:hover { color: var(--subtext); }

@media (max-width: 900px) {
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .footer-brand { grid-column: 1 / -1; }
      .footer-desc { max-width: none; }
    }

@media (max-width: 560px) {
      .footer-grid { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction: column; align-items: flex-start; }
    }