/* Erzeugt aus marketing/marketing.css mit node marketing/tools/build-site.mjs. Hier nicht ändern. */
/* Fore Friends · Marketing
   Gemeinsame Bausteine für die Webseite (public/start.html) und die Werbegrafiken
   (marketing/vorlagen/). Setzt css/tokens.css voraus: Farben, Ecken, Schatten und
   Schriftgrößen kommen von dort. Hier stehen nur die Werte, die es in der App nicht
   gibt (Rasenstreifen, große Titel), und die Bausteine, die jede Grafik braucht.
   Regeln dazu: marketing/README.md. Schriften bindet jede Seite selbst ein
   (andere Pfade für Webseite und Vorlagen). */

:root {
    /* Rasen: die Streifen aus den App-Store-Grafiken, schräg mit 118° */
    --mk-course-a: #1a5232;
    --mk-course-b: #1f5d39;
    --mk-course-glow: rgba(31, 93, 57, 0.45);  /* grüner Schein unter dunklen Flächen */
    --mk-vignette: rgba(0, 0, 0, 0.55);        /* Abdunklung zum Rand, damit Text und Telefone tragen */
    --mk-stripe: 40px;                         /* Breite eines Streifens; große Formate setzen mehr */

    /* Große Titel (Bebas), über der App-Skala bis --fs-52 */
    --mk-display-64: 4.44rem;
    --mk-display-80: 5.56rem;
    --mk-display-96: 6.67rem;

    /* Einleitung unter dem Titel (Inter) */
    --mk-lead: 1.39rem;      /* 20px */
    --mk-lead-lg: 1.67rem;   /* 24px */

    /* Telefonrahmen */
    --mk-phone-frame: linear-gradient(160deg, var(--border-check) 0%, var(--raised) 35%, var(--bg) 100%);
    --mk-phone-edge: var(--glass-edge);
}

/* Hintergrund: Rasenstreifen mit Vignette (hell, für Titelgrafiken) */
.mk-course {
    background:
        radial-gradient(90% 80% at 50% 40%, transparent 0%, var(--mk-vignette) 100%),
        repeating-linear-gradient(118deg, var(--mk-course-a) 0 var(--mk-stripe), var(--mk-course-b) var(--mk-stripe) calc(2 * var(--mk-stripe)));
}

/* Hintergrund: dunkel, Rasen nur als Schein am Rand (für Text und Listen) */
.mk-dark {
    background:
        radial-gradient(90% 45% at 50% 100%, var(--mk-course-glow) 0%, transparent 70%),
        var(--bg);
}

/* Schrift */
.mk-kicker {
    font-family: var(--font-text);
    font-size: var(--fs-12);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
}
.mk-title {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-strong);
    text-wrap: balance;
}
.mk-lead {
    font-family: var(--font-text);
    font-size: var(--mk-lead);
    line-height: 1.45;
    color: var(--on-photo);
}
.mk-lead b { color: var(--text-strong); font-weight: 700; }

/* Wortmarke: Bildmarke + FORE FRIENDS in Bebas, weit gesperrt */
.mk-brand { display: inline-flex; align-items: center; gap: var(--space-12); color: var(--text-strong); text-decoration: none; }
.mk-brand img { width: 2.5em; height: 2.5em; }
.mk-brand span { font-family: var(--font-display); letter-spacing: 0.1em; line-height: 1; }

/* Merkmale als Pillen, höchstens drei in einer Grafik */
.mk-chips { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.mk-chip {
    display: inline-flex; align-items: center; gap: var(--space-7);
    padding: var(--space-8) var(--space-12);
    border-radius: var(--radius-pill);
    font-family: var(--font-text); font-size: var(--fs-13); font-weight: 600;
    color: var(--text);
    background: var(--glass);
    border: 1px solid var(--glass-edge);
}
.mk-chip svg { width: 1.15em; height: 1.15em; color: var(--accent); flex-shrink: 0; }

/* iPhone-Rahmen um einen echten Bildschirm der App (marketing/shots/) */
.mk-phone {
    --w: 252px;
    width: var(--w);
    padding: calc(var(--w) * 0.028);
    border-radius: calc(var(--w) * 0.183);
    background: var(--mk-phone-frame);
    box-shadow: inset 0 0 0 1.5px var(--mk-phone-edge), var(--shadow-pop);
}
.mk-phone img { display: block; width: 100%; height: auto; border-radius: calc(var(--w) * 0.155); }