@layer reset, tokens, base, layout, components, utilities, marketing;

/* Das Marketing-Blatt erweitert app.css (Tokens, Reset, Basis, Komponenten) und
   nennt selbst keine Farbe literal — jede Farbe kommt aus einem --c-*-Token. */
@layer marketing {
  /* ---------- Grundraster ---------- */
  .wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: var(--s-4); }
  @media (min-width: 1024px) { .wrap { padding-inline: var(--s-6); } }
  @media (min-width: 1440px) { .wrap { max-width: 78rem; } }

  .marketing { background: var(--c-surface); }
  .section { padding-block: var(--s-7); border-top: 1px solid var(--c-border); }
  .section:first-of-type { border-top: 0; }
  @media (min-width: 768px) { .section { padding-block: var(--s-8); } }

  .eyebrow {
    font-family: var(--f-mono); font-size: .75rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--c-accent); margin: 0 0 var(--s-3);
  }
  .display {
    font-family: var(--f-display); font-weight: 400; letter-spacing: -.02em; line-height: 1.04;
    font-size: clamp(2.4rem, 1.4rem + 4.4vw, 4.6rem); margin: 0;
  }
  .lede { font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); color: var(--c-text-muted); max-width: 34em; margin: var(--s-4) 0 0; }
  .rule { height: 1px; background: var(--c-accent); opacity: .35; border: 0; margin-block: var(--s-6); }
  .section__title { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); letter-spacing: -.015em; margin: 0 0 var(--s-2); }
  .section__lede { color: var(--c-text-muted); max-width: 46em; margin: 0 0 var(--s-6); }

  /* ---------- Kopf und Fuss ---------- */
  .site-header { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--c-surface) 92%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--c-border); }
  .site-header__inner { display: flex; align-items: center; gap: var(--s-4); min-height: 60px; }
  .site-header__brand { font-family: var(--f-display); font-size: 1.35rem; letter-spacing: -.02em; color: var(--c-text); text-decoration: none; }
  .site-header__nav { display: none; gap: var(--s-1); margin-left: auto; }
  .site-header__nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: var(--s-3); border-radius: var(--r-2); color: var(--c-text-muted); text-decoration: none; }
  .site-header__nav a:hover { color: var(--c-text); background: var(--c-surface-2); }
  .site-header__nav a[aria-current="page"] { color: var(--c-accent); }
  .site-header__cta { margin-left: auto; display: flex; gap: var(--s-2); }
  @media (min-width: 1024px) { .site-header__nav { display: flex; } .site-header__cta { margin-left: 0; } }

  .site-footer { background: var(--c-surface-2); border-top: 1px solid var(--c-border); padding-block: var(--s-7) var(--s-6); margin-top: var(--s-8); }
  .site-footer__cols { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
  @media (min-width: 768px) { .site-footer__cols { grid-template-columns: 1.4fr repeat(3, 1fr); } }
  .site-footer h2 { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-muted); margin-bottom: var(--s-3); }
  .site-footer li + li { margin-top: var(--s-2); }
  .site-footer a { color: var(--c-text); text-decoration: none; }
  .site-footer a:hover { color: var(--c-accent); text-decoration: underline; }
  .site-footer__legal { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--c-border); color: var(--c-text-muted); font-size: .85rem; }

  .locale-banner { background: var(--c-accent-weak); border-bottom: 1px solid var(--c-border); font-size: .9rem; }
  .locale-banner__inner { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; padding-block: var(--s-2); }

  /* ---------- Hero ---------- */
  .hero { padding-block: var(--s-7) var(--s-7); }
  @media (min-width: 768px) { .hero { padding-block: var(--s-8); } }
  .hero__grid { display: grid; gap: var(--s-6); grid-template-columns: 1fr; align-items: start; }
  @media (min-width: 1024px) { .hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--s-7); } }

  .hero__cycle { display: grid; margin-top: var(--s-4); min-height: 2.6em; font-family: var(--f-display); font-size: clamp(1.2rem, 1rem + 1.1vw, 1.9rem); line-height: 1.3; color: var(--c-accent); }
  .hero__cycle > span { grid-area: 1 / 1; opacity: 0; animation: hero-cycle 72s linear infinite; }
  .hero__cycle > span:first-child { opacity: 1; }
  /* 36 Verzoegerungen als Regeln statt als style-Attribut — die CSP erlaubt kein inline style. */
  .hero__cycle > span:nth-child(1) { animation-delay: 0s; }
  .hero__cycle > span:nth-child(2) { animation-delay: 2s; }
  .hero__cycle > span:nth-child(3) { animation-delay: 4s; }
  .hero__cycle > span:nth-child(4) { animation-delay: 6s; }
  .hero__cycle > span:nth-child(5) { animation-delay: 8s; }
  .hero__cycle > span:nth-child(6) { animation-delay: 10s; }
  .hero__cycle > span:nth-child(7) { animation-delay: 12s; }
  .hero__cycle > span:nth-child(8) { animation-delay: 14s; }
  .hero__cycle > span:nth-child(9) { animation-delay: 16s; }
  .hero__cycle > span:nth-child(10) { animation-delay: 18s; }
  .hero__cycle > span:nth-child(11) { animation-delay: 20s; }
  .hero__cycle > span:nth-child(12) { animation-delay: 22s; }
  .hero__cycle > span:nth-child(13) { animation-delay: 24s; }
  .hero__cycle > span:nth-child(14) { animation-delay: 26s; }
  .hero__cycle > span:nth-child(15) { animation-delay: 28s; }
  .hero__cycle > span:nth-child(16) { animation-delay: 30s; }
  .hero__cycle > span:nth-child(17) { animation-delay: 32s; }
  .hero__cycle > span:nth-child(18) { animation-delay: 34s; }
  .hero__cycle > span:nth-child(19) { animation-delay: 36s; }
  .hero__cycle > span:nth-child(20) { animation-delay: 38s; }
  .hero__cycle > span:nth-child(21) { animation-delay: 40s; }
  .hero__cycle > span:nth-child(22) { animation-delay: 42s; }
  .hero__cycle > span:nth-child(23) { animation-delay: 44s; }
  .hero__cycle > span:nth-child(24) { animation-delay: 46s; }
  .hero__cycle > span:nth-child(25) { animation-delay: 48s; }
  .hero__cycle > span:nth-child(26) { animation-delay: 50s; }
  .hero__cycle > span:nth-child(27) { animation-delay: 52s; }
  .hero__cycle > span:nth-child(28) { animation-delay: 54s; }
  .hero__cycle > span:nth-child(29) { animation-delay: 56s; }
  .hero__cycle > span:nth-child(30) { animation-delay: 58s; }
  .hero__cycle > span:nth-child(31) { animation-delay: 60s; }
  .hero__cycle > span:nth-child(32) { animation-delay: 62s; }
  .hero__cycle > span:nth-child(33) { animation-delay: 64s; }
  .hero__cycle > span:nth-child(34) { animation-delay: 66s; }
  .hero__cycle > span:nth-child(35) { animation-delay: 68s; }
  .hero__cycle > span:nth-child(36) { animation-delay: 70s; }
  .hero__cycle small { display: block; font-family: var(--f-mono); font-size: .62em; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-muted); }

  @keyframes hero-cycle {
    0%, 0.4%   { opacity: 0; transform: translateY(.2em); }
    1%, 2.1%   { opacity: 1; transform: none; }
    2.7%, 100% { opacity: 0; transform: translateY(-.2em); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero__cycle > span { animation: none; opacity: 0; }
    .hero__cycle > span:first-child { opacity: 1; }
  }

  .hero__demo { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-3); padding: var(--s-5); }
  .hero__demo .field__input, .hero__demo textarea, .hero__demo select { background: var(--c-surface); }
  .hero__demo textarea { min-height: 6.5rem; font-family: var(--f-ui); }
  .hero__out { margin-top: var(--s-4); padding: var(--s-3); border-left: 3px solid var(--c-accent); background: var(--c-surface); border-radius: 0 var(--r-2) var(--r-2) 0; min-height: 3rem; }
  .hero__meta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); font-size: .85rem; color: var(--c-text-muted); }

  /* ---------- Nutzenversprechen ---------- */
  .props { display: grid; gap: var(--s-6); grid-template-columns: 1fr; counter-reset: prop; }
  @media (min-width: 768px) { .props { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
  .prop { border-top: 2px solid var(--c-accent); padding-top: var(--s-4); }
  .prop__num { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .14em; color: var(--c-text-muted); }
  .prop h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.5rem; letter-spacing: -.01em; margin: var(--s-2) 0; }
  .prop p { color: var(--c-text-muted); margin: 0; }

  /* ---------- Code-Tabs ---------- */
  .tabs { border: 1px solid var(--c-border); border-radius: var(--r-3); overflow: hidden; background: var(--c-surface-2); }
  .tabs__list { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--c-border); background: var(--c-surface); }
  .tabs__tab { appearance: none; border: 0; background: none; min-height: var(--tap); padding-inline: var(--s-4); font-family: var(--f-mono); font-size: .82rem; color: var(--c-text-muted); cursor: pointer; border-bottom: 2px solid transparent; }
  .tabs__tab[aria-selected="true"] { color: var(--c-accent); border-bottom-color: var(--c-accent); }
  .tabs__panel { padding: 0; }
  .tabs__panel pre { margin: 0; padding: var(--s-4); overflow-x: auto; background: none; border: 0; }
  .tabs__panel + .tabs__panel { border-top: 1px solid var(--c-border); }
  .tabs__panel h3 { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; padding: var(--s-3) var(--s-4) 0; color: var(--c-text-muted); }
  .tabs[data-enhanced="true"] .tabs__panel h3 { display: none; }
  .tabs[data-enhanced="true"] .tabs__panel[hidden] { display: none; }
  .tabs[data-enhanced="true"] .tabs__panel + .tabs__panel { border-top: 0; }

  /* ---------- Sprachraster ---------- */
  .langgrid { display: grid; gap: var(--s-2); grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 360px) { .langgrid { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 768px) { .langgrid { grid-template-columns: repeat(4, 1fr); } }
  @media (min-width: 1024px) { .langgrid { grid-template-columns: repeat(6, 1fr); } }
  .langgrid__item { display: flex; flex-direction: column; gap: 2px; min-height: var(--tap); justify-content: center; padding: var(--s-2) var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-2); background: var(--c-surface); color: var(--c-text); text-decoration: none; }
  .langgrid__item:hover { border-color: var(--c-accent); color: var(--c-accent); }
  .langgrid__code { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; color: var(--c-text-muted); }
  .langgrid__name { font-size: .92rem; }

  /* ---------- Preise ---------- */
  .switcher { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-bottom: var(--s-5); }
  .switcher__group { display: flex; border: 1px solid var(--c-border); border-radius: var(--r-2); overflow: hidden; }
  .switcher__group a, .switcher__group button { display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: var(--s-3); background: var(--c-surface); color: var(--c-text-muted); text-decoration: none; border: 0; cursor: pointer; }
  .switcher__group a[aria-current="true"] { background: var(--c-accent); color: var(--c-on-accent); }

  .pricing { display: grid; gap: var(--s-4); grid-template-columns: 1fr; align-items: start; }
  @media (min-width: 1024px) { .pricing { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
  .plan { border: 1px solid var(--c-border); border-radius: var(--r-3); padding: var(--s-5); background: var(--c-surface); display: flex; flex-direction: column; gap: var(--s-3); container-type: inline-size; }
  .plan--featured { border-color: var(--c-accent); box-shadow: var(--shadow-1); position: relative; }
  /* Das Abzeichen kommt entweder als Element (.plan__badge) oder — wenn die Karte
     nur ein data-badge traegt — aus dem Pseudo-Element. Nie beides zugleich. */
  .plan__badge, .plan--featured[data-badge]::before { position: absolute; top: calc(-1 * var(--s-3)); left: var(--s-5); background: var(--c-accent); color: var(--c-on-accent); font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; padding: 2px var(--s-2); border-radius: var(--r-1); }
  .plan--featured[data-badge]::before { content: attr(data-badge); }
  .plan h2 { font-family: var(--f-display); font-weight: 400; font-size: 1.7rem; margin: 0; }
  .plan__price { font-family: var(--f-display); font-size: 2.6rem; line-height: 1; letter-spacing: -.02em; }
  @container (min-width: 24rem) { .plan__price { font-size: 3rem; } }
  .plan__period { font-size: .9rem; color: var(--c-text-muted); }
  .plan__list { display: grid; gap: var(--s-2); font-size: .95rem; }
  .plan__list li { display: grid; grid-template-columns: 1.2em 1fr; gap: var(--s-2); }
  .plan__list li::before { content: "\2713"; color: var(--c-accent); }
  .plan__list li[data-no]::before { content: "\2014"; color: var(--c-text-muted); }
  .plan .button { margin-top: auto; }

  .calc { border: 1px solid var(--c-border); border-radius: var(--r-3); padding: var(--s-5); background: var(--c-surface-2); display: grid; gap: var(--s-4); }
  @media (min-width: 768px) { .calc { grid-template-columns: 1fr 1fr; align-items: end; } }
  .calc__out { display: grid; gap: var(--s-2); }
  .calc__row { display: flex; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-2); border-bottom: 1px solid var(--c-border); }
  .calc__row--best { color: var(--c-accent); font-weight: 600; border-bottom-color: var(--c-accent); }

  .compare { width: 100%; border-collapse: collapse; font-size: .95rem; }
  .compare th, .compare td { text-align: left; padding: var(--s-3) var(--s-2); border-bottom: 1px solid var(--c-border); vertical-align: top; }
  .compare thead th { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-muted); }
  .compare tbody th { font-weight: 600; }
  .compare__scroll { overflow-x: auto; }

  /* ---------- FAQ ---------- */
  .faq { display: grid; gap: 0; max-width: 52rem; }
  .faq__item { border-bottom: 1px solid var(--c-border); padding-block: var(--s-4); }
  .faq__item h3 { font-size: 1.05rem; margin: 0 0 var(--s-2); }
  .faq__item p { margin: 0; color: var(--c-text-muted); }

  /* ---------- Docs ---------- */
  .docs { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
  @media (min-width: 1024px) { .docs { grid-template-columns: 15rem minmax(0, 1fr) 13rem; gap: var(--s-6); } }
  .docs__nav { font-size: .95rem; }
  .docs__nav-title { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-muted); margin-bottom: var(--s-3); }
  .docs__nav a { min-height: var(--tap); display: flex; align-items: center; padding-inline: var(--s-2); border-radius: var(--r-2); color: var(--c-text-muted); text-decoration: none; }
  .docs__nav a:hover { background: var(--c-surface-2); color: var(--c-text); }
  .docs__nav a[aria-current="page"] { color: var(--c-accent); background: var(--c-accent-weak); font-weight: 600; }
  .docs__body { min-width: 0; max-width: 46rem; }
  .docs__body h1 { margin-bottom: var(--s-4); }
  .docs__body h2 { font-family: var(--f-display); font-weight: 400; font-size: 1.7rem; letter-spacing: -.01em; margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--c-border); }
  .docs__body h3 { font-size: 1.1rem; margin-top: var(--s-5); }
  .docs__body p, .docs__body ul, .docs__body ol, .docs__body table, .docs__body pre, .docs__body blockquote { margin-block: var(--s-3); }
  .docs__body ul, .docs__body ol { padding-left: var(--s-5); }
  .docs__body ul li { list-style: disc; }
  .docs__body ol li { list-style: decimal; }
  .docs__body li + li { margin-top: var(--s-1); }
  .docs__body code { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-1); padding: 0 .3em; }
  .docs__body pre { overflow-x: auto; padding: var(--s-4); background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-2); }
  .docs__body pre code { background: none; border: 0; padding: 0; }
  .docs__body blockquote { border-left: 3px solid var(--c-accent); padding-left: var(--s-4); color: var(--c-text-muted); }
  .docs__body table { width: 100%; border-collapse: collapse; }
  .docs__body th, .docs__body td { text-align: left; padding: var(--s-2); border-bottom: 1px solid var(--c-border); }
  .docs__table { overflow-x: auto; }
  .toc { position: sticky; top: 76px; align-self: start; font-size: .9rem; display: none; }
  @media (min-width: 1024px) { .toc { display: block; } }
  .toc h2 { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-muted); margin-bottom: var(--s-2); }
  .toc a { display: block; padding-block: var(--s-1); color: var(--c-text-muted); text-decoration: none; }
  .toc a:hover { color: var(--c-accent); }
  .toc li[data-level="3"] a { padding-left: var(--s-3); }
  .pagenav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--c-border); }

  /* ---------- Sprachpaare ---------- */
  /* Eigener Block statt .langgrid__item: die Uebersicht zaehlt die 36 Sprachkacheln
     ueber jene Klasse, die 141 Paarkacheln duerfen nicht mitzaehlen. */
  .pairgrid { display: grid; gap: var(--s-2); grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 768px) { .pairgrid { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 1024px) { .pairgrid { grid-template-columns: repeat(4, 1fr); } }
  .pairgrid__item { display: flex; flex-direction: column; gap: 2px; min-height: var(--tap); justify-content: center; padding: var(--s-2) var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-2); background: var(--c-surface); color: var(--c-text); text-decoration: none; }
  .pairgrid__item:hover { border-color: var(--c-accent); color: var(--c-accent); }
  .pair { display: grid; gap: var(--s-5); }
  .pair__sample { display: grid; gap: var(--s-4); grid-template-columns: 1fr; margin-block: var(--s-5); }
  @media (min-width: 768px) { .pair__sample { grid-template-columns: 1fr 1fr; } }
  .pair__cell { border: 1px solid var(--c-border); border-radius: var(--r-2); padding: var(--s-4); background: var(--c-surface-2); }
  .pair__cell p { margin: var(--s-2) 0 0; font-size: 1.05rem; }
  .pair__facts { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
  @media (min-width: 768px) { .pair__facts { grid-template-columns: 1fr 1fr; } }

  /* ---------- Status ---------- */
  .status { display: grid; gap: var(--s-5); }
  .status__kpis { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 768px) { .status__kpis { grid-template-columns: repeat(4, 1fr); } }
  .status__value { font-family: var(--f-display); font-size: 2.1rem; line-height: 1.1; }
  .status__dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: var(--c-success); margin-right: var(--s-2); }
  .status__dot--down { background: var(--c-danger); }
  .status__dot--unknown { background: var(--c-warning); }
  .status__chart-title { margin-bottom: var(--s-3); }
  /* Ein Tag je Balken, aelteste links — reine Flaechen, keine Grafikdatei. */
  .status__bars { display: flex; gap: 2px; align-items: flex-end; height: 2.2rem; }
  .status__bars > * { flex: 1 1 0; min-width: 2px; height: 100%; border-radius: 1px; background: var(--c-success); }
  .status__bars > [data-down] { background: var(--c-danger); }
  .status__bars > [data-empty] { background: var(--c-border); }

  /* ---------- Rechtstexte ---------- */
  .legal { max-width: 44rem; }
  .legal h2 { font-family: var(--f-display); font-weight: 400; font-size: 1.6rem; margin-top: var(--s-6); }
  .legal h3 { font-size: 1.05rem; margin-top: var(--s-5); }
  .legal p, .legal ul, .legal ol, .legal table { margin-block: var(--s-3); }
  .legal ul, .legal ol { padding-left: var(--s-5); }
  .legal ul li { list-style: disc; }
  .legal ol li { list-style: decimal; }
  .legal table { width: 100%; border-collapse: collapse; font-size: .95rem; }
  .legal th, .legal td { text-align: left; padding: var(--s-2); border-bottom: 1px solid var(--c-border); vertical-align: top; }

  @media (prefers-color-scheme: dark) {
    .site-header { background: color-mix(in srgb, var(--c-surface) 88%, transparent); }
    .plan--featured { box-shadow: none; }
  }
}