/*
 * Morph-Pill-Karte (nach der Vorlage „Morph Pill Card“).
 * Der Wurzelknoten belegt nur die Fläche der Pille; die Fläche liegt darüber und wächst darüber
 * hinaus. Alle Maße sind Eigenschaften aus den gemessenen Layouts; .is-open schaltet, welche Werte
 * jede Box liest – eine Klasse bewegt Fläche, Bild und Name gemeinsam auf derselben Feder.
 */
.mp {
  --mp-surface: #ffffff;
  --mp-text: #1f2a30;
  --mp-muted: #5b6770;
  --mp-button: #007E91;
  --mp-button-text: #ffffff;
  --mp-shadow: 0 1px 8px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 10px 26px rgba(0, 60, 70, 0.12);
  --mp-focus: #E8A020;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: var(--mp-pw);
  height: var(--mp-ph);
  font-family: Raleway, system-ui, sans-serif;
  font-size: var(--mp-font);
  color: var(--mp-text);
  /* ausdrücklich links: eine Karte liest sich von oben links, nicht zentriert wie ihre Umgebung */
  text-align: left;
}
.mp.is-open { z-index: 30; }
.mp__surface {
  --t: var(--mp-speed) var(--mp-spring);
  position: absolute;
  width: var(--mp-pw);
  height: var(--mp-ph);
  overflow: hidden;
  border-radius: calc(var(--mp-ph) / 2);
  background: var(--mp-surface);
  box-shadow: var(--mp-shadow);
  outline: none;
  cursor: default;
  transition: width var(--t), height var(--t), border-radius var(--t), translate var(--t);
}
.mp--center .mp__surface { left: 50%; top: 50%; translate: calc(-50% + var(--mp-shift, 0px)) -50%; }
.mp--start .mp__surface { left: 0; top: 0; }
.mp.is-open .mp__surface { width: var(--mp-cw); height: var(--mp-ch); border-radius: var(--mp-card-r); }
.mp__surface:focus-visible { box-shadow: var(--mp-shadow), 0 0 0 2px var(--mp-focus); }
/* gemeinsame Elemente: Bild und Name wandern zwischen den Layouts */
.mp__img {
  position: absolute;
  left: 8px;
  top: 8px;
  width: var(--mp-avatar);
  height: var(--mp-avatar);
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: calc(var(--mp-avatar) / 2);
  transition: width var(--t), height var(--t), border-radius var(--t);
  max-width: none;
}
.mp.is-open .mp__img { width: var(--mp-img-w); height: calc(var(--mp-ch) - 16px); border-radius: var(--mp-img-r); }
.mp__title {
  position: absolute;
  left: var(--mp-title-x0);
  top: var(--mp-title-y0);
  line-height: var(--mp-line);
  font-weight: 800;
  white-space: nowrap;
  transition: left var(--t), top var(--t);
}
.mp.is-open .mp__title { left: var(--mp-title-x1); top: var(--mp-title-y1); }
/* nur in der Karte: spät ein, sofort aus – nie von einer schrumpfenden Fläche gequetscht */
.mp__body {
  position: absolute;
  left: var(--mp-body-x);
  top: 14px;
  bottom: 12px;
  width: var(--mp-body-w);
  display: flex;
  flex-direction: column;
  opacity: 0;
  translate: 0 4px;
  pointer-events: none;
  transition: opacity 0.12s ease, translate 0.12s ease;
}
.mp.is-open .mp__body {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
  transition: opacity 0.3s ease calc(var(--mp-speed) * 0.35), translate 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--mp-speed) * 0.35);
}
.mp__title-space { height: var(--mp-line); flex: none; }
.mp__sub { margin-top: 7px; font-size: 0.75em; line-height: 1.5; color: var(--mp-muted); }
.mp__sub p, .mp__desc { margin: 0 !important; }
.mp__rows { margin: 6px 0 0 !important; padding: 0 !important; list-style: none; font-size: 0.72em; line-height: 1.7; }
.mp__rows li { display: flex; align-items: center; gap: 0.45em; margin: 0 !important; }
.mp__rows a { color: var(--mp-text) !important; text-decoration: none !important; }
.mp__rows a:hover { color: #007E91 !important; }
.mp__icon { display: inline-flex; flex: none; width: 1.15em; height: 1.15em; color: #007E91; }
.mp__icon svg { width: 100%; height: 100%; }
.mp__foot { margin-top: auto; padding-top: 12px; }
.mp__desc { font-size: 0.72em; line-height: 1.4; color: var(--mp-muted); }
.mp__button {
  display: inline-block;
  margin-top: 10px;
  padding: 0.5em 1.05em;
  border: 0;
  border-radius: 999px;
  background: var(--mp-button);
  color: var(--mp-button-text) !important;
  font: inherit;
  font-size: 0.75em;
  font-weight: 700;
  text-decoration: none !important;
  cursor: pointer;
  transition: filter 0.2s ease;
}
.mp__button:hover { filter: brightness(0.94); }
.mp__button:focus-visible { outline: 2px solid var(--mp-focus); outline-offset: 2px; }
/* Seiten-Stile (z. B. „.elementor img { height:auto; border-radius:0 }“) dürfen Bild und Fläche nicht verformen */
.mp .mp__img { height: var(--mp-avatar) !important; width: var(--mp-avatar) !important; max-width: none !important; border-radius: calc(var(--mp-avatar) / 2) !important; object-fit: cover !important; object-position: 50% 14%; margin: 0 !important; box-shadow: none !important; }
.mp.is-open .mp__img { width: var(--mp-img-w) !important; height: calc(var(--mp-ch) - 16px) !important; border-radius: var(--mp-img-r) !important; object-position: 50% 20%; }
/* Messkopien */
.mp__measure { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; }
.mp__title-measure { display: inline-block; white-space: nowrap; line-height: var(--mp-line); font-weight: 800; }
.mp__body-measure { width: var(--mp-body-w); display: flex; flex-direction: column; }
@media (prefers-reduced-motion: reduce) {
  .mp__surface, .mp__img, .mp__title { transition-duration: 0.01s; }
}