/* Qardo Marketing-Layout (UX-9) -- static/css/marketing-layout.css
   Scoped visuelle Struktur der oeffentlichen Marketingseiten (/, /business,
   /organisationen, /event, /verloren-gefunden). Setzt AUSSCHLIESSLICH auf
   tokens.css auf (kanonische Marke), NICHT auf components.css (der App-
   Betriebs-Oberflaeche) und NICHT mehr auf app.css. Alles ist unter
   body.m-page gescopt, damit nichts in andere Seiten leckt.

    EIN Marke, ZWEI Dichten: Marketing ist grosszuegig/produktgetrieben,
   die App kompakt/aufgabengetrieben. Marken-Zeichen (Webkante, roter
   Versatzschatten am Primaerknopf) stehen in marketing.css. */

/* ---------- Reset/Body ---------- */
body.m-page {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
.m-page *, .m-page *::before, .m-page *::after { box-sizing: border-box; }
.m-page a { color: inherit; }
.m-page img { max-width: 100%; }
.m-page ::selection { background: var(--accent); color: var(--surface); }
.m-page :focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ---------- Skip-Link ---------- */
.m-skip {
  position: absolute; left: var(--space-2); top: var(--space-1);
  transform: translateY(-150%);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-input);
  padding: var(--space-1) var(--space-2); z-index: 60; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
  transition: transform 120ms ease;
}
.m-skip:focus { transform: translateY(0); }

/* ---------- Container ---------- */
.m-page .wrap-wide {
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: max(var(--gutter), 4vw);
}

/* ---------- Header + Navigation ---------- */
.m-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.m-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); min-height: 60px; padding-block: var(--space-1);
}
.m-wordmark {
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  letter-spacing: -.02em; text-decoration: none; color: var(--text); flex-shrink: 0;
  display: inline-flex; align-items: center; min-height: 44px;
}
.m-wordmark .dot { color: var(--accent); }
.m-nav { display: flex; align-items: center; gap: var(--space-1); }
.m-nav__links { display: flex; align-items: center; gap: var(--space-05); list-style: none; margin: 0; padding: 0; }
.m-nav__link {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-input);
  color: var(--text-muted); font-size: .9375rem; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: color 120ms ease, background 120ms ease;
}
.m-nav__link:hover { color: var(--text); background: var(--surface-sunken); }
.m-nav__link[aria-current="page"] { color: var(--text); font-weight: 600; }
.m-nav__actions { display: flex; align-items: center; gap: var(--space-1); }

/* Buttons (Marketing-eigene Basis; Markenschatten am Primaer in marketing.css) */
.m-page .btn, .m-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: 44px; padding: 0 var(--space-3);
  font-family: var(--font-body); font-weight: 600; font-size: .9375rem; line-height: 1;
  border: 1px solid transparent; border-radius: var(--radius-input);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 100ms ease, border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.m-page .btn-primary, .m-btn--primary {
  background: var(--text); color: var(--surface); border-color: var(--text);
}
.m-page .btn-ghost, .m-btn--ghost {
  background: transparent; color: var(--text); border-color: var(--border-strong);
}
.m-page .btn-ghost:hover, .m-btn--ghost:hover { border-color: var(--text-muted); }
.m-page .btn-sm, .m-btn--sm { min-height: 40px; padding: 0 var(--space-2); font-size: .875rem; }
.m-nav__anmelden { color: var(--text); font-weight: 600; text-decoration: none; padding: var(--space-1) var(--space-2); min-height: 40px; display: inline-flex; align-items: center; border-radius: var(--radius-input); }
.m-nav__anmelden:hover { background: var(--surface-sunken); }

/* Menu-Trigger (nur mobil sichtbar) */
.m-menu-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-input); background: var(--surface); color: var(--text); cursor: pointer;
}
.m-menu-toggle svg { width: 22px; height: 22px; }

/* ---------- Typografie ---------- */
.m-page h1, .m-page h2, .m-page h3 { font-family: var(--font-display); letter-spacing: -.02em; text-wrap: balance; margin: 0; }
.m-page h1 { font-weight: 800; font-size: 2.75rem; line-height: 1.08; }
.m-page h2 { font-weight: 800; font-size: 1.9rem; line-height: 1.15; }
.m-page h3 { font-weight: 700; font-size: 1.0625rem; line-height: 1.3; font-family: var(--font-display); }
.m-page p { margin: 0 0 var(--space-2); }
.m-eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: .75rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--space-1);
}
.m-page .lede { color: var(--text-muted); font-size: 1.0625rem; margin: 0 0 var(--space-2); }
.m-page .privacy-note { font-size: .875rem; color: var(--text-muted); }

/* ---------- Karte ---------- */
.m-page .card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-3);
}

/* ---------- Main + Sektionen ---------- */
.m-main { padding-block: var(--space-4) var(--space-6); }
.m-page section.block { border-top: 1px solid var(--border); padding-block: var(--space-5); scroll-margin-top: 76px; }
.m-page section.block > h2 + p { margin-top: var(--space-1); }
.m-page section.block > p { color: var(--text-muted); max-width: 42rem; line-height: 1.6; }
.m-page [id] { scroll-margin-top: 76px; }
.m-page .cta-row { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-top: var(--space-3); }

/* ---------- Hero ---------- */
.m-page .hero { padding-block: var(--space-5) var(--space-4); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--space-5); align-items: center; }
.m-page .hero > div:first-child { max-width: 40rem; }
.m-page .hero h1 { max-width: 22ch; margin-bottom: var(--space-2); }
.m-page .hero .lede { max-width: 34rem; }
.m-page .hero-code { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.m-page .hero-code .card { padding: var(--space-3); }
.m-page .hero-code img { display: block; width: 11rem; height: 11rem; }
.m-page .hero-code .caption { font-family: var(--font-display); font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); text-align: center; }

/* Detailseiten-Hero (Business/Event/Orga/L&F): eine gemeinsame Klasse */
.m-page .biz-hero, .m-page .org-hero, .m-page .ev-hero, .m-page .lf-hero { padding-block: var(--space-5) var(--space-4); }
.m-page .biz-hero h1, .m-page .org-hero h1, .m-page .ev-hero h1, .m-page .lf-hero h1 { font-size: 2.25rem; line-height: 1.1; margin-bottom: var(--space-2); max-width: 24ch; }
.m-page .biz-hero .lede, .m-page .org-hero .lede, .m-page .ev-hero .lede, .m-page .lf-hero .lede { max-width: 42rem; }

/* ---------- Steps (So funktioniert's) ---------- */
.m-page .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-2); margin: var(--space-2) 0 var(--space-4); }
.m-page .step { padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.m-page .step .num { font-family: var(--font-display); font-weight: 800; color: var(--accent); font-size: .875rem; margin-bottom: var(--space-1); }
.m-page .step h3 { margin: 0 0 var(--space-1); }
.m-page .step p { color: var(--text-muted); margin: 0; font-size: .9375rem; line-height: 1.5; }

/* ---------- Anwendungsfaelle (Typen) ---------- */
.m-page .types { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.m-page .type-card { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-05); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.m-page .type-ic { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: var(--radius-input); background: var(--accent-bg); color: var(--accent); margin-bottom: var(--space-05); }
.m-page .type-ic svg { width: 1.375rem; height: 1.375rem; }
.m-page .type-card h3 { margin: 0; }
.m-page .type-lead { font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--text); margin: .1rem 0 0; }
.m-page .type-desc { color: var(--text-muted); font-size: .9rem; line-height: 1.45; margin: .15rem 0 0; }
.m-page .type-more { align-self: flex-start; margin-top: auto; padding-top: var(--space-1); font-family: var(--font-display); font-size: .75rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.m-page .type-more:hover { text-decoration: underline; }
.m-page .type-badge { align-self: flex-start; font-family: var(--font-display); font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; padding: .15rem .5rem; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); margin-top: .1rem; }
.m-page .type-card--soon .type-ic { background: var(--neutral-bg); color: var(--text-muted); }
.m-page .types-cta { text-align: center; margin-top: var(--space-4); }
.m-page .types-cta p { color: var(--text-muted); max-width: 34rem; margin: 0 auto var(--space-2); }
.m-page .types-more { text-align: center; margin-inline: auto; margin-top: var(--space-3); font-size: .9375rem; color: var(--text-muted); }
.m-page .types-more a { color: var(--accent); font-weight: 600; text-decoration: none; }

/* ---------- Für-Unternehmen-Teaser ---------- */
.m-page .m-b2b { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); align-items: center; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); }
.m-page .m-b2b p { color: var(--text-muted); max-width: 46rem; margin: var(--space-1) 0 0; }

/* ---------- Preise ---------- */
.m-page .m-price { display: grid; grid-template-columns: minmax(0,22rem); gap: var(--space-2); margin-top: var(--space-3); }
.m-page .m-price__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); }
.m-page .m-price__tag { font-family: var(--font-display); font-weight: 800; font-size: 2rem; letter-spacing: -.02em; }
.m-page .m-price__list { list-style: none; margin: var(--space-2) 0; padding: 0; }
.m-page .m-price__list li { color: var(--text-muted); padding-left: 1.4rem; position: relative; margin-bottom: var(--space-05); }
.m-page .m-price__list li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 700; }

/* ---------- Trust-Zone ---------- */
.m-page .m-trust__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem,1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.m-page .m-trust__item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-3); }
.m-page .m-trust__item h3 { margin: 0 0 var(--space-1); }
.m-page .m-trust__item p { color: var(--text-muted); font-size: .9375rem; line-height: 1.55; margin: 0; max-width: none; }

/* ---------- Tabellen / Listen (Detailseiten) ---------- */
.m-page .vergleich, .m-page .case-table { width: 100%; border-collapse: collapse; margin-top: var(--space-2); font-size: .9375rem; }
.m-page .vergleich th, .m-page .vergleich td, .m-page .case-table th, .m-page .case-table td { text-align: left; padding: var(--space-1) var(--space-1) var(--space-1) 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.m-page .vergleich th, .m-page .case-table th { font-family: var(--font-display); font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; }
.m-page .vergleich td:first-child { font-weight: 600; width: 34%; }
.m-page .case-table td:first-child { font-weight: 600; width: 40%; }
.m-page .groups { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.m-page .group { padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.m-page .group h3 { margin: 0 0 var(--space-1); font-size: 1rem; }
.m-page .group ul { list-style: none; padding: 0; margin: 0; }
.m-page .group li { color: var(--text-muted); font-size: .9rem; line-height: 1.5; padding-left: 1rem; position: relative; margin: 0 0 .3rem; }
.m-page .group li::before { content: "–"; position: absolute; left: 0; color: var(--accent); }
.m-page .group p { color: var(--text-muted); font-size: .9rem; line-height: 1.5; margin: 0; max-width: none; }
.m-page .plain { list-style: none; padding: 0; margin: var(--space-2) 0 0; max-width: 42rem; }
.m-page .plain li { color: var(--text-muted); font-size: 1rem; line-height: 1.5; padding-left: 1.4rem; position: relative; margin: 0 0 var(--space-1); }
.m-page .plain li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.m-page .honest { background: var(--surface-sunken); border-radius: var(--radius-lg); padding: var(--space-3); margin-top: var(--space-2); }
.m-page .honest p { margin: 0; max-width: none; line-height: 1.6; color: var(--text-muted); }
.m-page .faq { margin-top: var(--space-2); }
.m-page .faq details { border-bottom: 1px solid var(--border); }
.m-page .faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) 0; }
.m-page .faq summary::-webkit-details-marker { display: none; }
.m-page .faq summary::after { content: "+"; color: var(--accent); font-weight: 700; flex-shrink: 0; font-size: 1.15em; line-height: 1.1; }
.m-page .faq details[open] summary::after { content: "\2212"; }
.m-page .faq details p { margin: 0 0 var(--space-2); color: var(--text-muted); max-width: 42rem; line-height: 1.6; }

/* ---------- Footer ---------- */
.m-footer { border-top: 1px solid var(--border); background: var(--surface); }
.m-footer__inner { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--space-3); padding-block: var(--space-5) var(--space-4); }
.m-footer__brand .m-wordmark { font-size: 1.05rem; }
.m-footer__tagline { color: var(--text-muted); font-size: .875rem; margin-top: var(--space-1); max-width: 22rem; }
.m-footer__col h2 { font-family: var(--font-display); font-size: .6875rem; font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: 0 0 var(--space-1); }
.m-footer__col ul { list-style: none; margin: 0; padding: 0; }
.m-footer__col li { margin-bottom: var(--space-05); }
.m-footer__col a { color: var(--text-muted); text-decoration: none; font-size: .9rem; }
.m-footer__col a:hover { color: var(--text); text-decoration: underline; text-underline-offset: .15em; }
.m-footer__legal { border-top: 1px solid var(--border); padding-block: var(--space-2); font-size: .8125rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; }
.m-footer__legal a { color: var(--text-muted); text-underline-offset: .15em; }
.m-footer__legal a:hover { color: var(--text); }
/* UX-12: Fußzeilen-Links mit dem Finger treffbar (44 px), am Desktop
   unverändert dicht. */
@media (pointer: coarse), (max-width: 40rem) {
  .m-footer__col li { margin-bottom: 0; }
  .m-footer__col a,
  .m-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .m-page .type-more { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 60rem) {
  .m-page .types, .m-page .groups { grid-template-columns: repeat(2, 1fr); }
  .m-footer__inner { grid-template-columns: 1fr 1fr; }

  /* Die Navigation klappt HIER zusammen, nicht erst bei 48rem.
     Gemessen am 12.10.2026 gegen die echte Seite: Wortmarke plus die sechs
     Eintraege brauchen zusammen 925 px. Der Umbruchpunkt lag bei 48rem
     (768 px) -- dazwischen, von 769 bis 924 px, war der Kopf breiter als
     das Fenster, die Navigation rechts abgeschnitten und die GANZE Seite
     seitlich scrollbar. Gemeldet fuer Safari, gemessen in WebKit UND
     Chromium mit identischen Zahlen: kein Engine-Fehler, ein Spalt im
     Umbruchpunkt.
     60 rem = 960 px bei Standardschrift, also 35 px Luft. Der Wert ist
     hier schon in Gebrauch (Kacheln, Fusszeile), und weil er in rem steht,
     waechst er mit einer groesseren Schriftgroesse mit -- genau wie der
     Platzbedarf der Navigation. */
  .m-nav__links { display: none; }
  .m-menu-toggle { display: inline-flex; }
  /* Aufgeklapptes Menue: einfache Offenlegung unter dem Header */
  .m-nav[data-open="true"] .m-nav__links {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: var(--space-2) max(var(--gutter), 4vw); gap: var(--space-05);
    box-shadow: var(--shadow-overlay);
  }
  .m-nav[data-open="true"] .m-nav__link { min-height: 44px; }
  .m-header__bar { position: relative; }
}
@media (max-width: 48rem) {
  /* Die Navigation steht nicht mehr hier, sondern im 60rem-Block darueber
     (Begruendung dort). Was hier bleibt, betrifft nur das Seitenlayout. */
  .m-page .hero { grid-template-columns: 1fr; text-align: center; gap: var(--space-3); padding-block: var(--space-4) var(--space-2); }
  .m-page .hero > div:first-child { max-width: none; }
  .m-page .hero h1 { font-size: 2rem; max-width: none; }
  .m-page .hero .lede { max-width: none; }
  .m-page .cta-row { justify-content: center; }
  .m-page .m-b2b { grid-template-columns: 1fr; text-align: left; }
}
@media (max-width: 40rem) {
  .m-page .types, .m-page .groups { grid-template-columns: 1fr; }
  .m-footer__inner { grid-template-columns: 1fr; }
  .m-page h1 { font-size: 2rem; }
  .m-page h2 { font-size: 1.5rem; }
  .m-page .biz-hero h1, .m-page .org-hero h1, .m-page .ev-hero h1, .m-page .lf-hero h1 { font-size: 1.75rem; line-height: 1.18; max-width: none; }
  .m-page .cta-row { flex-direction: column; align-items: stretch; }
  .m-page .cta-row .btn { width: 100%; }
  /* Vergleichs-/Wechsel-Tabellen vertikal mit Mono-Labels */
  .m-page .vergleich, .m-page .vergleich tbody, .m-page .vergleich tr, .m-page .vergleich td,
  .m-page .case-table, .m-page .case-table tbody, .m-page .case-table tr, .m-page .case-table td { display: block; width: auto; }
  .m-page .vergleich thead, .m-page .case-table thead { display: none; }
  .m-page .vergleich tr, .m-page .case-table tr { border-bottom: 1px solid var(--border); padding: var(--space-2) 0; }
  .m-page .vergleich tr:last-child, .m-page .case-table tr:last-child { border-bottom: none; }
  .m-page .vergleich td, .m-page .case-table td { border-bottom: none; padding: 0; }
  .m-page .vergleich td:first-child, .m-page .case-table td:first-child { font-weight: 600; font-size: 1rem; width: auto; margin-bottom: var(--space-1); }
  .m-page .vergleich td:nth-child(2), .m-page .vergleich td:nth-child(3), .m-page .case-table td:nth-child(2) { color: var(--text-muted); }
  .m-page .vergleich td:nth-child(3) { margin-top: var(--space-1); }
}

@media (prefers-reduced-motion: reduce) {
  .m-page *, .m-page *::before, .m-page *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Kleine Utilities (ersetzen ehemalige Inline-Styles, UX-9) ---------- */
.m-page .m-link-accent { color: var(--accent); font-weight: 600; text-decoration: none; }
.m-page .m-link-accent:hover { text-decoration: underline; }
.m-page .m-muted { color: var(--text-muted); }
.m-page .m-mt-2 { margin-top: var(--space-2); }
.m-page .m-mt-3 { margin-top: var(--space-3); }