/* =============================================================================
 * VERA Landing — gemeinsames Stylesheet (Landing + Unterseiten).
 * Farb-/Radius-Tokens 1:1 aus vera-2.0/src/index.css (OpenAI-Style Monochrom).
 * ===========================================================================*/
:root {
  --radius: 0.75rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.15 0 0);
  --card: oklch(1 0 0);
  --primary: oklch(0.18 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --border: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --radius-md: calc(var(--radius) - 2px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: var(--foreground);
  background: linear-gradient(to bottom, var(--background), var(--muted));
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page { position: relative; display: flex; min-height: 100vh; flex-direction: column; }

/* Sprachumschalter (oben rechts, analog LocaleSwitcher der VERA-App). */
.locale { position: absolute; right: 1rem; top: 1rem; display: inline-flex; gap: 2px;
  border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
  background: var(--card); z-index: 10; }
.locale button { appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 0.8125rem; font-weight: 500; padding: 0.375rem 0.625rem;
  color: var(--muted-foreground); line-height: 1; }
.locale button[aria-pressed="true"] { background: var(--accent); color: var(--foreground); }

main { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center;
  justify-content: center; padding: 2.25rem 1.5rem; text-align: center; }
.stack { display: flex; width: 100%; max-width: 80rem; flex-direction: column;
  align-items: center; gap: 1.5rem; }

.logo { height: 2.5rem; width: auto; }
a.logo-link { display: inline-flex; }

/* Fließtext (Hero/Leitfrage) auf lesbare Zeilenlänge begrenzt und zentriert,
   während die Karten/Feature-Zeile die volle Breite nutzen. */
.hero { display: flex; flex-direction: column; gap: 0.75rem; max-width: 46rem; align-self: center; }
.choose { max-width: 46rem; align-self: center; }
.hero h1 { margin: 0; font-size: clamp(1.625rem, 3.4vw, 2rem); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
.hero p { margin: 0; font-size: clamp(0.9375rem, 2.1vw, 1.0625rem); line-height: 1.55;
  color: var(--muted-foreground); text-wrap: pretty; }

.choose { margin: 0; font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground);
  letter-spacing: 0.01em; }

/* ── Rollen-Auswahl: zwei Bereiche (Unternehmen / Mitwirkende) ─────────────── */
.roles { display: grid; width: 100%; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .roles { grid-template-columns: 1fr 1fr; } }
.role-card { position: relative; display: flex; flex-direction: column; gap: 0.625rem; padding: 1.5rem;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card);
  text-align: left; }
.role-card__icon { display: flex; height: 2rem; width: 2rem; align-items: center;
  justify-content: center; border-radius: 9999px; border: 1px solid var(--border);
  background: var(--muted); color: var(--foreground); }
.role-card__icon svg { height: 1rem; width: 1rem; }
/* Kleine Marke oben rechts: Constantin-Wortmarke (Unternehmen) bzw. Filmklappe (Kreative). */
.role-card__brand { position: absolute; top: 1.5rem; right: 1.5rem; pointer-events: none; }
img.role-card__brand { top: 1.9rem; height: 1.15rem; width: auto; opacity: 0.9; }
span.role-card__brand { height: 2rem; display: inline-flex; align-items: center; color: var(--muted-foreground); }
.role-card__brand--icon svg { height: 1.45rem; width: 1.45rem; }
.role-card__tag { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted-foreground); }
.role-card__title { margin: 0; font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.2; }
.role-card__desc { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--muted-foreground); }
.role-card__list { list-style: none; margin: 0.125rem 0; padding: 0; display: flex;
  flex-direction: column; gap: 0.4375rem; }
.role-card__list li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem;
  line-height: 1.4; color: var(--foreground); }
/* Haken bewusst dezent: klein, dünner Strich, heller Grauton — kein Blickfang. */
.role-card__list .check { flex: 0 0 auto; margin-top: 0.28rem; color: var(--ring); }
.role-card__list .check svg { height: 0.65rem; width: 0.65rem; display: block; stroke-width: 2; }
.role-card__actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.375rem; }
.role-card__hint { margin: 0.125rem 0 0; font-size: 0.75rem; line-height: 1.45; color: var(--muted-foreground); }
.role-card__more { margin-top: 0.25rem; padding-top: 0.875rem; border-top: 1px solid var(--border); }
.role-card__more a { font-size: 0.8125rem; color: var(--muted-foreground); text-decoration: none;
  font-weight: 500; }
.role-card__more a:hover { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }

.btn { display: inline-flex; align-items: center; justify-content: center;
  height: 2.5rem; padding: 0 1rem; border-radius: var(--radius-md); font-size: 0.875rem;
  font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 120ms, opacity 120ms, border-color 120ms; }
.btn--primary { background: var(--primary); color: var(--primary-foreground); border: 1px solid var(--primary); }
.btn--primary:hover { opacity: 0.9; }
.btn--outline { background: var(--card); color: var(--foreground); border: 1px solid var(--border); }
.btn--outline:hover { background: var(--accent); }
.btn--lg { height: 2.75rem; padding: 0 1.75rem; }
.btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ── Marketing-Abschnitte (Was ist VERA / Kundenstimmen / FAQ / Sales-Brücke) ─
   Liegen unter dem Rollen-Router; gleiche Tokens/Kartenoptik wie oben. Jeder
   Abschnitt trägt oben eine dezente Trennlinie mit Luft. */
.mkt { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1rem;
  padding-top: 2.75rem; margin-top: 1rem; border-top: 1px solid var(--border); }
.mkt__title { margin: 0; font-size: clamp(1.375rem, 2.6vw, 1.625rem); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.2; text-align: center; text-wrap: balance; }
.mkt__intro { margin: 0; max-width: 46rem; font-size: 1rem; line-height: 1.6;
  color: var(--muted-foreground); text-align: center; text-wrap: pretty; }
.mkt__more { margin: 0.25rem 0 0; max-width: 52rem; font-size: 0.9375rem; line-height: 1.6;
  color: var(--muted-foreground); text-align: center; text-wrap: pretty; }

/* Was ist VERA? — drei Kernfunktionen */
.features { list-style: none; margin: 0.5rem 0 0; padding: 0; width: 100%; display: grid;
  gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .features { grid-template-columns: repeat(3, 1fr); } }
.feature { display: flex; flex-direction: column; gap: 0.375rem; padding: 1.25rem;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); text-align: left; }
.feature__title { font-weight: 600; font-size: 0.9375rem; }
.feature__desc { font-size: 0.875rem; line-height: 1.5; color: var(--muted-foreground); }

/* Kundenstimmen — Karten mit unten bündiger Namenszeile */
.quotes { list-style: none; margin: 0.5rem 0 0; padding: 0; width: 100%; display: grid;
  gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .quotes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote { display: flex; flex-direction: column; gap: 0.875rem; padding: 1.375rem;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); text-align: left; }
.quote__text { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--foreground); }
.quote__by { margin: auto 0 0; display: flex; flex-direction: column; gap: 0.0625rem; }
.quote__name { font-size: 0.8125rem; font-weight: 600; }
.quote__role { font-size: 0.75rem; line-height: 1.35; color: var(--muted-foreground); }

/* FAQ — natives details/summary-Akkordeon mit +/–-Marker */
.faq { width: 100%; max-width: 52rem; display: flex; flex-direction: column; }
.faq__item { border-bottom: 1px solid var(--border); text-align: left; }
.faq__item:first-child { border-top: 1px solid var(--border); }
.faq__q { cursor: pointer; list-style: none; position: relative; padding: 1rem 2rem 1rem 0;
  font-size: 0.9375rem; font-weight: 600; line-height: 1.4; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; position: absolute; right: 0.25rem; top: 0.9rem; font-size: 1.25rem;
  font-weight: 400; line-height: 1; color: var(--muted-foreground); }
.faq__item[open] .faq__q::after { content: "–"; }
.faq__q:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 2px; }
.faq__a { margin: 0 0 1rem; max-width: 46rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }

/* Sales-Brücke */
.cta { align-items: center; }
.cta .btn { margin-top: 0.5rem; }

/* ── Unterseite (VERA fürs eigene Unternehmen): Sales/Kontakt ──────────────── */
.article { max-width: 46rem; text-align: left; align-items: stretch; }
.back { align-self: flex-start; font-size: 0.8125rem; color: var(--muted-foreground);
  text-decoration: none; font-weight: 500; }
.back:hover { color: var(--foreground); }
.article h1 { text-align: left; }
.lead { font-size: 1.125rem; line-height: 1.6; color: var(--foreground); margin: 0; }
.body-text { font-size: 1rem; line-height: 1.65; color: var(--muted-foreground); margin: 0; }
.benefits { list-style: none; margin: 0.5rem 0; padding: 0; display: grid; gap: 1rem;
  grid-template-columns: 1fr; }
@media (min-width: 640px) { .benefits { grid-template-columns: repeat(3, 1fr); } }
.benefits li { padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); }
.benefits .b-title { display: block; font-weight: 600; font-size: 0.9375rem; margin-bottom: 0.375rem; }
.benefits .b-desc { display: block; font-size: 0.875rem; line-height: 1.5; color: var(--muted-foreground); }
.contact { margin-top: 0.5rem; padding: 1.75rem; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--card); display: flex; flex-direction: column;
  align-items: flex-start; gap: 0.75rem; }
.contact h2 { margin: 0; font-size: 1.125rem; font-weight: 600; }
.contact p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--muted-foreground); }

footer { display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 0.75rem; border-top: 1px solid var(--border); padding: 1.5rem; font-size: 0.75rem;
  color: var(--muted-foreground); }
@media (min-width: 640px) { footer { flex-direction: row; } }
footer a { color: inherit; text-decoration: none; }
footer a:hover { color: var(--foreground); }
footer nav { display: flex; align-items: center; gap: 1rem; }
footer p { margin: 0; }