/*
 * STARTPLATZ Summer 26 Design System (Editorial-Stil)
 * Style Guide: knowledge/04-marketing/strategie-und-brand/design-system/design-system-startplatz.md
 *
 * Standalone. Loads WITHOUT Tailwind, Bootstrap or Alpine.
 * WordPress:  header-summer26.php  ->  <link rel="stylesheet" href="/css/sp-summer26.css">
 * Symfony:    einbindbar als CSS-Template (reines CSS, framework-agnostisch)
 *
 * Komponenten-Präfix: .sp- (bleibt versionsübergreifend stabil)   |   Interaktivität: /js/sp-summer26.js (vanilla)
 * Keine !important-Overrides — die Klassen tragen den Stil direkt.
 */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  --sp-green:      #7ab800;
  --sp-green-dark: #5a8a00;
  --sp-blue:       #0080bb;
  --sp-blue-dark:  #006699;
  --sp-gray:       #525459;
  --sp-graphit:    #2a2c30;
  --sp-warm:       #f3f1ec;
  --sp-gray-light: #f5f6f7;
  --sp-gray-mid:   #e2e3e5;
  --sp-white:      #ffffff;

  --sp-serif: 'Source Han Sans KR','Noto Sans KR','Source Sans Pro',sans-serif;
  --sp-sans:  'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  --sp-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --sp-maxw:     1280px;   /* Content-Breite */
  --sp-maxw-narrow: 768px; /* Prose / FAQ */
  --sp-radius:   6px;
  --sp-radius-sm: 4px;
  --sp-border:   1px solid var(--sp-gray-mid);
  --sp-pad-x:    clamp(20px, 5vw, 32px);
  --sp-pad-y:    clamp(48px, 7vw, 96px);
  --sp-gap:      24px;
}

/* ============================================================
   2. BASE / RESET
   ============================================================ */
.sp-page * { box-sizing: border-box; }
.sp-page {
  margin: 0;
  font-family: var(--sp-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--sp-gray);
  background: var(--sp-white);
  -webkit-font-smoothing: antialiased;
}
.sp-page img { max-width: 100%; display: block; }
.sp-page a { text-decoration: none; }
/* Basis-Linkfarbe NUR für unklassierte Links — Komponenten (.sp-btn, .sp-nav__*, .sp-link …) tragen ihre eigene Farbe */
.sp-page a:not([class]) { color: var(--sp-green); }
.sp-page a:not([class]):hover { opacity: 0.7; }

/* ============================================================
   3. TYPOGRAPHIE
   ============================================================ */
.sp-eyebrow {
  font-family: var(--sp-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sp-green-dark);
  margin: 0 0 12px;
}
.sp-h1, .sp-h2, .sp-h3 {
  font-family: var(--sp-serif);
  font-weight: 700;
  color: var(--sp-graphit);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 0.5em;
}
.sp-h1 { font-size: clamp(40px, 5.5vw, 72px); max-width: 18ch; }
.sp-h2 { font-size: clamp(28px, 3.5vw, 44px); max-width: 22ch; margin-bottom: clamp(24px, 3vw, 40px); }
.sp-h3 { font-size: clamp(20px, 2.2vw, 26px); }
/* Display-Schrift (Source Han Sans KR) hat keine echte Kursive — Akzentwoerter aufrecht statt synthetisch schraeg */
.sp-h1 em, .sp-h2 em, .sp-h3 em, .sp-h1 i, .sp-h2 i, .sp-h3 i,
.sp-upcoming-card__title em, .sp-upcoming-card__title i { font-style: normal; }
.sp-lead { font-size: clamp(18px, 2vw, 22px); line-height: 1.5; color: var(--sp-gray); max-width: 48ch; margin: 0 0 1.5em; }
.sp-prose { max-width: 60ch; }
.sp-prose p { margin: 0 0 1.1em; font-size: 18px; }
.sp-prose p:last-child { margin-bottom: 0; }

/* ============================================================
   4. LAYOUT-PRIMITIVE
   ============================================================ */
.sp-container { max-width: var(--sp-maxw); margin: 0 auto; padding: 0 var(--sp-pad-x); }

.sp-section { padding: var(--sp-pad-y) 0; background: var(--sp-white); color: var(--sp-graphit); }
.sp-section--warm { background: var(--sp-warm); }
.sp-section--dark { background: var(--sp-graphit); color: var(--sp-white); }
.sp-section--dark .sp-h1, .sp-section--dark .sp-h2, .sp-section--dark .sp-h3 { color: var(--sp-white); }
.sp-section--dark .sp-eyebrow { color: var(--sp-green); }
.sp-section--dark .sp-prose { color: rgba(255,255,255,0.82); }

.sp-grid { display: grid; gap: clamp(16px, 2.5vw, 32px); }
.sp-grid-2 { grid-template-columns: repeat(2, 1fr); }
.sp-grid-3 { grid-template-columns: repeat(3, 1fr); }
.sp-grid-4 { grid-template-columns: repeat(4, 1fr); }
.sp-grid-auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ============================================================
   5. NAVIGATION (Header) — Dropdowns via CSS-Hover (Desktop) + JS .is-open (Touch/Mobile)
   ============================================================ */
.sp-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--sp-white); color: var(--sp-graphit);
  border-bottom: var(--sp-border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.sp-nav__inner { max-width: var(--sp-maxw); margin: 0 auto; padding: 0 var(--sp-pad-x); min-height: 64px; display: flex; align-items: center; gap: 12px; }
.sp-nav__logo { flex-shrink: 0; }
.sp-nav__logo img { height: 28px; width: auto; display: block; }
.sp-nav__toggle { display: none; margin-left: auto; background: none; border: 0; cursor: pointer; padding: 8px; color: var(--sp-graphit); }
.sp-page--has-fixed-nav { padding-top: 64px; }

.sp-nav__links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0 auto; padding: 0; }
.sp-nav__item { position: relative; }
.sp-nav__link, .sp-nav__trigger {
  display: inline-flex; align-items: center; gap: 4px; line-height: 1; white-space: nowrap;
  font-family: var(--sp-sans); font-weight: 600; font-size: 15px; color: var(--sp-graphit);
  background: none; border: 0; cursor: pointer; padding: 8px 10px; border-radius: 6px;
}
.sp-nav__link:hover, .sp-nav__trigger:hover { color: var(--sp-green); opacity: 1; }
.sp-nav__caret { width: 12px; height: 12px; transition: transform 0.15s; }
.sp-nav__item.is-open .sp-nav__caret { transform: rotate(180deg); }
.sp-nav__item--active > .sp-nav__link, .sp-nav__item--active > .sp-nav__trigger { box-shadow: inset 0 -3px 0 var(--sp-green); }

/* Dropdown-Panel */
.sp-nav__menu {
  display: none; position: absolute; top: 100%; left: 0; min-width: 220px;
  background: var(--sp-white); border: var(--sp-border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1); padding: 6px; z-index: 60;
}
.sp-nav__menu--right { left: auto; right: 0; }
.sp-nav__item:hover > .sp-nav__menu,
.sp-nav__item.is-open > .sp-nav__menu { display: block; }
.sp-nav__menu a { display: block; padding: 8px 12px; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--sp-gray); white-space: nowrap; }
.sp-nav__menu a:hover { background: var(--sp-warm); color: var(--sp-graphit); opacity: 1; }
.sp-nav__menu a.is-strong { font-weight: 700; color: var(--sp-graphit); }
.sp-nav__sep { height: 1px; background: var(--sp-gray-mid); margin: 6px 0; border: 0; }

/* AI Academy Pill (extern) */
.sp-nav__pill { display: inline-block; padding: 7px 14px; border-radius: 8px; background: #8e56ff; color: #fff; font-weight: 600; font-size: 14px; white-space: nowrap; }
.sp-nav__pill:hover { background: #7a3fff; color: #fff; opacity: 1; }

/* Sprachumschalter */
.sp-nav__lang > .sp-nav__trigger { padding: 8px; }
.sp-nav__lang .sp-nav__menu { min-width: auto; }
.sp-nav__lang .sp-nav__menu a { padding: 6px 10px; }
.sp-nav__lang img { height: 18px; display: block; }

/* Login / User */
.sp-nav__login { display: inline-block; padding: 8px 16px; border-radius: 6px; background: var(--sp-green); color: #fff; font-weight: 700; font-size: 14px; white-space: nowrap; }
.sp-nav__login:hover { background: var(--sp-green-dark); color: #fff; opacity: 1; }
.sp-nav__avatar { width: 38px; height: 38px; border-radius: 999px; overflow: hidden; border: 0; background: var(--sp-gray-mid); cursor: pointer; padding: 0; }
.sp-nav__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Sub-Navigation (sticky, in-page) */
.sp-subnav { position: sticky; top: 64px; z-index: 40; background: var(--sp-white); border-bottom: var(--sp-border); }
.sp-subnav__inner { max-width: var(--sp-maxw); margin: 0 auto; padding: 0 var(--sp-pad-x); display: flex; gap: 24px; height: 48px; align-items: center; overflow-x: auto; }
.sp-subnav a { font-family: var(--sp-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sp-gray); white-space: nowrap; }
.sp-subnav a.is-active { color: var(--sp-green); font-weight: 700; }

/* ============================================================
   5b. FOOTER (dunkel, 4 Spalten)
   ============================================================ */
.sp-footer { background: var(--sp-graphit); color: #fff; padding: clamp(48px, 7vw, 64px) 0 32px; }
.sp-footer__inner { max-width: var(--sp-maxw); margin: 0 auto; padding: 0 var(--sp-pad-x); }
.sp-footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-bottom: 40px; }
.sp-footer__col h2 { font-family: var(--sp-sans); font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 16px; }
.sp-footer__about { color: rgba(255,255,255,0.7); margin: 0 0 20px; }
.sp-footer__social { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; }
.sp-footer__social a { width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: #fff; }
.sp-footer__social a:hover { background: rgba(255,255,255,0.2); opacity: 1; }
.sp-footer__social svg { width: 18px; height: 18px; fill: currentColor; }
.sp-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sp-footer__links a { color: rgba(255,255,255,0.6); font-size: 15px; display: inline-flex; gap: 8px; }
.sp-footer__links a:hover { color: #fff; opacity: 1; }
.sp-footer__contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.sp-footer__contact strong { display: block; color: #fff; margin: 0 0 4px; }
.sp-footer__contact small { color: rgba(255,255,255,0.7); font-size: 13px; line-height: 1.5; display: block; }
.sp-footer__news p { color: rgba(255,255,255,0.7); font-size: 14px; margin: 0 0 12px; }
.sp-footer__copy { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px; text-align: center; color: rgba(255,255,255,0.5); font-size: 14px; }

/* ============================================================
   6. HERO
   ============================================================ */
.sp-hero {
  position: relative;
  padding: clamp(80px, 10vw, 130px) 0 clamp(50px, 7vw, 80px);
  background: var(--sp-warm);
  color: var(--sp-graphit);
}
.sp-hero--photo {
  background:
    linear-gradient(110deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.88) 50%, rgba(243,241,236,0.78) 100%),
    var(--sp-hero-img, none) center / cover no-repeat;
}
.sp-hero .sp-h1 { color: var(--sp-graphit); }
.sp-hero__sub { font-size: clamp(18px, 2vw, 24px); font-weight: 600; color: var(--sp-gray); max-width: 38ch; margin: 0 0 2em; }
.sp-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 1em; }

/* ============================================================
   7. BUTTONS / LINKS / BADGES
   ============================================================ */
.sp-btn {
  display: inline-block;
  background: var(--sp-green); color: var(--sp-white);
  font-family: var(--sp-sans); font-weight: 700; font-size: 16px;
  padding: 14px 28px; border: 0; border-radius: var(--sp-radius-sm);
  letter-spacing: 0.02em; cursor: pointer; transition: opacity 0.15s;
}
.sp-btn:hover { opacity: 0.85; color: var(--sp-white); }
.sp-btn--ghost { background: var(--sp-white); color: var(--sp-graphit); border: var(--sp-border); }
.sp-btn--ghost:hover { color: var(--sp-graphit); border-color: var(--sp-gray); }

.sp-link { color: var(--sp-green); font-weight: 700; }
.sp-link--arrow::after { content: " →"; }

.sp-badge {
  display: inline-block;
  font-family: var(--sp-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sp-green); background: var(--sp-white);
  border: var(--sp-border); border-radius: 999px; padding: 6px 16px;
}
.sp-tag {
  display: inline-block;
  font-family: var(--sp-mono); font-size: 12px; color: var(--sp-gray);
  border: var(--sp-border); border-radius: 999px; padding: 3px 12px;
}

/* ============================================================
   8. STAT-GRID (Trust Bar)
   ============================================================ */
.sp-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: clamp(32px, 5vw, 64px); }
.sp-stat { background: var(--sp-white); border: var(--sp-border); border-radius: var(--sp-radius); padding: 16px; text-align: center; }
.sp-stat__num { font-family: var(--sp-mono); font-size: 22px; font-weight: 700; color: var(--sp-graphit); }
.sp-stat__label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sp-gray); margin-top: 4px; }

/* ============================================================
   9. CARDS
   ============================================================ */
.sp-card {
  background: var(--sp-warm); border: var(--sp-border); border-radius: var(--sp-radius);
  padding: 24px; display: flex; flex-direction: column;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.sp-card--link:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-2px); }
.sp-card .sp-h3 { margin-bottom: 0.4em; }
.sp-card p { margin: 0 0 1em; }
.sp-card__foot { margin-top: auto; }

/* Farbvarianten (solide Akzentkarten) */
.sp-card--green { background: var(--sp-green); border-color: var(--sp-green); color: var(--sp-white); }
.sp-card--blue  { background: var(--sp-blue);  border-color: var(--sp-blue);  color: var(--sp-white); }
.sp-card--dark  { background: var(--sp-graphit); border-color: var(--sp-graphit); color: var(--sp-white); }
.sp-card--green .sp-h3, .sp-card--blue .sp-h3, .sp-card--dark .sp-h3 { color: var(--sp-white); }
.sp-card--green .sp-eyebrow, .sp-card--blue .sp-eyebrow, .sp-card--dark .sp-eyebrow { color: rgba(255,255,255,0.75); }
.sp-card--green a, .sp-card--blue a, .sp-card--dark a { color: var(--sp-white); font-weight: 700; }

/* Number-Step (Card mit Nummern-Badge) */
.sp-step { display: flex; gap: 16px; align-items: flex-start; }
.sp-num {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sp-green); color: var(--sp-white);
  font-family: var(--sp-mono); font-weight: 700; font-size: 18px;
}
.sp-num--blue { background: var(--sp-blue); }
.sp-num--dark { background: var(--sp-graphit); }
.sp-num--green-dark { background: var(--sp-green-dark); }

/* Label-Paar (Problem / Nutzen) */
.sp-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sp-gray); margin: 0 0 4px; }

/* Dozenten-Avatar (Initialen) */
.sp-avatar {
  width: 72px; height: 72px; border-radius: 999px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sp-gray); color: var(--sp-white);
  font-family: var(--sp-mono); font-weight: 700; font-size: 22px;
}
.sp-avatar--green { background: var(--sp-green); }
.sp-avatar--blue  { background: var(--sp-blue); }
.sp-role { font-family: var(--sp-mono); font-size: 13px; color: var(--sp-green); margin: 0 0 12px; }

/* ============================================================
   10. QUOTE / TESTIMONIAL
   ============================================================ */
.sp-quote { border-left: 4px solid var(--sp-green); padding-left: 16px; margin: 0 0 16px; }
.sp-quote--blue { border-left-color: var(--sp-blue); }
.sp-quote p { font-style: italic; color: var(--sp-gray); margin: 0; }
.sp-cite { font-family: var(--sp-mono); font-size: 13px; font-weight: 700; color: var(--sp-graphit); margin: 0; }
.sp-cite--role { font-weight: 400; color: var(--sp-gray); font-size: 12px; }

/* ============================================================
   11. FAQ (Vanilla Accordion)
   ============================================================ */
.sp-faq-list { max-width: var(--sp-maxw-narrow); display: flex; flex-direction: column; gap: 12px; }
.sp-faq { border: var(--sp-border); border-left: 6px solid var(--sp-green); border-radius: var(--sp-radius); background: var(--sp-white); overflow: hidden; }
.sp-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--sp-sans); font-size: 16px; font-weight: 600; color: var(--sp-graphit); }
.sp-faq__icon { flex-shrink: 0; width: 20px; height: 20px; transition: transform 0.2s; }
.sp-faq[aria-expanded="true"] .sp-faq__icon { transform: rotate(180deg); }
.sp-faq__a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.sp-faq__a-inner { padding: 0 20px 18px; color: var(--sp-gray); }

/* ============================================================
   12. BANNER / FINAL CTA
   ============================================================ */
.sp-banner { background: var(--sp-warm); border-top: var(--sp-border); border-bottom: var(--sp-border); padding: clamp(40px, 6vw, 64px) 0; }
.sp-banner__inner { max-width: var(--sp-maxw-narrow); margin: 0 auto; padding: 0 var(--sp-pad-x); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }

.sp-cta { border: var(--sp-border); border-radius: var(--sp-radius); background: var(--sp-warm); padding: clamp(32px, 5vw, 56px); text-align: center; }
.sp-cta .sp-h2 { max-width: none; margin-left: auto; margin-right: auto; }
.sp-cta .sp-lead { margin-left: auto; margin-right: auto; }
.sp-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ============================================================
   13. UPCOMING-CARDS (Event-Seiten)
   ============================================================ */
.sp-upcoming-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.sp-upcoming-card { background: var(--sp-warm); border: var(--sp-border); border-radius: var(--sp-radius); overflow: hidden; display: flex; flex-direction: column; color: var(--sp-graphit); transition: box-shadow 0.18s, transform 0.18s; }
.sp-upcoming-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-2px); opacity: 1; }
.sp-upcoming-card__img { aspect-ratio: 16/9; background: var(--sp-gray-mid) center/cover; }
.sp-upcoming-card__body { padding: 20px 24px 24px; }
.sp-upcoming-card__meta { font-family: var(--sp-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--sp-gray); margin-bottom: 8px; }
.sp-upcoming-card__title { font-family: var(--sp-serif); font-weight: 700; font-size: 22px; color: var(--sp-graphit); margin: 0 0 8px; line-height: 1.2; }

/* ============================================================
   14. JS-INJIZIERTE ELEMENTE (Bild-Strip / Featured)
   ============================================================ */
.sp-image-strip { background: var(--sp-white); }
.sp-image-strip__inner { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 4px; }
.sp-image-strip__item { aspect-ratio: 4/3; background-size: cover; background-position: center; position: relative; }
.sp-image-strip__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.25) 100%); }
.sp-featured { display: block; margin: var(--sp-pad-y) auto; max-width: var(--sp-maxw); width: 100%; height: clamp(280px, 30vw, 420px); background-size: cover; background-position: center; border-radius: var(--sp-radius-sm); }

/* ============================================================
   15. UTILITIES (minimal, eigene)
   ============================================================ */
.sp-stack > * + * { margin-top: 1rem; }
.sp-mt-lg { margin-top: clamp(24px, 4vw, 40px); }
.sp-center { text-align: center; }
[hidden] { display: none !important; } /* einzige Ausnahme: a11y-Helper */

/* ============================================================
   16. RESPONSIVE
   ============================================================ */
@media (min-width: 640px) {
  .sp-stat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .sp-stat-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 860px) {
  .sp-grid-2, .sp-grid-3, .sp-grid-4 { grid-template-columns: 1fr; }
  .sp-image-strip__inner { grid-template-columns: 1fr; }
  .sp-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .sp-footer__grid { grid-template-columns: 1fr; }
  .sp-footer__contact-grid { grid-template-columns: 1fr; }
}

/* Mobile-Nav (Burger): Nav ist breit -> bei 980px einklappen */
@media (max-width: 980px) {
  .sp-nav__toggle { display: block; }
  .sp-nav__links {
    display: none; position: absolute; top: 64px; left: 0; right: 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--sp-white); border-top: var(--sp-border); border-bottom: var(--sp-border);
    padding: 8px var(--sp-pad-x); max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .sp-nav__links.is-open { display: flex; }
  .sp-nav__item { width: 100%; }
  .sp-nav__link, .sp-nav__trigger, .sp-nav__pill, .sp-nav__login { width: 100%; justify-content: space-between; }
  .sp-nav__menu { position: static; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 8px 12px; min-width: 0; }
  .sp-nav__item:hover > .sp-nav__menu { display: none; }      /* kein Hover-Open auf Touch */
  .sp-nav__item.is-open > .sp-nav__menu { display: block; }
}

/* ---- Flash-Meldungen (Symfony public, vanilla) -------------------------- */
.sp-flash {
  max-width: var(--sp-maxw); margin: 16px auto 0; padding: 12px 18px;
  border: var(--sp-border); border-radius: var(--sp-radius-sm);
  font-family: var(--sp-sans); font-size: 16px; color: var(--sp-graphit);
  background: var(--sp-warm);
}
.sp-flash--success { border-color: var(--sp-green); background: #f3f8e8; color: var(--sp-green-dark); }
.sp-flash--error, .sp-flash--danger { border-color: #c0392b; background: #fbeae8; color: #962d22; }
.sp-flash--warning { border-color: #d49a00; background: #fdf6e3; color: #8a6d00; }
.sp-flash--info { border-color: var(--sp-blue); background: #e8f3f9; color: var(--sp-blue-dark); }