/*!
 * Mawimbi Bausteine: mw-core.css
 * Design-Tokens (--mw-*), vier Vorlagen-Themes und gemeinsame Bauteile.
 * Jede Fassung ueberschreibt NUR diese Variablen, nie die Modul-CSS-Dateien.
 *
 * Themes per Attribut auf <html>, <body> oder einem Container:
 *   data-mw-theme="light" | "dark" | "navy" | "petrol" | "auto" (folgt prefers-color-scheme)
 * Ohne Attribut gilt "light".
 */

/* ------------------------------------------------------------------ Tokens: hell (Standard) */
:root,
[data-mw-theme="light"] {
  /* Flaechen und Text */
  --mw-bg: #fbf9f4;
  --mw-surface: #ffffff;
  --mw-surface-2: #f3efe6;
  --mw-ink: #14262e;
  --mw-ink-2: #4a5b63;
  --mw-line: #d9d2c3;
  --mw-line-strong: #b9b09b;

  /* Akzente und Zustaende */
  --mw-accent: #0b7285;
  --mw-accent-ink: #ffffff;
  --mw-accent-soft: #dcf1f5;
  --mw-accent-2: #d9731a;
  --mw-accent-2-ink: #10202a;
  --mw-good: #17744b;
  --mw-good-soft: #e0f3e9;
  --mw-warn: #8f5800;
  --mw-warn-soft: #fbefd2;
  --mw-bad: #b3261e;
  --mw-bad-soft: #fbe3e0;
  --mw-focus: #0b7285;

  /* Illustrationen und Diagramme */
  --mw-water: #4db6cf;
  --mw-water-deep: #0e6e8c;
  --mw-water-soft: #bfe6ef;
  --mw-sky: #e4f3f8;
  --mw-sky-2: #fdf4e3;
  --mw-sand: #ecd9ae;
  --mw-sand-deep: #d3b87c;
  --mw-reef: #9a8a70;
  --mw-land: #e8e1cf;
  --mw-palm: #3f8a5a;
  --mw-wind: #0b7285;
  --mw-window: rgba(23, 116, 75, .16);
  --mw-sun: #f2a23a;
  --mw-night: #0e2238;
  --mw-foam: #ffffff;

  /* Schrift (nur Systemschriften als Standard, Fassungen setzen ihre lokalen Schriften) */
  --mw-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mw-font-display: var(--mw-font);
  --mw-fs-xs: .75rem;
  --mw-fs-s: .875rem;
  --mw-fs-m: 1rem;
  --mw-fs-l: 1.25rem;
  --mw-fs-xl: 1.75rem;
  --mw-fs-xxl: 2.5rem;
  --mw-fw: 400;
  --mw-fw-strong: 650;
  --mw-lh: 1.45;
  --mw-ls: 0;
  --mw-ls-label: .06em;
  --mw-tt-label: uppercase;

  /* Form */
  --mw-radius-s: 8px;
  --mw-radius: 14px;
  --mw-radius-l: 22px;
  --mw-radius-pill: 999px;
  --mw-border: 1px;
  --mw-shadow: 0 1px 2px rgba(20, 38, 46, .06), 0 8px 24px rgba(20, 38, 46, .08);
  --mw-shadow-s: 0 1px 2px rgba(20, 38, 46, .08);

  /* Abstaende */
  --mw-s1: .25rem;
  --mw-s2: .5rem;
  --mw-s3: .75rem;
  --mw-s4: 1rem;
  --mw-s5: 1.5rem;
  --mw-s6: 2.5rem;
  --mw-pad: 1.25rem;
  --mw-gap: 1rem;

  /* Bewegung */
  --mw-ease: cubic-bezier(.22, .61, .36, 1);
  --mw-dur: .25s;
}

/* ------------------------------------------------------------------ Tokens: dunkel (neutral) */
[data-mw-theme="dark"] {
  --mw-bg: #0f1417;
  --mw-surface: #172025;
  --mw-surface-2: #1f2a30;
  --mw-ink: #e8eef1;
  --mw-ink-2: #a7b6bd;
  --mw-line: #2c3a41;
  --mw-line-strong: #476069;
  --mw-accent: #56c8e1;
  --mw-accent-ink: #06222b;
  --mw-accent-soft: #123a45;
  --mw-accent-2: #ffb454;
  --mw-accent-2-ink: #1a1000;
  --mw-good: #63d99b;
  --mw-good-soft: #123a29;
  --mw-warn: #ffc860;
  --mw-warn-soft: #3d3112;
  --mw-bad: #ff8a80;
  --mw-bad-soft: #43201d;
  --mw-focus: #8fe3f5;
  --mw-water: #2a8fb4;
  --mw-water-deep: #14566f;
  --mw-water-soft: #1c4a5b;
  --mw-sky: #14232b;
  --mw-sky-2: #2a2520;
  --mw-sand: #8d7a52;
  --mw-sand-deep: #6b5a3a;
  --mw-reef: #6f6657;
  --mw-land: #2a3329;
  --mw-palm: #4fa072;
  --mw-wind: #56c8e1;
  --mw-window: rgba(99, 217, 155, .18);
  --mw-sun: #ffb454;
  --mw-night: #05090c;
  --mw-foam: #e6f3f8;
  --mw-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
  --mw-shadow-s: 0 1px 2px rgba(0, 0, 0, .4);
}

/* ------------------------------------------------------------------ Tokens: Navy (cinematic) */
[data-mw-theme="navy"] {
  --mw-bg: #06172a;
  --mw-surface: #0c2440;
  --mw-surface-2: #123152;
  --mw-ink: #eaf3fa;
  --mw-ink-2: #a9bdce;
  --mw-line: #25476b;
  --mw-line-strong: #3a6a98;
  --mw-accent: #4fd1e8;
  --mw-accent-ink: #04202e;
  --mw-accent-soft: #0f3a57;
  --mw-accent-2: #ffb454;
  --mw-accent-2-ink: #04202e;
  --mw-good: #5fe0a0;
  --mw-good-soft: #0f3a30;
  --mw-warn: #ffcb66;
  --mw-warn-soft: #3b3416;
  --mw-bad: #ff8b85;
  --mw-bad-soft: #43202a;
  --mw-focus: #9be8f7;
  --mw-water: #2b8fbd;
  --mw-water-deep: #0f4f7c;
  --mw-water-soft: #164e75;
  --mw-sky: #0a2038;
  --mw-sky-2: #1b2b45;
  --mw-sand: #a59066;
  --mw-sand-deep: #7a6a48;
  --mw-reef: #6c7280;
  --mw-land: #1a2f3f;
  --mw-palm: #4fa58c;
  --mw-wind: #4fd1e8;
  --mw-window: rgba(95, 224, 160, .2);
  --mw-sun: #ffb454;
  --mw-night: #020b16;
  --mw-foam: #e6f3f8;
  --mw-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 14px 36px rgba(0, 8, 20, .5);
  --mw-shadow-s: 0 1px 2px rgba(0, 0, 0, .45);
}

/* ------------------------------------------------------------------ Tokens: Petrol */
[data-mw-theme="petrol"] {
  --mw-bg: #0b3a40;
  --mw-surface: #10494f;
  --mw-surface-2: #15585f;
  --mw-ink: #ecf7f5;
  --mw-ink-2: #b4d6d2;
  --mw-line: #2c6d73;
  --mw-line-strong: #4b9097;
  --mw-accent: #f2c14e;
  --mw-accent-ink: #1b2a2c;
  --mw-accent-soft: #1d5a52;
  --mw-accent-2: #7ee0d1;
  --mw-accent-2-ink: #102a2c;
  --mw-good: #78e6a6;
  --mw-good-soft: #145244;
  --mw-warn: #ffd36e;
  --mw-warn-soft: #4a4a1c;
  --mw-bad: #ff9186;
  --mw-bad-soft: #4d2a2a;
  --mw-focus: #ffe08a;
  --mw-water: #36b3b0;
  --mw-water-deep: #12706f;
  --mw-water-soft: #1b6e70;
  --mw-sky: #0e4a52;
  --mw-sky-2: #36574a;
  --mw-sand: #dcc88f;
  --mw-sand-deep: #b09a63;
  --mw-reef: #7e8c7f;
  --mw-land: #1c5a55;
  --mw-palm: #7ccf98;
  --mw-wind: #f2c14e;
  --mw-window: rgba(120, 230, 166, .2);
  --mw-sun: #f2c14e;
  --mw-night: #03262b;
  --mw-foam: #eaf7f4;
  --mw-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 30px rgba(0, 24, 28, .4);
  --mw-shadow-s: 0 1px 2px rgba(0, 0, 0, .35);
}

/* "auto": dunkle Variante, wenn das System dunkel ist */
@media (prefers-color-scheme: dark) {
  [data-mw-theme="auto"] {
    --mw-bg: #0f1417;
    --mw-surface: #172025;
    --mw-surface-2: #1f2a30;
    --mw-ink: #e8eef1;
    --mw-ink-2: #a7b6bd;
    --mw-line: #2c3a41;
    --mw-line-strong: #476069;
    --mw-accent: #56c8e1;
    --mw-accent-ink: #06222b;
    --mw-accent-soft: #123a45;
    --mw-accent-2: #ffb454;
    --mw-accent-2-ink: #1a1000;
    --mw-good: #63d99b;
    --mw-good-soft: #123a29;
    --mw-warn: #ffc860;
    --mw-warn-soft: #3d3112;
    --mw-bad: #ff8a80;
    --mw-bad-soft: #43201d;
    --mw-focus: #8fe3f5;
    --mw-water: #2a8fb4;
    --mw-water-deep: #14566f;
    --mw-water-soft: #1c4a5b;
    --mw-sky: #14232b;
    --mw-sky-2: #2a2520;
    --mw-sand: #8d7a52;
    --mw-sand-deep: #6b5a3a;
    --mw-reef: #6f6657;
    --mw-land: #2a3329;
    --mw-palm: #4fa072;
    --mw-wind: #56c8e1;
    --mw-window: rgba(99, 217, 155, .18);
    --mw-sun: #ffb454;
    --mw-night: #05090c;
    --mw-foam: #e6f3f8;
  }
}

/* ------------------------------------------------------------------ Grundlage */
.mw,
.mw *,
.mw *::before,
.mw *::after {
  box-sizing: border-box;
}

.mw {
  font-family: var(--mw-font);
  font-size: var(--mw-fs-m);
  font-weight: var(--mw-fw);
  line-height: var(--mw-lh);
  letter-spacing: var(--mw-ls);
  color: var(--mw-ink);
  text-align: left;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.mw :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset, legend) {
  margin: 0;
  padding: 0;
}

.mw :where(ul, ol) { list-style: none; }

.mw :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}

.mw :where(svg, img) { max-width: 100%; height: auto; }

.mw-card {
  background: var(--mw-surface);
  border: var(--mw-border) solid var(--mw-line);
  border-radius: var(--mw-radius-l);
  box-shadow: var(--mw-shadow);
  padding: var(--mw-pad);
  min-width: 0;
}

.mw-eyebrow {
  font-size: var(--mw-fs-xs);
  font-weight: var(--mw-fw-strong);
  letter-spacing: var(--mw-ls-label);
  text-transform: var(--mw-tt-label);
  color: var(--mw-ink-2);
}

.mw-title {
  font-family: var(--mw-font-display);
  font-size: var(--mw-fs-xl);
  font-weight: var(--mw-fw-strong);
  line-height: 1.15;
}

.mw-muted { color: var(--mw-ink-2); }
.mw-num { font-variant-numeric: tabular-nums; }

/* nur fuer Screenreader */
.mw-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Links */
.mw :where(a) { color: var(--mw-accent); text-underline-offset: .18em; }

/* Fokus */
.mw :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--mw-focus);
  outline-offset: 2px;
  border-radius: var(--mw-radius-s);
}

/* Knoepfe */
.mw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mw-s2);
  min-height: 44px;
  padding: .55rem 1.1rem;
  border: var(--mw-border) solid var(--mw-line-strong);
  border-radius: var(--mw-radius-pill);
  background: var(--mw-surface);
  color: var(--mw-ink);
  font-weight: var(--mw-fw-strong);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--mw-dur) var(--mw-ease), border-color var(--mw-dur) var(--mw-ease), transform var(--mw-dur) var(--mw-ease);
}
.mw-btn:hover { background: var(--mw-surface-2); }
.mw-btn:active { transform: translateY(1px); }
.mw-btn--primary {
  background: var(--mw-accent);
  border-color: var(--mw-accent);
  color: var(--mw-accent-ink);
}
.mw-btn--primary:hover { background: var(--mw-accent); filter: brightness(1.08); }
.mw-btn--small { min-height: 36px; padding: .3rem .8rem; font-size: var(--mw-fs-s); }
.mw-btn[disabled], .mw-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* Auswahl-Chips: echte Radio-/Checkbox-Eingaben, optisch Kacheln */
.mw-choice {
  position: relative;
  display: block;
  min-width: 0;
}
.mw-choice > input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.mw-choice > span {
  display: block;
  height: 100%;
  padding: .8rem 1rem;
  border: var(--mw-border) solid var(--mw-line-strong);
  border-radius: var(--mw-radius);
  background: var(--mw-surface);
  transition: background var(--mw-dur) var(--mw-ease), border-color var(--mw-dur) var(--mw-ease), box-shadow var(--mw-dur) var(--mw-ease);
}
.mw-choice > input:hover + span { border-color: var(--mw-accent); }
.mw-choice > input:checked + span {
  border-color: var(--mw-accent);
  background: var(--mw-accent-soft);
  box-shadow: inset 0 0 0 1px var(--mw-accent);
}
.mw-choice > input:focus-visible + span {
  outline: 3px solid var(--mw-focus);
  outline-offset: 2px;
}

/* Statusplaketten */
.mw-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .65rem;
  border-radius: var(--mw-radius-pill);
  font-size: var(--mw-fs-s);
  font-weight: var(--mw-fw-strong);
  background: var(--mw-surface-2);
  color: var(--mw-ink);
}
.mw-badge--good { background: var(--mw-good-soft); color: var(--mw-good); }
.mw-badge--warn { background: var(--mw-warn-soft); color: var(--mw-warn); }
.mw-badge--bad { background: var(--mw-bad-soft); color: var(--mw-bad); }

/* Hinweiszeilen */
.mw-note {
  font-size: var(--mw-fs-xs);
  color: var(--mw-ink-2);
}

.mw-attr a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ------------------------------------------------------------------ Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  .mw *,
  .mw *::before,
  .mw *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}