/* =========================================================
   /assets/wrapper.css
   Einheitliche Wrapper: Verlauf (grün→gold), Radius, Schatten
   + optionaler innerer Rahmen (Inset-Frame)
   ========================================================= */

/* === Grundfarben & Variablen ============================= */
:root{
  --green:#1e7f4b;
  --gold:#d4af30;
  --radius:18px;              /* Standard-Rundung */
  --card:#ffffff;
}

/* =========================================================
   ========== BASIS-WRAPPER (runde Kanten + Verlauf) ========
   ========================================================= */
.na-wrap{
  position: relative;
  border: 2px solid transparent;
  border-radius: var(--radius);
  /* Zwei Hintergründe:
     1) weißer Innenbereich (padding-box)
     2) verlaufender Rand (border-box)
  */
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(90deg, var(--green), var(--gold)) border-box;
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
  padding: 22px;
  transition: transform .15s ease, box-shadow .15s ease;
}

/* Hover-Effekt (leicht angehoben) */
.na-wrap--hover:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 34px rgba(0,0,0,.10);
}

/* Rahmenstärken (optional) */
.na-wrap--thin { border-width: 1px; }
.na-wrap--thick{ border-width: 3px; }

/* =========================================================
   ========== INNERER RAHMEN (OPTIONAL, ZWEITE EBENE) =======
   ========================================================= */
.na-wrap--inner{
  position: relative;
}
.na-wrap--inner::before{
  content:"";
  position: absolute;
  inset: 12px;
  border-radius: calc(var(--radius) - 8px);
  border: 1.5px solid transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(90deg, var(--green), var(--gold)) border-box;
  pointer-events: none;
}
.na-wrap--inner.na-inner--tight::before{
  inset: 10px;
}

/* =========================================================
   ========== ABSTÄNDE & HINTERGRÜNDE =======================
   ========================================================= */

/* Varianten für Innenabstand */
.na-wrap--pad-lg{ padding: 24px; }
.na-wrap--pad-sm{ padding: 16px; }

/* Heller Hintergrund, falls gebraucht */
.na-wrap--soft-bg{
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(90deg, var(--green), var(--gold)) border-box;
}

/* =========================================================
   ========== FAQ-/DETAILS-Anwendung ========================
   ========================================================= */
/* Kann direkt für <details> genutzt werden */
details.na-wrap summary{
  cursor: pointer;
  font-weight: 600;
}
details.na-wrap[open]{
  box-shadow: 0 10px 36px rgba(0,0,0,.12);
}