/*
 * Marketing homepage (www/apex) layout — served by the hub at home.blade.php.
 * Mobile-first. Design tokens + core components come from <x-ds-head>; this
 * file only adds page layout. Indigo-led, expressive tone; coral reserved for
 * the primary "Kostenlos starten" CTA only.
 */

/* ---------------------------------------------------------------- layout */
.container { width:100%; max-width:var(--container-lg); margin:0 auto; padding:0 20px; }
.section { padding:56px 0; }
/* anchor targets clear the sticky nav (~57px) when jumped to */
[id] { scroll-margin-top:76px; }
.section__head { text-align:center; max-width:640px; margin:0 auto 36px; }
.section__head h2 { font-size:clamp(1.6rem, 5vw, 2rem); letter-spacing:var(--tracking-tight); }
.section__head p { font-size:16px; color:var(--text-muted); margin:12px 0 0; line-height:var(--leading-normal); }
.eyebrow {
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px;
  border-radius:var(--radius-pill); background:var(--indigo-50); color:var(--indigo-700);
  font-size:13px; font-weight:var(--weight-medium); margin-bottom:18px;
}
.icon { flex:none; }

/* skip link */
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--indigo-600); color:#fff; padding:10px 16px; border-radius:0 0 var(--radius-md) 0;
}
.skip-link:focus { left:0; }

/* ---------------------------------------------------------------- nav */
.nav {
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-subtle);
}
.nav__inner {
  max-width:var(--container-lg); margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:16px;
}
.nav__brand { display:inline-flex; align-items:center; }
.nav__links {
  display:flex; gap:22px; flex:1; margin-left:8px;
}
.nav__links a { font-size:14px; color:var(--text-muted); font-weight:var(--weight-medium); }
.nav__links a:hover { color:var(--text-strong); }
.nav__actions { display:flex; align-items:center; gap:10px; margin-left:auto; }
.nav__toggle {
  display:none; width:40px; height:40px; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--border-default); border-radius:var(--radius-md);
  color:var(--text-strong); cursor:pointer;
}

/* language dropdown: the hub's <x-lang-switcher> component ships its own
   .lang-dd styles (@once), so we only need to sit it in the nav actions. */
.nav__actions .lang-dd { display:inline-flex; }

/* mobile menu panel */
.nav__mobile { display:none; }

@media (max-width: 860px) {
  .nav__links { display:none; }
  .nav__cta-desktop { display:none; }
  .nav__toggle { display:inline-flex; }
  .nav__mobile {
    display:none; border-bottom:1px solid var(--border-subtle);
    background:var(--surface-card); padding:12px 20px 20px;
  }
  .nav__mobile.is-open { display:block; }
  .nav__mobile a { display:block; padding:12px 4px; font-size:16px; color:var(--text-body);
    border-bottom:1px solid var(--border-subtle); font-weight:var(--weight-medium); }
  .nav__mobile .ds-btn { margin-top:16px; }
}

/* ---------------------------------------------------------------- hero */
.hero {
  padding:56px 0 40px;
  /* faint indigo blobs/rings behind the hero — stretched to full viewport width */
  background:url('/img/home/bg-motif.png') no-repeat top center;
  background-size:100% auto;
}
.hero__grid {
  display:grid; grid-template-columns:1fr; gap:40px; align-items:center;
}
.hero__copy h1 {
  font-size:clamp(2rem, 7vw, 3.25rem); line-height:1.05; letter-spacing:-0.03em;
  color:var(--indigo-900); margin:0;
}
.hero__copy .sub {
  font-size:clamp(1rem, 2.4vw, 1.2rem); color:var(--text-muted);
  margin:18px 0 0; line-height:var(--leading-normal); max-width:36ch;
}
.hero__ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.hero__trust {
  display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:22px;
  font-size:13px; color:var(--text-subtle);
}
.hero__trust span { display:inline-flex; align-items:center; gap:6px; }

/* hero visual — illustration */
.hero__visual { display:flex; justify-content:center; }
.hero__img { width:100%; max-width:520px; height:auto; display:block; }

/* ---------------------------------------------------------------- problem bridge */
.bridge { background:var(--surface-card); border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
.bridge .container { padding-top:64px; padding-bottom:64px; }
.bridge p {
  margin:0 auto; max-width:760px; text-align:center;
  font-size:clamp(1.1rem, 2.4vw, 1.4rem); color:var(--text-strong);
  font-weight:var(--weight-medium); line-height:var(--leading-snug);
}
.bridge strong { color:var(--indigo-700); font-weight:var(--weight-bold); }

/* ---------------------------------------------------------------- how it works (indigo panel) */
.how { background:var(--indigo-600); color:#fff; }
.how h2 { color:#fff; }
.how .section__head p { color:var(--indigo-100); }
.how__diagram {
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-xl); padding:28px 20px; margin-bottom:24px;
}
.how__steps { display:grid; grid-template-columns:1fr; gap:16px; }
/* Each step tile is fully filled with its own lila tone (indigo-violet →
   violet → orchid); white text throughout for contrast. */
.step {
  position:relative; overflow:hidden;
  background:var(--step-accent);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-lg); padding:22px 20px;
  box-shadow:0 10px 26px rgba(38,33,92,.28);
}
.step:nth-child(1) { --step-accent:#4f46c4; }
.step:nth-child(2) { --step-accent:#7c53d4; }
.step:nth-child(3) { --step-accent:#9a54b0; }
.step__n {
  display:inline-flex; width:36px; height:36px; border-radius:var(--radius-md);
  background:rgba(255,255,255,.20); color:#fff; align-items:center; justify-content:center;
  font-weight:var(--weight-semibold); font-size:16px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
.step h3 { font-size:16px; font-weight:var(--weight-semibold); color:#fff; margin:14px 0 0; letter-spacing:0; }
.step p { font-size:14px; color:rgba(255,255,255,.9); margin:6px 0 0; line-height:var(--leading-normal); }
.how__closing {
  margin:28px auto 0; text-align:center; max-width:640px;
  color:var(--indigo-100); font-size:15px;
}

/* ring diagram */
.ring { max-width:420px; margin:0 auto; }
.ring svg { width:100%; height:auto; display:block; }

/* ---------------------------------------------------------------- benefits */
.grid-cards { display:grid; grid-template-columns:1fr; gap:16px; }
.benefit__img { width:88px; height:88px; object-fit:contain; display:block; margin:-4px 0 0 -6px; }
/* Single-column (mobile): center the benefit graphics. */
@media (max-width: 719px) {
  .benefit__img { margin-left:auto; margin-right:auto; }
}
.benefit h3 { font-size:18px; margin:12px 0 0; }
.benefit p { font-size:15px; color:var(--text-muted); margin:8px 0 0; line-height:var(--leading-relaxed); }

/* ---------------------------------------------------------------- customers */
.customers__grid { display:grid; grid-template-columns:1fr; gap:24px; align-items:center; }
/* freestanding illustration (transparent PNG) — no frame/background */
.customers__media img {
  width:100%; max-width:380px; height:auto; margin:0 auto; display:block;
}
.customers__col h2 { margin:0 0 16px; font-size:clamp(1.6rem, 5vw, 2rem); letter-spacing:var(--tracking-tight); }
.customers__card { padding:28px; }
.customers__card p { font-size:17px; color:var(--text-body); line-height:var(--leading-relaxed); margin:0; }
.customers__list { list-style:none; padding:0; margin:20px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.customers__list li {
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px;
  background:var(--indigo-50); color:var(--indigo-700); border-radius:var(--radius-pill);
  font-size:13px; font-weight:var(--weight-medium);
}

/* ---------------------------------------------------------------- social proof */
.proof__placeholder {
  border-radius:var(--radius-lg);
  background:var(--surface-card); padding:28px 20px; text-align:center;
}
.proof__note {
  display:block; font-size:12px; color:var(--text-subtle); margin-top:10px;
  font-style:italic;
}
.logos { display:grid; grid-template-columns:repeat(2,1fr); gap:20px 32px; margin-top:8px; align-items:center; justify-items:center; }
.logos img { max-height:32px; max-width:100%; width:auto; object-fit:contain; }
.logos__slot {
  height:56px; display:flex; align-items:center; justify-content:center;
  background:var(--neutral-100); border-radius:var(--radius-md);
  color:var(--text-subtle); font-size:12px; font-weight:var(--weight-medium);
}
.testimonials { display:grid; grid-template-columns:1fr; gap:16px; margin-top:24px; }
.testimonial { padding:24px; }
.testimonial p { font-size:16px; color:var(--text-body); line-height:var(--leading-relaxed); margin:0; }
.testimonial .who { display:flex; align-items:center; gap:10px; margin-top:16px; }
.testimonial .avatar {
  width:36px; height:36px; border-radius:50%; background:var(--indigo-100);
  color:var(--indigo-700); display:inline-flex; align-items:center; justify-content:center;
  font-weight:var(--weight-semibold); font-size:14px;
}
.testimonial .who .meta { font-size:13px; color:var(--text-subtle); }
.stats {
  display:flex; flex-wrap:wrap; gap:24px 32px; justify-content:space-around;
  padding:28px; margin-top:24px;
}
.stat { text-align:center; }
.stat .v { font-size:28px; font-weight:var(--weight-semibold); color:var(--indigo-700); letter-spacing:-0.02em; }
.stat .l { font-size:13px; color:var(--text-muted); margin-top:4px; }

/* ---------------------------------------------------------------- final CTA */
.final .container {
  background:var(--indigo-50); border:1px solid var(--indigo-100);
  border-radius:var(--radius-2xl); padding:48px 24px; text-align:center; max-width:900px;
}
.final h2 { font-size:clamp(1.5rem, 5vw, 1.9rem); }
.final p { font-size:16px; color:var(--text-muted); margin:12px auto 0; max-width:44ch; }
.final .ds-btn { margin-top:24px; }

/* ---------------------------------------------------------------- FAQ */
.faq__list { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq__item {
  background:var(--surface-card); border:1px solid var(--border-card);
  border-radius:var(--radius-lg); overflow:hidden;
}
.faq__q {
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:18px 20px; font-size:16px; font-weight:var(--weight-medium);
  color:var(--text-strong);
}
.faq__q::-webkit-details-marker { display:none; }
.faq__q .chev { flex:none; transition:transform 180ms ease; color:var(--text-muted); }
.faq__item[open] .faq__q .chev { transform:rotate(180deg); }
.faq__a { padding:0 20px 18px; color:var(--text-muted); font-size:15px; line-height:var(--leading-relaxed); }

/* ---------------------------------------------------------------- footer */
.footer { background:var(--surface-card); border-top:1px solid var(--border-subtle); }
.footer__top {
  display:grid; grid-template-columns:1fr; gap:32px; padding:48px 0 32px;
}
.footer__brand .claim { font-size:14px; color:var(--text-muted); margin:14px 0 0; max-width:34ch; }
.footer__brand .ds-btn { margin-top:18px; }
.footer__cols { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.footer__col h4 { font-size:13px; text-transform:uppercase; letter-spacing:var(--tracking-wide);
  color:var(--text-subtle); font-weight:var(--weight-semibold); margin:0 0 12px; }
.footer__col a { display:block; padding:5px 0; font-size:14px; color:var(--text-muted); }
.footer__col a:hover { color:var(--text-strong); }
.footer__bar {
  border-top:1px solid var(--border-subtle); padding:20px 0;
  display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:space-between;
  font-size:13px; color:var(--text-subtle);
}
.footer__bar .omni { display:inline-flex; align-items:center; gap:6px; }

/* ---------------------------------------------------------------- legal pages */
.legal-head { border-bottom:1px solid var(--border-subtle); background:var(--surface-card); }
.legal-head__inner { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px; }
.legal { max-width:var(--container-md); padding-top:40px; padding-bottom:64px; }
.legal__back { display:inline-block; font-size:14px; color:var(--text-muted); margin-bottom:20px; }
.legal__back:hover { color:var(--text-strong); }
.legal h1 { font-size:clamp(1.6rem, 5vw, 2rem); margin:0 0 12px; }
.legal h2 { font-size:1.15rem; margin:28px 0 6px; }
.legal p { color:var(--text-muted); line-height:var(--leading-relaxed); margin:0; }
/* List text matches the body copy colour (li otherwise inherits the darker default). */
.legal ul { margin:8px 0 0; padding-left:1.25rem; }
.legal li { color:var(--text-muted); line-height:var(--leading-relaxed); margin:4px 0; }
.legal__note {
  /* margin needs !important: the more specific ".legal p" rule (margin:0) would win. */
  margin:8px 0 8px !important; padding:12px 16px; border-radius:var(--radius-md);
  background:var(--warning-100); color:var(--warning-600); font-size:14px; font-weight:var(--weight-medium);
}

/* -------------------------------------------------------------- contact form */
.contact-form { display:flex; flex-direction:column; gap:6px; margin-top:24px; max-width:520px; }
.contact-form label { font-size:14px; font-weight:var(--weight-medium); color:var(--text-strong); margin-top:10px; }
.contact-form input, .contact-form textarea {
  width:100%; padding:10px 12px; font:inherit; color:var(--text-body);
  background:var(--surface-card); border:1px solid var(--border-default); border-radius:var(--radius-md);
}
.contact-form input:focus, .contact-form textarea:focus { outline:none; border-color:var(--indigo-400); }
.contact-form textarea { resize:vertical; min-height:120px; }
.contact-form button { margin-top:18px; align-self:flex-start; }
.contact-err { color:var(--danger-600, #c02626); font-size:13px; }
.contact-ok {
  margin:24px 0 !important; padding:14px 16px; border-radius:var(--radius-md);
  background:var(--success-100, #e7f6ec); color:var(--success-700, #1f7a43);
  font-size:15px; font-weight:var(--weight-medium);
}

/* ---------------------------------------------------------------- responsive up */
@media (min-width: 720px) {
  .section { padding:72px 0; }
  .hero { padding:72px 0 56px; }
  .how__steps { grid-template-columns:repeat(3,1fr); }
  .grid-cards { grid-template-columns:repeat(2,1fr); }
  .testimonials { grid-template-columns:1fr 1fr; }
  .logos { grid-template-columns:repeat(4,1fr); }
  .customers__grid { grid-template-columns:1.1fr .9fr; }
  .footer__top { grid-template-columns:1.4fr 1fr; }
  .footer__cols { grid-template-columns:repeat(3,1fr); }
}

@media (min-width: 960px) {
  .hero__grid { grid-template-columns:1.05fr .95fr; gap:56px; }
  .grid-cards { grid-template-columns:repeat(4,1fr); }
}