/* ===========================================================================
   Merke-Box (.formel-box) — clean, ruhig, ohne Randanimation.
   Nur dort einbinden, wo dieser Stil gewünscht ist: NACH wow.css und
   inhalt-extra.css, damit die Überschreibungen greifen.
   Aufbau im HTML:
     <div class="formel-box">
       <div class="label">Kurztitel</div>      (optional, steht neben dem Badge)
       <div class="formel">Kernaussage/Formel</div>
       <div class="where">                      (optional)
         <div class="wdef"><span class="wterm">Begriff</span><p class="wtext">…</p></div>
         …
       </div>
     </div>
   =========================================================================== */

.formel-box{
  background:#f6f1fc !important;
  border:3px solid var(--fach-strong) !important;
  border-radius:20px !important;
  box-shadow:0 16px 38px -26px rgba(61,42,107,.5) !important;
  padding:26px 32px 30px !important;
  margin:34px 0 !important;
  width:100%;box-sizing:border-box;
  text-align:left !important;
  position:relative;
  overflow:hidden;
  display:flex;flex-wrap:wrap;align-items:center;column-gap:16px;row-gap:0;
}

/* „Merke"-Badge: innen oben links, direkt vor der Überschrift */
.formel-box::before{
  content:'Merke';
  position:static;transform:none;flex:none;
  display:inline-block;margin:0;
  background:var(--fach-strong);color:#fff;
  font-family:'Fredoka',Inter,sans-serif;font-size:14px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;line-height:1;
  padding:8px 18px;border-radius:999px;opacity:1;width:auto;height:auto;
  box-shadow:0 4px 12px -5px rgba(61,42,107,.6);
}

/* Laufender Rand / Hover-Effekte aus wow.css hier abgeschaltet */
.formel-box::after{content:none !important;display:none !important;animation:none !important}
.formel-box .formel,.formel-box:hover .formel{transform:none !important;transition:none !important}

/* Kurztitel neben dem Badge */
.formel-box .label{
  flex:1 1 320px;min-width:0;order:1;
  font-family:'Fredoka',Inter,sans-serif;font-weight:700;
  font-size:clamp(18px,2.1vw,25px);line-height:1.3;
  color:var(--fach-ink);margin:0 !important;
  text-transform:none;letter-spacing:-0.005em;text-align:left;
}

/* Kernaussage / Formel */
.formel-box .formel{
  flex:1 1 320px;min-width:0;order:2;
  font-family:'Fredoka',Inter,sans-serif;font-weight:700;
  font-size:clamp(18px,2.1vw,25px) !important;line-height:1.35 !important;
  color:var(--fach-ink);margin:0 !important;letter-spacing:-0.005em;text-align:left;
}
/* Steht ein Kurztitel daneben, wird die Formel zur eigenen Zeile im weißen Feld */
.formel-box .label + .formel{
  flex:0 0 100%;margin:18px 0 0 !important;
  background:#fff;border:1px solid #e3d8f2;border-radius:14px;
  padding:14px 22px;text-align:center;
  font-size:clamp(22px,2.6vw,30px) !important;
}

/* Erläuterungen: Karten über die volle Breite */
.formel-box .where{
  flex:0 0 100%;order:3;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;
  max-width:none !important;margin:22px 0 0 !important;padding-top:0;
  position:relative;text-align:left;
  font-size:15px;line-height:1.7;color:var(--ink-soft);
}
.formel-box .where::before{content:none;display:none}
.formel-box .wdef{
  background:#fff;border:1px solid #e3d8f2;border-radius:14px;
  padding:16px 18px 17px;
  box-shadow:0 1px 2px rgba(61,42,107,.05);
}
.formel-box .whead{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.formel-box .wicon{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:9px;
  background:#efe6fa;color:var(--fach-strong);
}
.formel-box .wicon svg{width:18px;height:18px;display:block}
.formel-box .wterm{
  display:block;font-family:'Fredoka',Inter,sans-serif;font-weight:600;font-size:17px;
  color:var(--fach-ink);margin:0 0 4px;letter-spacing:.005em;line-height:1.25;
}
.formel-box .whead .wterm{margin:0}
.formel-box .wtext{display:block;margin:0;font-size:14.5px;line-height:1.65;color:var(--ink-soft)}
.formel-box .wtext strong{color:var(--fach-ink);font-weight:600}
.formel-box .wtext em{font-style:normal;font-weight:600;color:var(--fach-strong)}
.formel-box .frac{display:inline-flex;flex-direction:column;vertical-align:middle;line-height:1;margin:0 2px;transform:translateY(-2px)}
.formel-box .frac .fnum{font-size:.62em;border-bottom:2px solid var(--fach-ink);padding:0 6px 2px}
.formel-box .frac .fden{font-size:.62em;padding:2px 6px 0}

@media(max-width:760px){
  .formel-box{padding:22px 20px 26px !important;border-radius:18px !important;border-width:2.5px !important;align-items:flex-start;row-gap:12px}
  .formel-box::before{font-size:13px;padding:7px 15px}
  .formel-box .label,.formel-box .formel{flex:1 1 100%;font-size:19px !important}
  .formel-box .label + .formel{font-size:22px !important;padding:14px 16px}
  .formel-box .where{grid-template-columns:1fr;gap:12px;margin-top:18px !important}
}

/* Einzelne Erläuterung ohne Begriff: als ruhiger Fließtext statt Karte */
.formel-box .where.plain{display:block;background:transparent;border:0;padding:0}
.formel-box .where.plain .wtext{font-size:15px;line-height:1.7;max-width:80ch}