/* ======================================================
   ms-aussehen.css (komplett, final)
   - Struktur und Klassennamen unverändert
   - Icons per HTML (img / inline SVG); Größe global über --ms-icon-size
   - Alle Box-Typen enthalten (ms-news, ms-liebe, ms-stellungen, ms-bilder, ms-event, ms-test)
   - Neon-Theme für ms-news integriert
   - Erweiterte Farb-Bibliothek (deutsche Namen + Neon)
   ====================================================== */

/* -------------------------
   Farb-Bibliothek (deutsch + erweitert)
   ------------------------- */
:root {
  --color-weiss: #ffffff;
  --color-schwarz: #000000;
  --color-rot: #ff0000;
  --color-gruen: #008800;
  --color-gelb: #ffff00;
  --color-blau: #0059ff;
  --color-hellblau: #1182b7;
  --color-dunkelblau: #064571;
  --color-grau: #f2f2f2;
  --color-hellgrau: #e6e7e9;
  --color-beige: #f5f0e6;
  --color-braun: #a52a2a;
  --color-orange: #ff8c00;
  --color-tuerkis: #40e0d0;
  --color-lila: #800080;
  --color-pink: #ff1493;
  --color-gold: #ffd700;
  --color-silber: #c0c0c0;
  --color-aqua: #00ffff;
  --color-oliv: #808000;
  --color-limette: #32cd32;
  --color-neonpink: #db3eb1;
  --color-neongruen: #08ff08;
  --color-dunkelgrau: #374151;
  --color-navy: #001f54;
  --color-sky: #87ceeb;
  --color-rosahell: #fff0f6;
  --color-schnee: #fffafa;
  --color-chocolate: #d2691e;
  --color-firebrick: #b22222;
  --color-cyan: #00ffff;
  --color-azure: #f0ffff;
  --color-olivegruen: #556b2f;
  --color-turquoise: #40e0d0;
  --color-lightblue: #add8e6;
  --color-rhodamine: #e10098;
  --color-lichtrot: #ff7276;
  --color-fluorescent_gelb: #ccff00;
  --color-fluorescent_blau: #11ffee;

  /* Zusätzliche Farben */
  --color-stein: #f5f5f7;
  --color-graphit: #2d2f33;
  --color-asphalt: #1f2933;
  --color-steinhell: #f7f7f9;
  --color-sand: #e9dcc6;
  --color-sanddunkel: #cbb79a;
  --color-terracotta: #d9822b;
  --color-terracotta-dunkel: #b35f1f;
  --color-olivhell: #8a9a5b;
  --color-moos: #6b8e23;
  --color-waldgruen: #2f6b3a;
  --color-minze: #98ffea;
  --color-smaragd: #028a6b;
  --color-petrol: #005f6b;
  --color-indigo: #3f51b5;
  --color-violetthell: #9b59b6;
  --color-orchid: #da70d6;
  --color-rose: #ff6f91;
  --color-koralle: #ff6b6b;
  --color-terracotta-pastell: #ffb997;
  --color-honig: #f6c85f;
  --color-senf: #d4a017;
  --color-bernstein: #ffbf00;
  --color-kupfer: #b87333;
  --color-graphithell: #4b5563;
  --color-steingrau: #9ca3af;
  --color-blaugrau: #6b7280;
  --color-perl: #f3f4f6;
  --color-rauch: #e5e7eb;
  --color-nacht: #0b1220;
  --color-marine: #012a4a;
  --color-lavendel: #c7b3e6;
  --color-limone: #dfffa1;
  --color-mandarine: #ff9f45;
  --color-berry: #8b2e6f;
  --color-burgundy: #7b1e3a;
  --color-steel: #7b8a8b;
  --color-ice: #e6fbff;
  --color-mocha: #a67b5b;
  --color-cream: #fff7e6;
  --color-mint: #bff0d6;
  --color-olivehell: #b7c68b;
  --color-graphite-deep: #111827;

  /* Neon Farben */
  --color-neon-pink: #ff00cc;
  --color-neon-magenta: #ff00ff;
  --color-neon-fuchsia: #ff1493;
  --color-neon-cyan: #00fff6;
  --color-neon-aqua: #00ffd5;
  --color-neon-lime: #bfff00;
  --color-neon-green: #00ff66;
  --color-neon-yellow: #fffb00;
  --color-neon-orange: #ff6a00;
  --color-neon-red: #ff0033;
  --color-neon-blue: #0066ff;
  --color-neon-indigo: #6a00ff;
  --color-neon-teal: #00e6b8;
  --color-neon-rose: #ff4db8;
  --color-neon-electric: #7cff00;

  /* Neon accents */
  --neon-bg-dark: #071022;
  --neon-glow-strong: 0 6px 28px rgba(124, 0, 255, 0.28);
  --neon-glow-soft: 0 4px 18px rgba(0, 255, 204, 0.12);
}

/* -------------------------
   Globale Basisvariablen
   ------------------------- */
:root {
  --ms-radius: 12px;
  --ms-padding: 12px;
  --ms-width: 520px;
  --ms-width-mobile: calc(100% - 32px);
  --ms-z: 99999;
  --ms-font-default:
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --ms-shadow: 0 14px 40px rgba(2, 6, 23, 0.12);

  /* ICON: zentrale Steuerung für alle Boxen (globale Einheit) */
  --ms-icon-size: 20px; /* <--- globale Icon-Größe für alle Boxen */
  --ms-icon-padding-x: 12px;
  --ms-icon-padding-y: 12px;
}

/* -------------------------
   Basislayout (Icon | Content)
   ------------------------- */
.ms-box {
  /* Default Bereichsvariablen (können pro Typ Farben/Schrift überschreiben) */
  --ms-header-bg: var(--color-grau);
  --ms-header-farbe: var(--color-schwarz);
  --ms-body-bg: var(--color-weiss);
  --ms-body-farbe: var(--color-schwarz);
  --ms-icon-farbe: var(--color-blau);
  --ms-border: 1px solid rgba(0, 0, 0, 0.06);

  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(var(--ms-width), 92vw);
  max-width: 100%;
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow);
  z-index: var(--ms-z);
  font-family: var(--ms-font-default);
  overflow: hidden;

  /* Außenlayout: Grid mit Icon-Spalte und Content-Spalte */
  display: grid;
  grid-template-columns:
    calc(var(--ms-icon-size) + (var(--ms-icon-padding-x) * 2))
    1fr;
  grid-template-rows: auto 1fr auto;
  gap: 0;
  align-items: start;
  border: var(--ms-border);
  background: var(--ms-body-bg);
}

/* Fallback-Klasse, falls die alte Flex-Variante benötigt wird */
.ms-box.is-flex {
  display: flex;
}

/* -------------------------
   Icon-Spalte (links)
   - Icons werden im HTML eingefügt (inline SVG oder <img>)
   - Größe ausschließlich über --ms-icon-size steuerbar (global)
   ------------------------- */
.ms-box__icon-column,
.ms-icon {
  grid-row: 1 / span 3; /* Icon-Spalte erstreckt sich über Header, Body, Actions */
  display: grid;
  place-items: center;
  padding: var(--ms-icon-padding-y) var(--ms-icon-padding-x);
  width: calc(var(--ms-icon-size) + (var(--ms-icon-padding-x) * 2));
  min-width: calc(var(--ms-icon-size) + (var(--ms-icon-padding-x) * 2));
  background: transparent;
  color: var(--ms-icon-farbe);
}

/* Inline-SVGs innerhalb .ms-box__icon-column: nutzen eigene Füllung oder currentColor */
.ms-box__icon-column svg,
.ms-icon svg {
  width: var(--ms-icon-size);
  height: var(--ms-icon-size);
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/* Raster-Icons (<img>) */
.ms-box__icon-column img,
.ms-icon img {
  width: var(--ms-icon-size);
  height: var(--ms-icon-size);
  display: block;
  object-fit: contain;
  background: transparent;
}

/* Emoji-Fallback */
.ms-box__icon-column .ms-emoji,
.ms-icon .ms-emoji {
  font-size: calc(var(--ms-icon-size) * 0.9);
  line-height: 1;
}

/* Optional: Icon-Hintergrund per Datenattribut */
.ms-box[data-icon-bg="true"] .ms-box__icon-column,
.ms-box[data-icon-bg="true"] .ms-icon {
  background-color: var(--ms-icon-bg, rgba(0, 0, 0, 0.04));
  border-radius: 8px;
}

/* -------------------------
   Content-Spalte (Flex innen)
   - Header oben, Body wächst, Actions unten
   ------------------------- */
.ms-box__content-column,
.ms-content {
  grid-column: 2 / 3;
  grid-row: 1 / span 3;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  gap: 0;
  padding: 0;
}

/* Header oben */
.ms-header {
  order: 0;
  background: var(--ms-header-bg);
  color: var(--ms-header-farbe);
  padding: 12px 16px;
  font-weight: var(--ms-header-weight, 700);
  font-family: var(--ms-header-font, var(--ms-font-default));
  font-size: var(--ms-header-size, 16px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  line-height: 1.2;
  word-break: break-word;
}

/* Body/Text: direkt unter Header, füllt den verfügbaren Raum */
.ms-body {
  order: 1;
  background: var(--ms-body-bg);
  color: var(--ms-body-farbe);
  padding: 14px 16px;
  font-family: var(--ms-body-font, var(--ms-font-default));
  font-size: var(--ms-body-size, 14px);
  font-weight: var(--ms-body-weight, 400);
  line-height: 1.45;
  flex: 1 1 auto; /* Body wächst und nimmt Platz ein */
  min-height: 0; /* wichtig für korrektes Scroll-Verhalten in flex */
  overflow: auto;
  white-space: pre-wrap; /* nl2br-Ausgabe korrekt darstellen */
}

/* Actions (OK-Bereich): immer unter dem Body */
.ms-actions {
  order: 2;
  display: flex;
  justify-content: center; /* ändere zu flex-end für rechtsbündig */
  align-items: center;
  padding: 12px 16px;
  background: transparent;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  margin-top: 0;
}

/* -------------------------
   OK-Button Styling
   ------------------------- */
.ms-ok {
  background: var(--ms-ok-bg, var(--color-blau));
  color: var(--ms-ok-fg, var(--color-weiss));
  border: 0;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: var(--ms-ok-size, 14px);
  font-family: var(--ms-ok-font, var(--ms-font-default));
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.08);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    opacity 120ms ease;
}
.ms-ok:focus {
  outline: 3px solid rgba(0, 0, 0, 0.06);
  outline-offset: 2px;
}
.ms-ok:hover {
  filter: brightness(0.96);
  transform: translateY(-1px);
}

/* -------------------------
   Close (kleines X oben rechts)
   ------------------------- */
.ms-close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: rgba(0, 0, 0, 0.45);
  z-index: 2;
}
.ms-close:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--ms-body-farbe);
}

/* -------------------------
   Zentrierte Overlay-Variante
   ------------------------- */
.ms-center-screen {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  max-width: 92vw;
  box-sizing: border-box;
}

/* -------------------------
   Mobile Anpassung
   - bei sehr schmalen Viewports Icon über Content (Grid -> 1 Spalte)
   ------------------------- */
@media (max-width: 640px) {
  .ms-box {
    width: var(--ms-width-mobile);
    left: 50%;
    top: auto;
    bottom: 16px;
    transform: translateX(-50%);
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 10px;
  }
  .ms-box__icon-column,
  .ms-icon {
    grid-row: 1 / 2;
    width: calc(var(--ms-icon-size) + (var(--ms-icon-padding-x) * 1.5));
    min-width: calc(var(--ms-icon-size) + (var(--ms-icon-padding-x) * 1.5));
    padding: 8px;
    justify-self: start;
  }
  .ms-content {
    grid-row: 2 / 4;
  }
  .ms-header {
    padding: 10px 12px;
  }
  .ms-body {
    padding: 12px;
  }
  .ms-actions {
    padding: 10px 12px;
    justify-content: center;
  }
  .ms-box__icon-column svg,
  .ms-icon svg,
  .ms-box__icon-column img,
  .ms-icon img {
    width: calc(var(--ms-icon-size) * 0.8);
    height: calc(var(--ms-icon-size) * 0.8);
  }
}

/* -------------------------
   Reduced motion
   ------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* -------------------------
   Typ-Overrides (pro Box)
   - pro Box individuelle Variablen (Farben, Schrift, OK-Button)
   - KEINE Icon-Größen-Overrides mehr: alle Boxen nutzen --ms-icon-size
   ------------------------- */

/* ms-news (Neon Theme) */
.ms-news {
  --ms-header-bg: linear-gradient(
    90deg,
    var(--color-neon-indigo),
    var(--color-neon-magenta)
  );
  --ms-header-farbe: var(--color-neon-yellow);
  --ms-body-bg: var(--neon-bg-dark);
  --ms-body-farbe: #e6f7ff;
  --ms-icon-farbe: var(--color-neon-cyan);
  --ms-border: 1px solid rgba(124, 0, 255, 0.18);

  --ms-header-font: "Inter", var(--ms-font-default);
  --ms-header-size: 16px;
  --ms-header-weight: 800;
  --ms-body-font: var(--ms-font-default);
  --ms-body-size: 14px;
  --ms-body-weight: 400;

  --ms-ok-bg: linear-gradient(
    90deg,
    var(--color-neon-pink),
    var(--color-neon-rose)
  );
  --ms-ok-fg: #0b1220;
  --ms-ok-font: var(--ms-font-default);
  --ms-ok-size: 14px;
}

/* Neon-Feinschliff für ms-news */
.ms-news .ms-header {
  background-image: var(--ms-header-bg);
  color: var(--ms-header-farbe);
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.35),
    0 0 10px rgba(255, 255, 255, 0.02);
  box-shadow: var(--neon-glow-soft);
}
.ms-news .ms-body {
  background: var(--ms-body-bg);
  color: var(--ms-body-farbe);
  border-left: 4px solid rgba(0, 255, 204, 0.06);
  padding: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.ms-news .ms-box__icon-column {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.02),
    rgba(0, 0, 0, 0.06)
  );
  border-radius: 10px;
}
.ms-news .ms-box__icon-column svg,
.ms-news .ms-box__icon-column img {
  filter: drop-shadow(0 6px 18px rgba(0, 255, 204, 0.18));
  color: var(--ms-icon-farbe);
}
.ms-news .ms-ok {
  background-image: var(--ms-ok-bg);
  color: var(--ms-ok-fg);
  font-weight: 700;
  box-shadow:
    0 8px 30px rgba(255, 77, 184, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.25);
  border: 0;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease;
}
.ms-news .ms-ok:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 40px rgba(255, 77, 184, 0.28),
    0 4px 10px rgba(0, 0, 0, 0.3);
  filter: brightness(1.03);
}
.ms-news .ms-close {
  color: rgba(255, 255, 255, 0.85);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
  box-shadow: 0 6px 18px rgba(106, 0, 255, 0.06);
}
.ms-news .ms-close:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-neon-yellow);
  transform: scale(1.03);
}
.ms-news .ms-header::after {
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  margin-top: 8px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    rgba(255, 0, 204, 0.9),
    rgba(0, 255, 204, 0.9)
  );
  box-shadow: 0 8px 30px rgba(124, 0, 255, 0.12);
  opacity: 0.95;
  transform-origin: left center;
  animation: neonPulse 3.6s ease-in-out infinite;
}
@keyframes neonPulse {
  0% {
    transform: scaleX(0.92);
    filter: blur(0.6px);
    opacity: 0.9;
  }
  50% {
    transform: scaleX(1.02);
    filter: blur(1.8px);
    opacity: 1;
  }
  100% {
    transform: scaleX(0.92);
    filter: blur(0.6px);
    opacity: 0.9;
  }
}

/* ms-liebe */
.ms-liebe {
  --ms-header-bg: var(--color-rosahell);
  --ms-header-farbe: var(--color-rhodamine);
  --ms-body-bg: var(--color-beige);
  --ms-body-farbe: var(--color-braun);
  --ms-icon-farbe: var(--color-rhodamine);
  --ms-border: 1px solid rgba(225, 0, 152, 0.08);

  --ms-header-font: "Georgia", serif;
  --ms-header-size: 17px;
  --ms-header-weight: 700;
  --ms-body-font: "Georgia", serif;
  --ms-body-size: 15px;
  --ms-body-weight: 400;

  --ms-ok-bg: var(--color-rhodamine);
  --ms-ok-fg: var(--color-weiss);
  --ms-ok-font: "Georgia", serif;
  --ms-ok-size: 15px;
}

/* ms-stellungen */
.ms-stellungen {
  --ms-header-bg: var(--color-hellgrau);
  --ms-header-farbe: var(--color-dunkelgrau);
  --ms-body-bg: var(--color-weiss);
  --ms-body-farbe: var(--color-schwarz);
  --ms-icon-farbe: var(--color-dunkelgrau);
  --ms-border: 1px solid rgba(0, 0, 0, 0.06);

  --ms-header-font: var(--ms-font-default);
  --ms-header-size: 15px;
  --ms-header-weight: 700;
  --ms-body-font: var(--ms-font-default);
  --ms-body-size: 14px;
  --ms-body-weight: 400;

  --ms-ok-bg: var(--color-dunkelgrau);
  --ms-ok-fg: var(--color-weiss);
  --ms-ok-font: var(--ms-font-default);
  --ms-ok-size: 14px;
}

/* ms-bilder (dunkel) */
.ms-bilder {
  --ms-header-bg: var(--color-dunkelblau);
  --ms-header-farbe: var(--color-schnee);
  --ms-body-bg: #071022;
  --ms-body-farbe: var(--color-lightblue);
  --ms-icon-farbe: var(--color-schnee);
  --ms-border: 1px solid rgba(255, 255, 255, 0.06);

  --ms-header-font: "Helvetica Neue", Arial, sans-serif;
  --ms-header-size: 16px;
  --ms-header-weight: 700;
  --ms-body-font: "Helvetica Neue", Arial, sans-serif;
  --ms-body-size: 14px;
  --ms-body-weight: 400;

  --ms-ok-bg: var(--color-lightblue);
  --ms-ok-fg: var(--color-dunkelblau);
  --ms-ok-font: "Helvetica Neue", Arial, sans-serif;
  --ms-ok-size: 14px;
}

/* ms-event */
.ms-event {
  --ms-header-bg: var(--color-azure);
  --ms-header-farbe: var(--color-olivegruen);
  --ms-body-bg: var(--color-weiss);
  --ms-body-farbe: var(--color-olivegruen);
  --ms-icon-farbe: var(--color-lime);
  --ms-border: 1px solid rgba(16, 185, 129, 0.06);

  --ms-header-font: "Segoe UI", var(--ms-font-default);
  --ms-header-size: 16px;
  --ms-header-weight: 800;
  --ms-body-font: "Segoe UI", var(--ms-font-default);
  --ms-body-size: 14px;
  --ms-body-weight: 400;

  --ms-ok-bg: var(--color-lime);
  --ms-ok-fg: var(--color-schwarz);
  --ms-ok-font: "Segoe UI", var(--ms-font-default);
  --ms-ok-size: 14px;
}

/* ms-test (debug) */
.ms-test {
  --ms-header-bg: var(--color-gold);
  --ms-header-farbe: var(--color-firebrick);
  --ms-body-bg: var(--color-weiss);
  --ms-body-farbe: var(--color-firebrick);
  --ms-icon-farbe: var(--color-orange);
  --ms-border: 1px dashed rgba(0, 0, 0, 0.08);

  --ms-header-font: "Courier New", monospace;
  --ms-header-size: 15px;
  --ms-header-weight: 700;
  --ms-body-font: "Courier New", monospace;
  --ms-body-size: 13px;
  --ms-body-weight: 400;

  --ms-ok-bg: var(--color-orange);
  --ms-ok-fg: var(--color-weiss);
  --ms-ok-font: "Courier New", monospace;
  --ms-ok-size: 13px;
}

/* -------------------------
   Utility / kleine Extras
   ------------------------- */
/* Dezent abgerundete Boxen für Bilder/Icons */
.ms-icon-image {
  display: block;
  border-radius: 8px;
}

/* Fokus-Styles für Barrierefreiheit */
.ms-box:focus-within {
  box-shadow: 0 18px 48px rgba(2, 6, 23, 0.18);
}

/* Leichter Hover-Effekt auf Box (optional) */
.ms-box:hover {
  transform: translateY(-2px);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

/* -------------------------
   Hinweise
   - Icons: bitte keine inline width/height in PHP-Templates setzen; Größe über --ms-icon-size steuern
   - Wenn du das Neon-Theme global deaktivieren willst, entferne .ms-news-Overrides
   ------------------------- */