/* ==========================================================================
   core.css – Gemeinsame Variablen & Wrapper für alle Habloo-Übungen.
   Jede Übung hat zusätzlich ihre eigene CSS-Datei (wortsuche.css usw.).
   ========================================================================== */

.habloo-exercise {
  --hb-primary:      #ff5b00;
  --hb-primary-dark: #e74f00;
  --hb-primary-soft: #fff0e6;
  --hb-navy:         #06083f;
  --hb-success:      #0fa968;
  --hb-success-bg:   #e2f8ee;
  --hb-danger:       #e25555;
  --hb-danger-bg:    #fff0f0;
  --hb-warning-bg:   #fff8f2;
  --hb-text:         #06083f;
  --hb-muted:        #6f7489;
  --hb-border:       #ffdcca;
  --hb-border-strong:#ff6a00;
  --hb-bg-soft:      #f7f8fb;
  --hb-surface:      #ffffff;
  --hb-radius-sm:    12px;
  --hb-radius-md:    18px;
  --hb-radius-lg:    26px;
  --hb-shadow:       0 18px 45px rgba(6, 8, 63, 0.10);
  --hb-shadow-soft:  0 8px 24px rgba(6, 8, 63, 0.09);
  --hb-font:         "Nunito", "Baloo 2", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  font-family: var(--hb-font);
  color: var(--hb-text);
  max-width: 1120px;
  margin: 34px auto;
  padding: 0 18px;
  font-weight: 500;
  line-height: 1.45;
}

.habloo-exercise * { box-sizing: border-box; }

/* Data-JSON nie sichtbar */
.habloo-exercise__data { display: none !important; }

/* Gemeinsame Button-Klasse als Fallback */
.habloo-exercise button {
  font-family: inherit;
  letter-spacing: 0;
}

.habloo-exercise h2 {
  max-width: calc(100% - 58px);
  margin: 0 0 14px;
  color: var(--hb-navy);
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.16;
  font-weight: 850;
}

.habloo-exercise__container {
  width: 100%;
}

.habloo-exercise :is(
  .hbm__container,
  .hmem__container,
  .hsb__container,
  .hsq__container,
  .hbf__container,
  .hwh__container
) {
  position: relative;
  overflow: visible;
  border: 0;
  border-radius: 0;
  padding: 0;
  text-align: center;
  background: transparent;
  box-shadow: none;
}

.habloo-exercise :is(
  .hbm__container,
  .hmem__container,
  .hsb__container,
  .hsq__container,
  .hbf__container,
  .hwh__container
) > * {
  position: relative;
}

.habloo-exercise :is(
  .hbm__btn,
  .hmem__btn,
  .hsb__btn,
  .hsq__btn,
  .hbf__btn,
  .hwh__btn,
  .hbw__btn
) {
  min-height: 48px;
  padding: 11px 22px;
  border: 0;
  border-radius: 18px;
  background: var(--hb-primary);
  color: #fff;
  cursor: pointer;
  font-weight: 850;
  font-size: 15px;
  box-shadow: 0 10px 22px rgba(255, 91, 0, 0.26);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, filter 0.16s ease;
}

.habloo-exercise :is(
  .hbm__btn,
  .hmem__btn,
  .hsb__btn,
  .hsq__btn,
  .hbf__btn,
  .hwh__btn,
  .hbw__btn
):hover {
  background: var(--hb-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(255, 91, 0, 0.30);
}

.habloo-exercise :is(.hbf__btn--secondary) {
  background: #fff;
  color: var(--hb-navy);
  border: 1.5px solid #e8e8ee;
  box-shadow: var(--hb-shadow-soft);
}

.habloo-exercise :is(.hbf__btn--secondary):hover {
  background: var(--hb-bg-soft);
  color: var(--hb-primary-dark);
}

.habloo-exercise :is(.hbm__card, .hmem__card, .hsb__word, .hsq__option, .hbf__input, .hwh__word) {
  color: var(--hb-navy);
  border-color: #e5e5ea;
  background: #fff;
  box-shadow: 0 4px 12px rgba(6, 8, 63, 0.08);
}

.habloo-exercise :is(.hbm__card, .hmem__card, .hsb__word, .hsq__option):hover {
  border-color: var(--hb-primary);
  background: #fff;
  transform: translateY(-1px);
}

.hb-info {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 4;
  text-align: left;
}

.hb-info[open] {
  z-index: 8;
}

.hb-info__trigger {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1.5px solid #e8e8ee;
  border-radius: 999px;
  background: #fff;
  color: var(--hb-navy);
  cursor: pointer;
  box-shadow: var(--hb-shadow-soft);
  list-style: none;
  transition: border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.hb-info__trigger::-webkit-details-marker {
  display: none;
}

.hb-info__trigger::before {
  content: "?";
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--hb-bg-soft);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.hb-info:hover .hb-info__trigger,
.hb-info[open] .hb-info__trigger {
  border-color: var(--hb-primary);
  color: var(--hb-primary);
  transform: translateY(-1px);
}

.hb-info__body {
  position: absolute;
  top: 48px;
  right: 0;
  width: min(285px, calc(100vw - 52px));
  display: none;
  padding: 14px 16px;
  border: 1.5px solid #ededf2;
  border-radius: 16px;
  background: #fff;
  color: #565c72;
  box-shadow: var(--hb-shadow);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
}

.hb-info:hover .hb-info__body,
.hb-info[open] .hb-info__body {
  display: block;
}

.hb-info__body strong {
  display: block;
  margin-bottom: 4px;
  color: var(--hb-navy);
  font-size: 15px;
  font-weight: 900;
}

@media (max-width: 700px) {
  .habloo-exercise {
    margin: 24px auto;
    padding: 0 12px;
  }

  .habloo-exercise :is(
    .hbm__container,
    .hmem__container,
    .hsb__container,
    .hsq__container,
    .hbf__container,
    .hwh__container
  ) {
    border-radius: 0;
  }

  .habloo-exercise h2 {
    max-width: 100%;
  }

  .hb-info {
    position: relative;
    top: auto;
    right: auto;
    display: flex;
    justify-content: flex-end;
    margin: -2px 0 12px;
  }

  .hb-info__body {
    right: 0;
  }
}